Адаптивная вёрстка на HTML5 и CSS3. На примере создания Landing page. Видеокурс (2016) PCRec

Вводная часть

0. Вводное видео
О курсе и как его использовать

1. HTML5. Семантическая разметка
О новых тегах: header, nav, section, aside, article и т.д.

2. HTML5. Медиа объекты
Вставка видео и аудио без дополнительных плееров + атрибуты.

3. HTML5. Формы
Работа с формами в HTML5 + новые типы полей.

4. HTML5. Другие возможности
Примеры реализации других возможностей на HTML5

5. CSS3. Новые свойства в CSS3
Линейные градиенты, раудисы, прозрачность, тени, трансформация, анимация.
Практическая часть

1. Макет и PSD исходник
Знакомство с PSD исходником и набросок будущего макета

2. Вёрстка шапки
Расчёт адпаптивных размеров и вёрстка шапки + формула расчёта EM и %

3. Вёрстка блока "Услуги"
Планирование этапа, подготовка изображений и вёрстка блока.

4. Вёрстка блока "Портфолио"
Планирование, двойные классы и вёрстка.

5. Блок "Портфолио": hover эффекты
Создание hover эффекта при наведении на элементы на CSS3.

6. Вёрстка блока "О нас"
Вёрстка хитрого блока с позиционированием и псевдо-классами.

7. Вёрстка блока "Наша команда"
Подготовка и вёрстка блока + создание CSS спрайтов

8. Вёрстка блока "Партнёры"
Вёрстка блока и вставка карусели изображений на JQuery

9. Вставка карты Яндекса
Вставка интерактивной карты Яндекса во всю ширину.

10. Вёрстка формы обратной связи
Планирование этапа, создание формы с новыми типами полей.

11. Блок с копирайтами
Вёрстка блока копирайтов, расширение CSS спрайта, вставка даты на PHP

12. Улучшение и доработка
Добавление функции плавной прокрутки к блокам и кнопки "Наверх" (3 варианта)

13. Улучшение и доработка ч.2
Валидация полей в форме обратной связи (через JS) + защита от СПАМ ботов

14. Адаптация под мобильные устройства
Адаптация под экраны планшетов и мобильников + работа с FireBug

15. Адаптация под мобильные устройства ч.2
Вторая часть видео по адаптации.

16. PHP обработчик формы
Создание скрипта-обработчика на PHP, для формы обратной связи.

17. Умная форма обратной связи
Подключение скрипта для формы обратной связи с передачей UTM меток и записью в CSV файл.

18. Перенос на хостинг и валидация
Перенос лендинга на хостинг по FTP, проверка, ускорение и установка цели в Яндекс.Метрике.