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

Захар День
18 май — 22 июн
25 000
18 750
до 25 февраля

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

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

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

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

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

Расписание:

  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 учатся студенты из компаний

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