Программа

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

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

Чему научат на курсе

—

Работать с HTML5 & CSS3

—

Верстать адаптивные сайты

—

Использовать принципы валидной кроссбраузерной верстки на практике

—

Работать с препроцессорами LESS & SASS

—

Применять Bootstrap

—

Позиционировать элементы с использованием Flexbox

О школе

4.4

60 отзывов

109 курсов

GeekBrains

История проекта GeekBrains начинается в 2010 году, когда его основатели заметили, что образовательным программам в такой динамичной сфере, как IT, часто не хватает актуальной теории и практических предметов. Сначала появилась «Школа программирования», которая со временем выросла в платформу с онлайн-курсами по различным IT и digital-профессиям Гик Брейнс. В 2016 онлайн-школа GeekBrains стала частью корпорации VK (ранее Mail.ru Group).

Команда проекта верит, что за онлайн-образованием — будущее, и создаёт образовательную среду, в которой с помощью современных технологий студент получает профессию. Сейчас в школе готовят специалистов в сферах IT, маркетинга, менеджмента и дизайна.