Как создать веб-страницу

Как создать веб-страницу

Кто это говорит?

Сергей Фомин

• Делаю сайты с 2008 года
• По-настоящему в разработке с 2016 года
• Более 3х лет преподаю вёрстку
• Руковожу командой разработчиков
• Участвую в развитии продукта

О чём мы будем говорить?

1. Два вебинара: теория и практика
2. Весь путь сайта, от идеи до готового продукта
3. Как работает сайт?
4. Что такое вёрстка? Какие задачи верстальщика?
5. Знания и технологии необходимые верстальщику

Что мы будем делать?

1. Поговорим
2. Попробуем сделать простую HTML страницу
3. HTML. Рассмотрим популярные теги (вебинар 2)
4. CSS. Какие возможности у языка? (вебинар 2)
5. Сверстаем страницу по макету (вебинар 2)
6. Опубликуем страницу в интернете (вебинар 2)

Как делают сайты?

1. Идея
2. Прототип (пример)
3. Дизайн (пример)
4. Вёрстка
5. Программирование
6. Тестирование
7. Релиз

Как делают сайты?

1. Идея
2. Прототип (пример) *
3. Дизайн (пример)
4. Вёрстка
5. Программирование
6. Тестирование *
7. Релиз

Как работает сайт?

Что работает в браузере?

1. HTML
2. CSS
3. JS
4. Медиа (изображения, видео, аудио)
5. + каждый день что-то ещё

Что работает на сервере?

1. Что угодно

Что такое вёрстка?

Верстальщик, с помощью HTML и CSS превращает картинку нарисованную дизайнером в страницу, которая выглядит точно так же.

Что необходимо знать верстальщику?

1. Хорошо изучить HTML и его особенности.
2. Хорошо изучить базовые свойства в CSS и их особенности.
3. Знать базовый JS. Чем более глубокие знания, тем лучше, однако базовых как правило достаточно.
4. Уметь пользоваться базовыми инструментами для верстальщика.
5. Изучать особенности и обновления браузеров.

HTML

1. Изучить какие существуют теги.
2. Знать и уметь применять все популярные теги.
3. Понимать особенности семантической вёрстки.
4. Изучить понятие доступности страниц (A11y).

CSS

Базовый JS

• Синтаксис
• Условия, Циклы
• Функции
• События
• DOM

Инструменты, методологии, фреймворки

• Редакторы (VS Code, Sublime, WebStorm)
• Normalize.css
• Препроцессоры / PostCSS
• BEM
• Bootstrap

Так что по задачам?

Простыми словами, что должен уметь верстальщик:

• Превращать картинку дизайнера в HTML и CSS
• Уметь адаптировать страницы под любые размеры экрана
• Самостоятельно и хорошо тестировать страницы
• Применять к странице готовые решения на JS
• Писать базовую логику на JS

Самое важное

• Уметь думать как пользователь
• Делать страницу универсальной, на сколько это возможно
• Думать о задачах в разрезе бизнеса
• По-настоящему любить то, чем занимается

Немного практики

Спасибо!

Следующий вебинар 14 мая в 19:00 по Нур-Султану и в 16:00 по Киеву.

Будем верстать настоящий макет :)