Программа и содержание
Вес 18.2 ГБ на облаке маил.
Кому подойдёт этот курс
Новичкам в разработке
Вы поймёте назначение основных тегов HTML, сможете стилизовать и размещать элементы с помощью CSS и сверстаете свой первый макет.
Начинающим верстальщикам
Вы расширите знания об HTML-разметке и CSS-технологиях, научитесь создавать интерактивные сайты на jаvascript и работать с системой контроля версий Git, пополните портфолио новыми проектами и сможете зарабатывать больше.
Фрилансерам
Вы освоите базовые принципы веб-вёрстки и поймете, как работать с макетами, а по итогу станете универсальным специалистом и сможете создавать сайты для клиентов без привлечения подрядчиков.
Чему вы научитесь
Блочная, резиновая и адаптивная верстка
Верстка интернет-магазина
Работа с системой контроля версий Git
Проверка сайта на доступность
Основы CSS, HTML и jаvascript
Тестирование и исправление браузерных несовместимостей
Работа с современными инструментами
Программа курса
Основы вёрстки
Как работают сайты. Верстка. 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
Кроссбраузерность: общие подходы и тестирование
jаvascript для верстальщика
Типы данных и переменные
Условия
Циклы и функции
Массивы и объекты
Обработка событий
Работа с DOM
Ajax
Плагины. Установка и гибкая настройка слайдера на сайте
jQuery
Бонус. Практикум
Введение. Разбираем макет на блоки
Верстка блока №1
Верстка блока №2
Верстка блока №3
Работа с хостингом
Покупка и настройка хостинга
FTP. Работа с файлами, выгрузка сайта
Создание поддоменов и почты
Курсовая. Мини-проект в портфолио
ПРО
Вёрстка HTML-писем
Общие правила верстки писем. Почтовики
Инструменты
Практика: верстаем письмо
Сборщики
Введение. Настраиваем окружение
Gulp. Пишем первый таск
Gulp. Дорабатываем сборку
Webpack. Делаем простую сборку
Webpack. Дорабатываем сборку
Союз двух сборщиков
Препроцессоры и постпроцессоры
Введение в препроцессоры
Sass. Возможности
Обзор Less, postcss
CSS Grid
Понятие Display: grid
Свойства контейнера
Свойства дочерних элементов
Практика: создаем сайт
Анимация
Введение в анимацию CSS3
Как можно анимировать проще — animate.css
Возможности анимации через jаvascript
CMS
Введение в CMS
CMS WordPress. Установка
CMS WordPress. Разделение шаблона
CMS WordPress. Подключение стилей и скриптов
CMS WordPress. Выводим данные на страницу из административной панели
Будущее вёрстки
Что нас ждет в будущем?
Новые HTML-теги
Новые CSS-свойства