Name: [Skillbox] Веб-вёрстка для начинающих 2.0 [Михаил Овчинников, Сергей Корниенко, Максим Васянович]
SKU: 234832
Availability: InStock

Вы познакомитесь со стандартами Web 2.0, научитесь работать с макетами, форматировать код и освоите адаптивную верстку.

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

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

1. Вводный модуль
2. HTML
3. Основы CSS
4. Основы JavaScript
5. Адаптивность и кроссбраузерность
6. Оформление
7. Advanced CSS
8. Инструменты верстальщика

Вся программа курса:
(уроки будут появляться здесь)
Основы вёрстки
1. Как работают сайты. Верстка. Backend и frontend
2. Возможности HTML, CSS, JS
3. Настройка рабочего окружения
4. Правила написания кода. Работа с devtools
5. Github pages. Интеграция с vs code
HTML
1. Элементы HTML разметки. Теги
2. Виды тегов. Парные/непарные теги
3. Служебные теги
4. Основные теги
5. Атрибуты тегов
6. Текстовые теги. Преобразование текста
7. Теги картинок и ссылок
8. Теги для списка
9. Теги для таблиц
10. Прочие теги
11. HTML5-семантика
12. Стандарты и валидность
Формы и медиа-элементы
1. Тег form
2. Как правильно размечать формы
3. Атрибуты элементов формы
4. Теги для аудио и видео. Нюансы использования
5. Тег iframe
Доступность
1. Понятие доступности
2. Аria
3. Вредные и полезные советы
4. Проверка доступности
5. Проверка сайта. Исправление
Работаем с макетом
1. Работа с макетом. Photoshop и Avocode, Figma
2. Форматы изображений
3. Подключение изображений
4. SVG. Введение и вставка на страницу
CSS
1. Знакомство с CSS
2. Селекторы: как обращаться к элементам, вес селектора
3. Единицы измерения CSS
4. Свойства для текста
5. Блочные и инлайн элементы
6. Позиционирование, float, отступы
7. Цвета, фон
8. Подключение шрифтов
9. Форматирование css-кода
10. БЭМ-нейминг
11. Псевдоклассы и псевдоэлементы, сложные селекторы, функции
Практика. Flexbox
1. Создаем каркас
2. Стилизация. Flexbox
3. Дополнительные свойства flexbox
4. Бонус. Видео по bootstrap 4
Адаптивность и кроссбраузерность
1. Что такое адаптивная, резиновая, мобильная верстка. Pixel perfect. Mobile first
2. Относительные единицы измерения
3. Медиа запросы, viewport
4. Кроссбраузерность: общие подходы и тестирование
Javascript для верстальщика
1. Типы данных и переменные
2. Условия
3. Циклы и функции
4. Массивы и объекты
5. Обработка событий
6. Работа с DOM
7. Ajax
8. Плагины. Установка и гибкая настройка слайдера на сайте
9. jQuery
Бонус. Практикум
1. Введение. Разбираем макет на блоки
2. Верстка блока №1
3. Верстка блока №2
4. Верстка блока №3
Работа с хостингом
1. Покупка и настройка хостинга
2. FTP. Работа с файлами, выгрузка сайта
3. Создание поддоменов и почты
Курсовая. Мини-проект в портфолио
Веб-верстка PRO
Вёрстка HTML-писем
1. Общие правила верстки писем. Почтовики
2. Инструменты
3. Практика: верстаем письмо
Сборщики
1. Введение. Настраиваем окружение
2. Gulp. Пишем первый таск
3. Gulp. Дорабатываем сборку
4. Webpack. Делаем простую сборку
5. Webpack. Дорабатываем сборку
6. Союз двух сборщиков
Препроцессоры и постпроцессоры
1. Введение в препроцессоры
2. Sass. Возможности
3. Обзор Less, postcss
CSS Grid
1. Понятие Display: grid
2. Свойства контейнера
3. Свойства дочерних элементов
4. Практика: создаем сайт
Анимация
1. Введение в анимацию CSS3
2. Как можно анимировать проще — animate.css
3. Возможности анимации через JavaScript
CMS
1. Введение в CMS
2. CMS WordPress. Установка
3. CMS WordPress. Разделение шаблона
4. CMS WordPress. Подключение стилей и скриптов
5. CMS WordPress. Выводим данные на страницу из административной панели
Будущее вёрстки
1. Что нас ждет в будущем?
2. Новые HTML-теги
3. Новые CSS-свойства
  Стоимость со скидкой 19 600 ₽