[Skillbox] Онлайн-курс «Веб-вёрстка» [2020]

[Skillbox] Онлайн-курс «Веб-вёрстка» [2020]

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

Блочная, резиновая и адаптивная верстка
Верстка интернет-магазина
Работа с с системой контроля версий Git
Проверка сайта на доступность
Основы CSS, HTML и JavaScript
Работа с современными инструментами
Основы вёрстки

Как работают сайты. Верстка. Backend и frontend
Возможности HTML, CSS, JS
Настройка рабочего окружения
Правила написания кода. Работа с devtools
Github pages. Интеграция с vs code
HTML

Элементы HTML разметки. Теги
Виды тегов. Парные/непарные теги
Служебные теги
Основные теги
Атрибуты тегов
Текстовые теги. Преобразование текста
Теги картинок и ссылок
Теги для списка
Теги для таблиц
Прочие теги
HTML5-семантика
Стандарты и валидность
Формы и медиа-элементы

Тег form
Как правильно размечать формы
Атрибуты элементов формы
Теги для аудио и видео. Нюансы использования
Тег iframe
Доступность

Понятие доступности
Аria
Вредные и полезные советы
Проверка доступности
Проверка сайта. Исправление
Работаем с макетом

Работа с макетом. Photoshop и Avocode, Figma
Форматы изображений
Подключение изображений
SVG. Введение и вставка на страницу
CSS

Знакомство с CSS
Селекторы: как обращаться к элементам, вес селектора
Единицы измерения CSS
Свойства для текста
Блочные и инлайн элементы
Позиционирование, float, отступы
Цвета, фон
Подключение шрифтов
Форматирование css-кода
БЭМ-нейминг
Псевдоклассы и псевдоэлементы, сложные селекторы, функции
Практика. Flexbox

Создаем каркас
Стилизация. Flexbox
Дополнительные свойства flexbox
Бонус. Видео по bootstrap 4
Адаптивность и кроссбраузерность

Что такое адаптивная, резиновая, мобильная верстка. Pixel perfect. Mobile first
Относительные единицы измерения
Медиа запросы, viewport
Кроссбраузерность: общие подходы и тестирование
Javascript для верстальщика

Типы данных и переменные
Условия
Циклы и функции
Массивы и объекты
Обработка событий
Работа с DOM
Ajax
Плагины. Установка и гибкая настройка слайдера на сайте
jQuery
Бонус. Практикум

Введение. Разбираем макет на блоки
Верстка блока №1
Верстка блока №2
Верстка блока №3
Работа с хостингом

Покупка и настройка хостинга
FTP. Работа с файлами, выгрузка сайта
Создание поддоменов и почты
Курсовая. Мини-проект в портфолио
Вёрстка HTML-писем

Общие правила верстки писем. Почтовики
Инструменты
Практика: верстаем письмо
Сборщики

Введение. Настраиваем окружение
Gulp. Пишем первый таск
Gulp. Дорабатываем сборку
Webpack. Делаем простую сборку
Webpack. Дорабатываем сборку
Союз двух сборщиков
Препроцессоры и постпроцессоры

Введение в препроцессоры
Sass. Возможности
Обзор Less, postcss
CSS Grid

Понятие Display: grid
Свойства контейнера
Свойства дочерних элементов
Практика: создаем сайт
Анимация

Введение в анимацию CSS3
Как можно анимировать проще — animate.css
Возможности анимации через JavaScript
CMS

Введение в CMS
CMS WordPress. Установка
CMS WordPress. Разделение шаблона
CMS WordPress. Подключение стилей и скриптов
CMS WordPress. Выводим данные на страницу из административной панели
Будущее вёрстки

Что нас ждет в будущем?
Новые HTML-теги
Новые CSS-свойства