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

Урок 1. Позиционирование элементов. Практическая верстка.

• Позиционирование элементов, расположение элементов на странице (позиционирование элементов по вертикали, по горизонтали).

Урок 2. Структура HTML5, знакомство с формами.

• Новые семантические элементы HTML5.

• Практические примеры применения семантических тегов для создания структуры сайта.

• Улучшим традиционные формы.

• Проверка форм на ошибки заполнения.

Урок 3. Практическое применение Bootstrap.

• Что такое bootstrap?

• Как подключить к любому макету?

• Как добавить первые элементы с использованием Bootstrap?

• Создание целой страницы сайта с использованием новых знаний.

Урок 4. Препроцессоры: применение на практике.

• Знакомство с препроцессорами: для каких целей используются, где лучше применять, каково практическое значение.

• Рассмотрим синтаксис двух самых популярных препроцессоров: LESS, SASS; применим новые знания к нашему проекту.

Урок 5. Эффекты перехода и трансформации в CSS3.

• Эффекты перехода; применение трансформации; поворот элементов при наведении на него; создание анимации средствами CSS3.

• Для чего нужна данная технология и где ее следует применять?

• Добавим трансформацию для некоторых элементов нашего сайта.

Урок 6. CSS3: медиа-запросы, адаптивная верстка.

• Познакомимся с синтаксисом медиа-запросов; создадим несколько простых запросов; узнаем, для каких проектов лучше их использовать; найдем практическое применение для нашего проекта.

Урок 7. Практическое применение адаптивной верстки.

• Адаптивная верстка всего макета, добавление плавных переходов и перестроений сайта; позиционирование внутренних элементов с использованием Flexbox; добавление последних новшеств, которые изучили за курс; сдача верстки курсового проекта; итоги курса; завершение работы над проектом.

Урок 8. Grid layout, новые возможности CSS3.

• Понятие и применение адаптивного дизайна.

• Основы синтаксиса и примеры.