[Frontendblok] Современная вёрстка сайтов (Анна Блок)

Современная вёрстка сайтов

Научишься грамотно пользоваться CSS с новыми методами для создания адаптивных сайтов: clamp(), min(), max()

Кому подойдет интенсив:

Знает базу вёрстки сайтов
Если вы недавно изучили азы вёрстки и уже познакомились с темой создания адаптива, то вам точно понравится.

Хотел бы быть в курсе новинок
В последний год в CSS появилось много нового, поэтому лучше узнать об этом не только в теории, но и на практике

Хочет пополнить своё портфолио
Это возможность пополнить портфолио не только новой работой, но и показать, какие технологии были использованы.

Какие новинки CSS изучим на интенсиве:

Функция clamp()
Задаёт значение в диапазоне между указанными нижней и верхней границами.

Функция min()
Принимает одно или большее количество значений и возвращает наименьшее из них.

Функция max()
Принимает одно или большее количество значений и возвращает наибольшее из них.

Программа:

1. Знакомство с макетом

• Что нового появилось в Figma?
• Под какие экраны актуально готовить адаптив?
• Подготовка проекта к вёрстке

Дополнительно: Макет Figma

2. Верстаем шапку сайта

• Теория про clamp()
• Верстаем блок и делаем его адаптивным

Дополнительно: Конспект про clamp()

3. Верстаем 1-й блок

• Теория про min() и max()
• Верстаем блок и делаем его адаптивным

Дополнительно: Конспект про min() и max()

4. Верстаем 2-й блок

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

5. Верстаем 3-й блок

• Как сохранить пропорции крупного заголовка?
• Как сохранить пропорции кнопки?
• Верстаем блок и делаем его адаптивным

6. Верстаем подвал сайта

• Можно ли грид и флексбокс менять без подключения медиа-запроса?
• Верстаем блок и делаем его адаптивным

7. Дипломная работа

• Предоставляем новый макет
• Описываем методы решения задачи
• Выполняете дипломную работу

Дополнительно: Шпаргалка с решением задачи и проверка работы от Анны Блок

Во время интенсива вы сверстаете 2 макета, на основе которых потренируетесь в современных методах верстки сайтов.