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

Захар День
7 окт — 11 ноя
25 000
или 4167/мес

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

  • 14занятий
  • 5часов в неделю
  • 6недель

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

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

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

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

Расписание:

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

Необходимые материалы и инструменты

На курсе вам понадобится браузер Google Chrome, редактор кода Atom и графический редактор Figma. На финальной стадии публикации сайта вам потребуется аккаунт на сервисе GitHub и их одноимённое приложение.

Что в итоге

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

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

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

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

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