Доступно [Skillbox] Веб-вёрстка, 2020 (Сергей Корниенко, Максим Васянович)

​

Кому подойдёт этот курс
Новичкам в разработке
Вы освоите актуальный навык разработчика за 6 месяцев, даже если раньше никогда не слышали про HTML, CSS и JavaScript.

Начинающим верстальщикам
Вы систематизируете свои знания по вёрстке, прокачаете навыки, пополните портфолио новыми проектами и сможете зарабатывать больше.

Дизайнерам и backend-разработчикам
У вас появится дополнительный скилл по frontend-разработке, который поможет закрывать многие проекты самостоятельно.

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

• Блочная, резиновая и адаптивная верстка
• Верстка интернет-магазина
• Работа с с системой контроля версий 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-свойства