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