CSS‑проекты — это практический курс, который помогает уверенно применять современные приемы CSS в реальных задачах. Если вы хотите улучшить навыки адаптивной верстки и научиться создавать профессиональные макеты без JavaScript, этот материал станет отличной тренировкой.
Что вас ждет в курсе
Курс построен на серии практических заданий, каждое из которых поднимает уровень сложности. Вы будете работать с готовыми ресурсами, целями и требованиями проектов, учиться принимать технические решения и понимать компромиссы в верстке.
Рост сложности и логичная последовательность
Начнете с базового стиля, который станет фундаментом для дальнейших макетов.
Перейдете к более сложным задачам, используя уже отработанные инструменты.
Завершите курс созданием пяти разных адаптивных макетов на общей HTML‑структуре с помощью медиа‑запросов.
Практика ключевых концепций CSS
По мере выполнения заданий вы изучите и закрепите такие техники:
CSS Flexbox и Grid
Позиционирование и управление overflow
Работа с фоновыми изображениями
Использование columns и CSS‑переменных
Медиа‑запросы и адаптивное проектирование
Чему вы научитесь
Этот курс поможет вам не только освоить инструменты CSS, но и научиться мыслить как разработчик интерфейсов.
Подход к проектированию
Разбираться в требованиях и выстраивать стратегию решения задачи.
Выбирать оптимальные CSS‑подходы и понимать их ограничения.
Создавать макеты, которые легко поддерживать и развивать.
Работа над собственными решениями
Вы будете писать собственный код, а затем сравнивать его с разбором и рекомендациями Джен Крамер. Такой формат упрощает понимание реальных рабочих процессов и помогает быстрее улучшать навыки.
Почему этот курс полезен
Курс идеально подходит для тех, кто хочет:
повысить уровень владения CSS через практику;
натренировать навык работы с адаптивными макетами;
подготовиться к реальным задачам фронтенд‑разработки;
пополнить портфолио интересными проектами.
Итог
Освоив этот курс, вы станете более уверенно подходить к проектированию макетов, поймете современные подходы к адаптивной верстке и сможете создавать чистые, гибкие и эффективные CSS‑решения.
Удален по просьбе правообладателя
Урок 1.00:08:13
Introduction
Урок 2.00:09:44
Style Guide Overview
Урок 3.00:17:50
Style Guide: Fonts & Font Sizes
Урок 4.00:13:56
Style Guide: Image & Links
Урок 5.00:09:29
Style Guide: Colors
Урок 6.00:06:15
Columns & Cover Overview
Урок 7.00:09:08
Column & Cover: Semantic HTML
Урок 8.00:18:27
Column & Cover: Mobile Layout
Урок 9.00:16:46
Column & Cover: Media Queries
Урок 10.00:14:07
Columns & Cover: Desktop Layout
Урок 11.00:12:56
Background & Overflow Project Overview
Урок 12.00:15:36
Background & Overflow: Mobile Layout
Урок 13.00:06:46
Background & Overflow: Scrollbar
Урок 14.00:10:19
Background & Overflow: Media Queries
Урок 15.00:04:23
Background & Overflow: Desktop Layout
Урок 16.00:05:43
Grid Project Overview
Урок 17.00:05:19
Grid: Mobile Layout
Урок 18.00:09:12
Grid: Tablet Layout
Урок 19.00:12:58
Grid: Desktop Layout
Урок 20.00:04:16
Team Project Overview
Урок 21.00:08:36
Team: Semantic HTML
Урок 22.00:07:35
Team: Mobile Layout
Урок 23.00:11:16
Team: Icons
Урок 24.00:07:49
Team: Tablet & Desktop Layouts
Урок 25.00:03:23
Cards Overview
Урок 26.00:06:31
Cards: Semantic HTML
Урок 27.00:09:00
Cards: Mobile Portrait Layout
Урок 28.00:14:47
Cards: Mobile Landscape Layout
Урок 29.00:07:52
Cards: Tablet Layout
Урок 30.00:11:20
Cards: Desktop Layout
Урок 31.00:02:39
Wrapping Up
Авторы - Jen Kramer, master.dev (ex FrontendMasters)
Джен Крамер преподает HTML и CSS для всех уровней более 20 лет. Ранее она была лектором в Гарвардском университете, совмещая это с работой фрилансера по веб-дизайну. Джен также является автором более 70 видео-курсов и трех книг. В настоящее время она занимает должность директора по дизайну обучения и технологиям в AnnieCannons - некоммерческой организации, которая обучает, подготавливает и помогает людям, пострадавшим от торговли людьми, начать у
Master.dev — это образовательная платформа для разработчиков, которая помогает совершенствовать инженерные навыки: от изучения языков программирования и веб-разработки до работы с базами данных, облачной инфраструктурой, DevOps и искусственным интеллектом. Ранее известная как Frontend Masters, платформа расширила фокус и теперь обучает разработчиков всему спектру современной разработки ПО.
10:00AM Challenge 1: Instant Coffee - Columns and Cover
11:00AM Challenge 2: Five Amazing Coffee Facts - Backgrounds and Overflow
12:00PM Lunch
12:45PM Challenge 3: Make Time for Coffee - Wacky Grids
1:45PM Challenge 4: Our Team - Quirky Positioning
2:45PM Challenge 5: Our Coffee - Outrageous Cards
4:00PM End