Чему вы научитесь
- Блочная, резиновая и адаптивная верстка
- Верстка интернет-магазина
- Работа с с системой контроля версий 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. Работа с файлами, выгрузка сайта
- Создание поддоменов и почты
Курсовая. Мини-проект в портфолио
Веб-верстка PRO
Вёрстка 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-свойства
Для скачивания курса необходим Премиум доступ.
