Современные сайты и веб-разработку уже невозможно представить без
HTML5 и CSS3, как ни крути. Любой проект, любой заказчик требуют валидной, кроссбраузерной и современной вёрстки на HTML5 и СSS3, и обязятельно адаптированную под мобильные устройства.
Дополнительная информация о видеокурсе:Если вы будете уметь верстать на HTML5 и CSS3 и адаптировать проект под мобильные устройства, то можно смело поднимать стоимость часа своей работы. Ну а если вы создаёте сайт для себя, то эти знания помогут сделать его лучше, функциональнее и удобнее. Как правило это оборачивается повышением позиций, увеличением посещаемости и соответственно дохода.
Вводная часть
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, проверка, ускорение и установка цели в Яндекс.Метрике.
Автор: Олег Касьянов
Название: Адаптивная вёрстка на HTML5 и CSS3 (На примере создания Landing page)
Год выхода: 2016
Жанр: Видеокурс обучающий
Язык: Русский
Выпущено: Россия
Продолжительность: 05:37:40
Качество видео: PCRec
Формат: MP4 (+ доп. материалы)
Видео: AVC, 1280x720, ~741 Kbps, 30.0 fps
Аудио: AAC, 126 Kbps, 2 ch, 44.1 KHz
Размер файла: 2.29 Gb
Скачать Адаптивная вёрстка на HTML5 и CSS3. На примере создания Landing page. Видеокурс (2016) PCRec
