Главная страницаКатегория cssCSS Layout Мастер-класс

CSS Layout Мастер-класс

Name: CSS Layout Мастер-класс
Price: 13 USD
Rating: 4.7 (53 reviews)

CSS Layout Masterclass

Nomad Coders

★4.7 (всего оценок - 53)

Продолжительность

6 ч 49 мин

Категория

CSS

Количество уроков

54 Видео

Дата добавления

5 мар. 2021 г., 20:38

Язык

Английский

Дата обновления

29 апр. 2026 г., 09:34

CSS Layout Мастер‑класс — это практическое погружение в современные инструменты вёрстки. Вы научитесь уверенно работать с Flexbox, CSS Grid и SCSS, создавая адаптивные и визуально впечатляющие интерфейсы. Курс идеально подходит тем, кто уже освоил основы HTML, CSS и JavaScript и хочет перейти на профессиональный уровень.

О чём этот мастер‑класс

В процессе обучения вы шаг за шагом разберёте ключевые техники современного CSS и воспроизведёте 11 полноценных макетов: мини‑кинопорталы, страницы электронной коммерции, портфолио и другие полезные шаблоны. Каждое занятие направлено на развитие уверенности в реальной вёрстке.

Практическая направленность

Вы будете не просто изучать свойства, а применять их в реальных задачах: адаптивность, сетки, выравнивание, создание компонентов и работа с визуальными паттернами.

Что понадобится

Для комфортного прохождения курса необходимы базовые знания HTML, CSS и JavaScript.

Flexbox: гибкая работа с элементами

Вы детально разберёте модель Flexbox и научитесь использовать её для построения адаптивных блоков и компонентных интерфейсов.

Основные концепции

Main Axis и Cross Axis
Column и Row направления
Выравнивание: align-items, justify-content, align-self
Управление порядком: order

Гибкость и адаптация

wrap, nowrap, reverse
flex-grow и flex-shrink
flex-basis
Создание сложных адаптивных макетов на Flexbox

CSS Grid: продвинутая сетка для интерфейсов

Grid позволит вам проектировать сложные макеты с точным контролем строк, столбцов и областей. Это мощнейший инструмент для современной вёрстки.

Работа с сетками

Определение областей сетки (grid-template-areas)
Настройка rows и columns
grid-template и фракции
place-items и place-content

Автоматизация сеточных систем

auto-columns и auto-rows
Функция minmax
auto-fill и auto-fit
Создание полностью адаптивных грид‑структур

SCSS: современный стиль написания CSS

SCSS делает работу с CSS более удобной, структурированной и мощной. Вы освоите фундаментальные возможности и будете писать код быстрее и чище.

Что вы изучите в SCSS

Переменные для управления цветами, шрифтами и размерами
Nesting для логичной структуры селекторов
Миксины для повторяющихся конструкций
Extends для оптимизации и сокращения кода

Результат прохождения курса

После мастер‑класса вы сможете уверенно создавать адаптивные, красивые и современные интерфейсы. Сетки, компоненты и сложные макеты перестанут быть проблемой, а работа с CSS станет быстрее и приятнее.

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:04:18
#0.2 Introduction
Урок 2. 00:01:44
#0.3 What are we using
Урок 3. 00:06:10
#1.0 Life Before Flexbox
Урок 4. 00:03:33
#1.1 First Rule of Flexbox
Урок 5. 00:09:26
#1.2 Main Axis and Cross Axis
Урок 6. 00:06:01
#1.3 Column and Row
Урок 7. 00:07:26
#1.4 align-self and order
Урок 8. 00:07:00
#1.5 wrap, nowrap, reverse, align-content
Урок 9. 00:08:02
#1.6 flex-grow, flex-shrink
Урок 10. 00:03:37
#1.7 flex-basis
Урок 11. 00:06:27
#1.8 Flexbox Froggy 1-13
Урок 12. 00:12:00
#1.9 Flexbox Froggy 14-24
Урок 13. 00:03:55
#2.1 Life Before Grid
Урок 14. 00:06:07
#2.2 CSS Grid Basic Concepts
Урок 15. 00:07:12
#2.3 Grid Template Areas
Урок 16. 00:07:33
#2.4 Rows and Columns
Урок 17. 00:06:39
#2.5 Shortcuts
Урок 18. 00:03:44
#2.6 Line Naming
Урок 19. 00:11:03
#2.7 Grid Template
Урок 20. 00:06:19
#2.8 Place Items
Урок 21. 00:06:34
#2.9 Place Content
Урок 22. 00:09:44
#2.10 Auto Columns and Rows
Урок 23. 00:02:58
#2.11 minmax
Урок 24. 00:05:23
#2.12 auto-fit auto-fill
Урок 25. 00:06:24
#2.13 min-content max-content
Урок 26. 00:08:40
#2.14 Grid Garden part One
Урок 27. 00:10:23
#2.15 Grid Garden part Two
Урок 28. 00:04:37
#3.0 CSS Preprocessors and Set Up
Урок 29. 00:10:39
#3.1 Variables and Nesting
Урок 30. 00:08:20
#3.2 Mixins
Урок 31. 00:05:22
#3.3 Extends
Урок 32. 00:13:00
#3.4 Awesome Mixins and Conclusions
Урок 33. 00:02:31
#4.0 Introduction
Урок 34. 00:17:37
#4.1 Best Horror Scenes Coding
Урок 35. 00:05:30
#4.2 Best Horror Scenes Comment
Урок 36. 00:18:58
#4.3 Paint Box Coding
Урок 37. 00:04:53
#4.4 Paint Box Comment
Урок 38. 00:11:17
#4.5 10x19 Coding
Урок 39. 00:03:55
#4.6 10x19 Comment
Урок 40. 00:13:44
#4.7 Zoo Coding
Урок 41. 00:02:49
#4.8 Zoo Commentary
Урок 42. 00:17:50
#4.9 Schwartz Coding
Урок 43. 00:05:19
#4.10 Schwartz Commentary
Урок 44. 00:15:18
#4.11 Tolv Coding
Урок 45. 00:04:26
#4.12 Tolv Commentary
Урок 46. 00:06:21
#4.13 Rodic Davidson Coding
Урок 47. 00:01:58
#4.14 Rodic Davidson Comment
Урок 48. 00:15:16
#4.15 Beige Coding
Урок 49. 00:02:58
#4.16 Beige Commentary
Урок 50. 00:09:11
#4.17 Donica Coding
Урок 51. 00:03:46
#4.18 Donica Commentary
Урок 52. 00:07:14
#4.19 Canal Street Commentary
Урок 53. 00:14:11
#4.20 Won Hundred Coding
Урок 54. 00:04:19
#4.21 Won Hundred Commentary

Автор - Nomad Coders

Nomad Coders

Мы создаем удивительные продукты, путешествуем по миру, и делаем потрясающие офлайн-события.

+130

Комментарии

Anonymous
10 авг. 2024 г., 00:42
Could you please update this course? Thanks
Bekar
1 мая 2024 г., 20:45
Could you please update the course.
Babar
29 дек. 2023 г., 19:57
Please update
Nightmare
9 сент. 2023 г., 15:26
update pls, have new features in 2023
Babar
11 авг. 2023 г., 07:41
update please
donkeyhot.spam
29 апр. 2021 г., 21:21
Это вообще мальчик или девочка? И откуда такой УЖАСНЫЙ индусский акцент, на рожу, хоть пол и не ясен, это как будто не индусских кровей существо...
javier donkeyhot.spam
20 мая 2021 г., 23:19
korean