Практические CSS Layouts — это ваш шанс перейти от типовых макетов к выразительным, гибким и продуманным интерфейсам. В этом курсе вы шаг за шагом создадите три разных адаптивных сайта, от простого до продвинутого, одновременно укрепляя навыки дизайна и изучая современные возможности CSS.
Что вы узнаете на курсе
Курс выстроен так, чтобы вы прошли путь от уверенного владения базовыми инструментами до создания сложных макетов с интерактивностью, анимацией и повышенной доступностью.
1. Базовый адаптивный сайт
Вы начнёте с нуля и создадите простой, но хорошо структурированный сайт для вымышленной группы Magenta Lime.
Работа со шрифтами, цветами и единицами измерения.
Создание сетки и настройка адаптивности.
Практика семантической разметки и основ доступности.
2. Сайт средней сложности
В этой части вы используете наработки из базового проекта, но сделаете макет более выразительным и живым.
Повторное использование компонентов и стилей.
Добавление интерактивности с помощью CSS и JavaScript.
Усиление визуального стиля и проработка пользовательских сценариев.
3. Продвинутый сайт с анимациями
На финальном этапе вы решите сложную задачу по созданию полноценного динамического макета.
Использование современных CSS‑техник для сложных компоновок.
Добавление анимаций и плавных переходов.
Работа с многоуровневой адаптивностью и интерактивностью.
Преимущества курса
Вы не просто создадите три разных проекта — вы поймёте логику построения макетов любой сложности и научитесь уверенно комбинировать инструменты дизайна, верстки и доступности.
Ключевые навыки
Создание лёгких, средних и сложных веб‑макетов из единого набора материалов.
Умение усложнять дизайн, опираясь на уже существующую базу.
Использование современных CSS‑свойств и приёмов, включая те, которые редко встречаются в других курсах.
Грамотная, доступная и семантическая HTML‑разметка.
Для кого этот курс
Курс подойдёт веб‑разработчикам и дизайнерам, которые хотят:
перестать ограничиваться простыми макетами;
лучше понимать современные инструменты CSS;
научиться создавать выразительные и доступные сайты;
расширить портфолио интересными проектами.
Итог
Практические CSS Layouts — это возможность прокачать навыки верстки на реальных задачах и научиться создавать современные макеты, которые выглядят профессионально и работают безупречно.
Удален по просьбе правообладателя
Урок 1.00:08:23
Introduction
Урок 2.00:13:34
Styleguide Exercise: CSS Basics Setup
Урок 3.00:06:39
rem vs. em Units
Урок 4.00:14:14
Style Guide Type Sizes
Урок 5.00:11:28
Custom Font & Responsive Image
Урок 6.00:18:42
HTML Markup for a Simple Website
Урок 7.00:10:35
CSS for a Simple Responsive Layout
Урок 8.00:07:07
Mobile Tour Styles
Урок 9.00:09:54
Reviews & Images Styles
Урок 10.00:05:11
Margin Collapse
Урок 11.00:02:13
Basic CSS Footer Styles
Урок 12.00:07:39
CSS for Tablet Layout
Урок 13.00:08:01
Responsive Images with the Picture Element
Урок 14.00:16:26
Basic Tablet CSS Layout
Урок 15.00:10:20
CSS Styles for Desktop Layout
Урок 16.00:13:10
Tour Page Styles
Урок 17.00:06:52
Button Styling Practice
Урок 18.00:08:28
Button Interactive States
Урок 19.00:04:59
Tour Text Styles
Урок 20.00:11:17
Tour Layout Practice
Урок 21.00:04:28
Album & Tracklist Exercise
Урок 22.00:03:07
Album Solution
Урок 23.00:07:19
Album Styles
Урок 24.00:09:39
Tracklist Styles
Урок 25.00:08:43
Reviews & Images Mobile Styles
Урок 26.00:12:33
Reviews & Images Tablet Styles
Урок 27.00:09:04
Reviews & Images Tablet Styles Exercise
Урок 28.00:10:43
Reviews & Images Desktop Styles
Урок 29.00:06:06
Audio Player Overview
Урок 30.00:10:23
Audio Player Markup
Урок 31.00:14:40
Audio Player Base Styles
Урок 32.00:08:48
Play & Mute Button Styles
Урок 33.00:09:37
Range Slider Styles
Урок 34.00:03:11
Album Cover Styles
Урок 35.00:08:12
Hamburger Menu Exercise
Урок 36.00:04:56
Hamburger Menu Logo Exercise
Урок 37.00:19:23
Hamburger Menu Styles Exercise
Урок 38.00:15:12
Hamburger Menu Tablet & Mobile Styles
Урок 39.00:03:24
Medium Design Site Assembly Exercise
Урок 40.00:19:02
Medium Design Desktop Layout Exercise
Урок 41.00:04:41
Small Elements Exercise
Урок 42.00:05:41
Small Elements Solution
Урок 43.00:06:02
Review Layout Exercise
Урок 44.00:04:21
Album Boxes Exercise & Solution
Урок 45.00:18:31
Double Border Corners
Урок 46.00:06:08
Navigation Exercise & Solution
Урок 47.00:16:54
Social Icons
Урок 48.00:11:49
Tracklist CSS
Урок 49.00:05:20
Tracklist Show & Hide JavaScript
Урок 50.00:18:08
Tracklist Grid for Tablet & Desktop
Урок 51.00:13:03
CSS Transitions & Custom Table Scrollbar
Урок 52.00:09:31
Diamond Images Mobile Layout
Урок 53.00:13:57
Diamond Images Tablet & Desktop Layout
Урок 54.00:05:13
Advanced Layout Exercise
Урок 55.00:10:40
Advanced Desktop Layout
Урок 56.00:05:15
Wrapping Up
Авторы - Jen Kramer, master.dev (ex FrontendMasters)
Джен Крамер преподает HTML и CSS для всех уровней более 20 лет. Ранее она была лектором в Гарвардском университете, совмещая это с работой фрилансера по веб-дизайну. Джен также является автором более 70 видео-курсов и трех книг. В настоящее время она занимает должность директора по дизайну обучения и технологиям в AnnieCannons - некоммерческой организации, которая обучает, подготавливает и помогает людям, пострадавшим от торговли людьми, начать у
Master.dev — это образовательная платформа для разработчиков, которая помогает совершенствовать инженерные навыки: от изучения языков программирования и веб-разработки до работы с базами данных, облачной инфраструктурой, DevOps и искусственным интеллектом. Ранее известная как Frontend Masters, платформа расширила фокус и теперь обучает разработчиков всему спектру современной разработки ПО.