Кто это говорит?
Сергей Фомин
- Делаю сайты с 2008 года
- По-настоящему в разработке с 2016 года
- Более 3х лет преподаю вёрстку
- Руковожу командой разработчиков
- Участвую в развитии продукта
О чём мы будем говорить?
- Два вебинара: теория и практика
- Весь путь сайта, от идеи до готового продукта
- Как работает сайт?
- Что такое вёрстка? Какие задачи верстальщика?
- Знания и технологии необходимые верстальщику
Что мы будем делать?
- Поговорим
- Попробуем сделать простую HTML страницу
-
HTML. Рассмотрим популярные теги (вебинар 2)
-
CSS. Какие возможности у языка? (вебинар 2)
-
Сверстаем страницу по макету (вебинар 2)
-
Опубликуем страницу в интернете (вебинар 2)
Как делают сайты?
- Идея
-
Прототип (пример)
-
Дизайн (пример)
- Вёрстка
- Программирование
- Тестирование
- Релиз
Как делают сайты?
- Идея
-
Прототип (пример) *
- Дизайн (пример)
- Вёрстка
- Программирование
- Тестирование *
- Релиз
Что работает в браузере?
- HTML
- CSS
- JS
- Медиа (изображения, видео, аудио)
- + каждый день что-то ещё
Что работает на сервере?
- Что угодно
Что такое вёрстка?
Верстальщик, с помощью HTML и CSS превращает картинку нарисованную
дизайнером в страницу, которая выглядит точно так же.
Что необходимо знать верстальщику?
- Хорошо изучить HTML и его особенности.
-
Хорошо изучить базовые свойства в CSS и их особенности.
-
Знать базовый JS. Чем более глубокие знания, тем лучше, однако базовых
как правило достаточно.
-
Уметь пользоваться базовыми инструментами для верстальщика.
- Изучать особенности и обновления браузеров.
HTML
- Изучить какие существуют теги.
- Знать и уметь применять все популярные теги.
- Понимать особенности семантической вёрстки.
- Изучить понятие доступности страниц (A11y).
Справочник по HTML
CSS
- Шрифты. Особенности.
- Селекторы. Специфичность.
- Блочная модель.
- Float
- Position
- Flexbox
- Grid
- Псевдо -классы, -элементы.
- Работа с SVG
- Responsive
- CSS-анимации
Справочник по CSS
Инструменты, методологии, фреймворки
Так что по задачам?
Простыми словами, что должен уметь верстальщик:
- Превращать картинку дизайнера в HTML и CSS
-
Уметь адаптировать страницы под любые размеры экрана
- Самостоятельно и хорошо тестировать страницы
- Применять к странице готовые решения на JS
- Писать базовую логику на JS
Самое важное
- Уметь думать как пользователь
-
Делать страницу универсальной, на сколько это возможно
- Думать о задачах в разрезе бизнеса
- По-настоящему любить то, чем занимается
Спасибо!
Следующий вебинар 14 мая в 19:00 по Нур-Султану и в 16:00 по Киеву.
Будем верстать настоящий макет :)