Профессиональная вёрстка

Создание адаптивной вёрстки на HTML 5 и CSS 3

Курс позволит освоить программирование с применением HTML5 и CSS3. В ходе практической разработки front-end части интернет-магазина студенты научатся применять код к макетам Bootstrap, работать с двумя препроцессорами: языками LESS и SASS. Освоят адаптивную вёрстку сайтов, принципы кроссбраузерности и валидности при разработке интерфейса веб-ресурса.

Чему Вы научитесь

  • Работать с HTML5 & CSS3;
  • Верстать адаптивные сайты;
  • Использовать принципы валидной кроссбраузерной вёрстки на практике;
  • Работать с препроцессорами LESS & SASS;
  • Применять Bootstrap;
  • Позиционировать элементы с использованием Flexbox.

Что Вы получите

Видеозаписи всех онлайн-занятий
Методички и практические задания
Общение с одногруппниками
Сертификат об окончании обучения

Средние оценки

4.8 / 5
Программа
4.9 / 5
Преподаватель

Преподаватели

  • 1
    Урок 1. Позиционирование элементов. Практическая вёрстка.
    Позиционирование элементов, расположение элементов на странице (позиционирование элементов по вертикали, по горизонтали).
  • 2
    Урок 2. Структура HTML5, знакомство с формами
    Новые семантические элементы HTML5. Практические примеры применения семантических тегов для создания структуры сайта. Улучшим традиционные формы. Проверка форм на ошибки заполнения.
  • 3
    Урок 3. Практическое применение Bootstrap
    Что такое bootstrap? Как подключить к любому макету? Как добавить первые элементы с использованием Bootstrap? Создание целой страницы сайта с использованием новых знаний.
  • 4
    Урок 4. Препроцессоры: применение на практике
    Знакомство с препроцессорами: для каких целей используются, где лучше применять, каково практическое значение. Рассмотрим синтаксис двух самых популярных препроцессоров: LESS, SASS; применим новые знания к нашему проекту.
  • 5
    Урок 5. Эффекты перехода и трансформации в CSS3
    Эффекты перехода; применение трансформации; поворот элементов при наведении на него; создание анимации средствами CSS3. Для чего нужна данная технология и где ее следует применять? Добавим трансформацию для некоторых элементов нашего сайта.
  • 6
    Урок 6. CSS3: медиа-запросы, адаптивная верстка.
    Познакомимся с синтаксисом медиа-запросов; создадим несколько простых запросов; узнаем, для каких проектов лучше их использовать; найдем практическое применение для нашего проекта.
  • 7
    Урок 7. Практическое применение адаптивной верстки
    Адаптивная верстка всего макета, добавление плавных переходов и перестроений сайта; позиционирование внутренних элементов с использованием Flexbox; добавление последних новшеств, которые изучили за курс; сдача верстки курсового проекта; итоги курса; завершение работы над проектом.
  • 8
    Урок 8. Grid layout, новые возможности CSS3
    Понятие и применение адаптивного дизайна. Основы синтаксиса и примеры.

После обучения мы предлагаем всем выпускникам оценить программу курса и преподавателя, а также при желании оставить отзыв.
Все отзывы и оценки мы публикуем без изменений.