Длительность курса 5 недель. Один раз в неделю общий вебинар с преподавателем для ответов на все вопросы, получения обратной связи по домашним заданиям и возникшим трудностям. Постоянная поддержка преподавателя курса и проверка домашних заданий. Личное общение с преподавателем курса.

За время курса мы изучим и научимся пользоваться средствами современной среды разработки, изучим html, css, препроцессоры less и sass, изучим сетку фреймворка bootstrap, научимся подключать сторонние js и css библиотеки и сверстаем 2 макета. А так же у вас есть возможность выбрать третий макет для верстки самостоятельно. Будет рассмотрена автоматизация процессов разработки через gulp.

Программа курса разбита на 5 недель:

1. Подготовка рабочей среды. Текстовые редакторы, нужные плагины, работа с ними, сопутствующие программы.
2. Изучение HTML5. Неделя посвящена полностью изучению языка гипертекстовой разметки.
3. Изучение CSS3. Неделя посвящена полностью изучению каскадных таблиц стилей, а также препроцессоров LESS и SASS.
4. Практика. Верстка первого шаблона . Верстка адаптивная, но без применения сеток. После верстки первого макета - изучение сетки Bootstrap.
5. Практика. Верстка второго шаблона . Верстка адаптивная с применением сетки Bootstrap. Верстка собственного шаблона.

Видеоуроки первой недели:

1. Текстовые редакторы. brackets sublimetext3 atom. Установка плагинов для фронтенда.
2. Вводный урок. Обсуждаем браузеры, технологии, как все работает, как выгдялит сайт, где он хранится и т.д.
3. Стартовый шаблон html документа. doctype head body title
4. Установка node.js npm browser-sync. Настройка browser-sync
5. Теги и браузер. Что такое теги и как браузер с ними работает.
6. Github. Что это и зачем нужно. Регистрация на github и использование хостинга github pages
7. Программы для скриншотов.

Видеоуроки второй недели:

1. Текст. Изучение тегов для работы с текстом.
2. Комментарии. Как оставлять комментарии в коде.
3. Списки. Изучение нумерованых и ненумерованных списков, множественная вложенность.
4. Гиперссылки. Работа с ссылками.
5. Изображения. Работа с изображениями в html.
6. Таблицы. Построение таблиц в html.
7. Формы. Изучение форм и полей для ввода в html5.
8. Блочные и строчные элементы.
9. Семантическая верстка. Медиаконтент (аудио, видео).
10. Практика верстки html5.

Видеоуроки третьей недели:

1. Вводный css.
2. Селекторы
3. Наследование, порядок применения, вес.
4. Позиционирование.
5. Практика. Сетка из 4-х блоков.
6. Блочная модель.
7. Вендорные префиксы. Автопрефиксер.
8. border-radius
9. Единицы измерения.
10. Сниппеты sublimetext3
11. Препроцессоры less и sass. Программы, работа с less.
12. Текст. Селекторы для работы с текстом.
13. Блочные и строчные.
14. Сетки.
15. Три варианта верстки.
16. Сокращения emmet.

Видеоуроки четвертой недели:

1. Структура и графика. Создание файла html макета, вырезание графики из макета сайта .psd
2. Шапка сайта. Верстаем шапку сайта (логотип, меню, дескриптор).
3. Работа со шрифтами. Подключение и использование.
4. Меню и анимация.
5. Контент и футер.
6. Изображения и фон.
7. z-index. Позиционирование по глубине.
8. Медиазапросы. Адаптивная верстка.
9. reset.css normalize.css
10. Bootstrap. Когда и как лучше использовать. Способы подключения. Сетка Bootstrap.

Видеоуроки пятой недели

1. Структура и графика. Создание файла html макета, вырезание графики из макета, подключение шрифтов.
2. Шапка сайта. Фон, лого, корзина, меню, заголовок.
3. Верстаем кнопки, делаем второй экран. Фисированный фон.
4. Делаем третий экран. Цепляем фиксированное изображение.
5. Четвертый экран. Карточки товара.
6. Доделываем карточки товара. Кнопка купить.
7. Пятый экран. Форма.
8. Верстаем подвал. Иконочный шрифт font awesome.
9. Анимация меню и кнопок.
10. Добавляем адаптивность.
11. Анимация animate.css и wow.js
12. Создаем эффект параллакса фона. Плагин parallax.js