Содержание пакета (2 курса)
1. Основы вёрстки с HTML и CSS 4.17
GitHub, Figma, Макет
8 уроков
1.
Знакомство с GitHub
↗
2.
Создание и клонирование репозитория
↗
3.
Изменения, commit, push
↗
4.
Макет и знакомство с Figma
↗
5.
Картинки и их экспорт
↗
6.
Расширения VSCode
↗
7.
Форматы картинок, иконки. Знакомство с index.html
↗
8.
Исходники первого модуля. Домашнее задание
↗
Теги и начало вёрстки макета
9 уроков
1.
Базовые теги. Консоль devtools
↗
2.
Разновидности тегов. Табличные теги.
↗
3.
Заголовки и списки
↗
4.
Разметка блока Header
↗
5.
Разметка секций услуг. Тег section.
↗
6.
Разметка секции "Отзывы"
↗
7.
Разметка подвала (footer). Тег div.
↗
8.
Подведение итога
↗
9.
Исходники модуля и Домашнее задание
↗
Знакомство с CSS
5 уроков
1.
Введение в стили CSS
↗
2.
Практика: добавляем и применяем CSS
↗
3.
Перенос с макета ссылок и цветов
↗
4.
Перенос шрифтов
↗
5.
Исходники и Домашнее задание
↗
Отступы, devtools, блочные элементы
7 уроков
1.
Разбор ДЗ
↗
2.
Стили и devtools. Вкладки styles & computed
↗
3.
Блочные и строчные элементы
↗
4.
Padding
↗
5.
Margin
↗
6.
Практика: перенос отступов в различных блоках с макета
↗
7.
Исходники и Домашнее Задание
↗
Флексбоксы
9 уроков
1.
Разбор ДЗ - Вёрстка блока About
↗
2.
Разбор ДЗ - Блоки Clients, Advantages
↗
3.
Разбор ДЗ - Блок Footer
↗
4.
Флексбокс. Концепция и зачем применяется
↗
5.
Флексбокс. Управление по осям
↗
6.
Флексбокс. order, flex-direction, flex-wrap
↗
7.
Делаем кнопку и блок About на флексах. Часть 1
↗
8.
Делаем кнопку и блок About на флексах. Часть 2
↗
9.
Исходники и Домашнее Задание
↗
Формы, группировки, селекторы
12 уроков
1.
Разбор ДЗ Блоки services и clients
↗
2.
Разбор ДЗ - Блок Преимущества
↗
3.
Разбор ДЗ - Блок футера
↗
4.
Формы. Поля ввода и их типы
↗
5.
Формы. Checkbox, Label
↗
6.
Группировка. Fieldset, legend, radiobutton
↗
7.
Атрибуты value, checked, placeholder. Отправка формы
↗
8.
Селекторы и их вес
↗
9.
Форма с элементами ввода
↗
10.
placeholder и кнопки
↗
11.
Пояснение к ДЗ
↗
12.
Исходники и Домашнее Задание
↗
Позиционирование и поведение
7 уроков
1.
Разбор ДЗ: Оформляем popup
↗
2.
Позиционирование, position absolute
↗
3.
Псевдоэлементы. position fixed. Позиционирование popup
↗
4.
Поведение элементов. Кнопки и ссылки
↗
5.
Практика. Кнопки и ссылки.
↗
6.
Делаем поведение в блоке service
↗
7.
Исходники и Домашнее Задание
↗
Завершение проекта
9 уроков
1.
Блок About
↗
2.
Блок Clients
↗
3.
Футер
↗
4.
Ревью
↗
5.
Popup
↗
6.
Inputs
↗
7.
Radio Buttons
↗
8.
JS Popup
↗
9.
Исходники и ссылки
↗
2. Продвинутая вёрстка с HTML, CSS, Figma 3.00
Git и настройка проекта
5 уроков
1.
Консоль. Создание проекта
↗
2.
Основы работы с GitHub
↗
3.
Подключение NPM и работа с ним
↗
4.
Работа с gulp
↗
5.
Домашнее задание
↗
Методологии вёрстки и семантика
3 урока
1.
Вёрстка макета с БЭМ
↗
2.
Вёрстка формы
↗
3.
Домашнее задание
↗
Препроцессоры. Графика. Шрифты
7 уроков
1.
Вёрстка элементов макета
↗
2.
Работа с препроцессорами
↗
3.
Настройка и подключение шрифтов
↗
4.
Оптимизация скрипта
↗
5.
Настройка элементов страницы
↗
6.
Оптимизация изображений
↗
7.
Тестирование
↗
Концепции вёрстки. Адаптивность
5 уроков
1.
Настройка базовой стилизации
↗
2.
Настройка стилей footer
↗
3.
Настройка сетки блоков
↗
4.
Адаптивная вёрстка под разные типы экранов
↗
5.
Тестирование
↗
Медиа выражения
7 уроков
1.
Вёрстка footer
↗
2.
Адаптивная вёрстка с медиа выражениями
↗
3.
Добавляем адаптивную вёрстку в проект
↗
4.
Вёрстка блока About
↗
5.
Адаптивная вёрстка блоков
↗
6.
Адаптивная вёрстка footer
↗
7.
Тестирование
↗
Относительные единицы. Резиновая вёрстка
9 уроков
1.
Делаем Header
↗
2.
Настройка padding в Header
↗
3.
Отступы элементов в адаптивной вёрстке
↗
4.
Делаем git rebase
↗
5.
Резиновая вёрстка - введение
↗
6.
Резиновая вёрстка блоков с изображениями
↗
7.
Убираем полосы прокрутки
↗
8.
Оптимизация резиновой вёрстки
↗
9.
Тестирование
↗
Картинки адаптивные и резиновые. Спрайт. Грид
12 уроков
1.
Оптимизируем резиновую вёрстку под маленькие экраны
↗
2.
Оптимизация резиновой вёрстки хедера под мобильную версию
↗
3.
Оптимизация резиновой вёрстки для оставшихся блоков
↗
4.
Ретинизация
↗
5.
Настройка резиновой картинки
↗
6.
Настройка отображения изображения в зависимости от размера экран
↗
7.
Знакомство с классом grid
↗
8.
Настройка ретинизации через стили css
↗
9.
Меняем картинки для ретины
↗
10.
Делаем всплывающую форму при помощи grid
↗
11.
Создаём и подключаем в проект svg-спрайты
↗
12.
Тестирование
↗
Бутстрап. Открытые формы. Слайдер
15 уроков
1.
Разбор домашнего задания по вёрстке картинок
↗
2.
Разбор вёрстки форм
↗
3.
Разбор Bootstrap
↗
4.
Подключение Bootstrap кнопки
↗
5.
Делаем навигационную панель при помощи Bootstrap
↗
6.
Правка стилей Bootstrap
↗
7.
Делаем слайдер/карусель с использованием Bootstrap
↗
8.
Создание модального окна при помощи Bootstrap
↗
9.
Доделываем модальное окно
↗
10.
Разбор сетки Bootstrap
↗
11.
Подключение и настройка Swiper
↗
12.
Продолжаем настраивать Swiper
↗
13.
Настройка автоматизации сборки
↗
14.
Рекомендации по доработке кнопки
↗
15.
Тестирование
↗