Основы веб-вёрстки

Захар День
18 май — 22 июн
25 000
17 500
до 17 апреля

Программа руководителя кафедры «Дизайн и программирование» в Школе дизайна НИУ ВШЭ Захара Дня эффективно обучает основам веб-вёрстки. Студенты получат фундаментальные знания, поймут, как устроена информационная экосистема и получат базу для самостоятельного развития после окончания курса.

Кому подойдет курс

Людям без опыта в веб-верстке и сайтостроении, которые хотят узнать, как превратить макет в готовый сайт.

Чему вы научитесь:

  • создавать страницы сайтов и стилизовать их согласно макету;
  • работать с текстом и шрифтами в вебе;
  • адаптировать вёрстку под десктопные и мобильные устройства;
  • работать со скриптами и подключать полезные библиотеки;
  • готовить графику и планировать верстку;
  • подключать аналитику, оптимизировать страницы для поисковых систем;
  • публиковать сайт в интернете.

Расписание:

  1. Инструментарий
  • Редактор кода Atom
  • Браузер Google Chrome
  1. Что такое HTML
  • Основные понятия
  • Что такое тег и как устроена его анатомия
  • Как объяснить браузеру на каком языке мы с ним будем говорить
  • Базовая структура HTML
  1. Что такое CSS
  • Основные понятия
  • Откуда берутся стили в браузере
  • Синтаксис и способы написания стилей
  • Свойства, значения свойств и величины
  • Составные правила
  • Селекторы
  1. Подготовка к вёрстке
  • Почему важен сброс предустановленных стилей и как его сделать
  • Как подключить шрифты
  • Как вывести изображение
  • Упрощённый способ вёрстки
  1. Основные понятия веб-типографики
  • Свойства для работы с текстом
  • Основные понятия бокс модели
  • Взаимозависимость свойств при работе с текстом
  • Вёрстка текста по макету пиксель в пиксель
  • Создание устойчивой к действиям пользователя системы правил
  1. Основы веб-вёрстки
  • Семантика в HTML и какие бывают теги
  • Что такое DOM и почему важно это понимать
  • Что такое поток, блочные и строчные элементы
  • Что такое позиционирование элементов и как оно работает
  • Что такое псевдоэлементы, зачем и как их использовать
  • Как создать меню, закреплённое на экране
  1. Основы отзывчивой веб-вёрстки
  • Какие экраны сегодня популярны и как за этим следить в будущем
  • Что такое медиа-запросы, какие бывают и как их использовать
  • Как запретить телефону масштабировать сайт без нашего ведома
  • Адаптируем страницу под планшет
  • Адаптируем страницу под смартфон
  1. Современная веб-вёрстка
  • Что такое флексбокс и как с помощью него быстро сделать меню
  • Структурируем файлы в проекте и учимся работать с путями
  • Объединяем несколько страниц в сайт
  • Верстаем ленту постов
  • Спецэффекты в вебе: тени, скругление углов, эффекты при наведении
  1. Немного про скрипты
  • Зачем нужны скрипты
  • Что такое JavaScript
  • Подключение библиотек и их использование
  1. Подготовка к вёрстке лендинга
  • Изучаем макет и планируем вёрстку
  • Подготавливаем пространство для вёрстки
  • Подготавливаем растровую графику
  • Подготавливаем векторную графику
  • Используем графику в виде фонового изображения
  • Выводим текст и другие необходимые элементы
  1. Вёрстка лендинга
  • Вёрстка основных элементов под 13−15″ экраны
  • Вёрстка основных элементов под горизонтальный планшет и экраны до 13″
  • Вёрстка основных элементов под вертикальный планшет
  • Вёрстка основных элементов под смартфоны
  • Вёрстка оставшихся элементов под все разрешения экранов
  1. Подготовка сайта к публикации
  • Какие инструменты аналитики существуют
  • Подключаем Google Analytics и Яндекс Метрику
  • Подготавливаем сайт к индексации поисковиками
  • Подготавливаем сайт к шейру в социальных сетях
  1. Публикуем сайт
  • Выбираем хостинг
  • Покупаем домен
  • Публикуем сайт
  1. Качаем скилл дальше
  • Что изучать дальше в веб-вёрстке
  • Как устроен мир веб-разработки и куда дальше идти

Что в итоге

Результатом обучения станет сайт, который вы самостоятельно разработаете под руководством преподавателя.

Кто будет преподавать

Захар День. Руководитель кафедры «Дизайн и программирование» в Школе дизайна НИУ ВШЭ. Преподаёт цифровой дизайн, программирование и управление проектами. Студенты работают в известных компаниях: Сбербанк, Яндекс, Рамблер, Тинькофф, МТС, Kaspersky, Aic, Смена, Ценципер, Pinkman, Wylsacom, Wheely, и многих других. Автор курса-бестселлера по веб-вёрстке в Moscow Coding School, в прошлом разработчик в Bookmate.

В Bang Bang Education учатся студенты из компаний

и многих других