Главная страницаКатегория cssАдаптивный дизайн для начинающих

Адаптивный дизайн для начинающих

Name: Адаптивный дизайн для начинающих
Price: 12.5 USD
Rating: 5 (10 reviews)

Responsive Design for Beginners

Jess Chan

★5 (всего оценок - 10)

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

30 ч 0 мин

Категория

CSS

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

140 Видео

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

15 сент. 2025 г., 15:31

Язык

Английский

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

30 апр. 2026 г., 00:11

«Адаптивный дизайн для начинающих» — это практико-ориентированный курс, который помогает новичкам уверенно работать с HTML, CSS и адаптивной версткой.

О чем этот курс

Если вы уже знаете основы HTML и CSS, но сталкиваетесь с трудностями при создании полноценного сайта с нуля, этот курс будет идеальным следующим шагом. Он поможет понять логику профессиональной разработки, избавиться от хаоса в стилях и почувствовать уверенность при работе над реальными проектами.

Кому подойдет курс

Курс создан специально для новичков и тех, кто:

знает базовый синтаксис HTML и CSS, но не понимает, как собрать проект полностью;
часто застревает на непонятных багаx и расходует много времени на поиск решений;
хочет перенести макет из Figma в полноценный, адаптивный сайт;
мечтает системно изучить CSS, а не собирать знания по кусочкам.

Что вы научитесь делать

После прохождения курса вы сможете:

структурировать проект с нуля и уверенно работать в VS Code;
верстать адаптивные сайты по макетам Figma;
использовать SCSS: переменные, миксины, партиалы, модули;
отличать, когда использовать flexbox, а когда grid;
организовывать стили так, что в вашем коде легко разберётся даже другой разработчик;
понимать поведение CSS, включая каскад, наследование и особенности рендеринга.

Программа курса

BASIC (22 часа)

Идеально для начинающих: много практики и основа правильного мышления в CSS.

Что входит

17 часов фундаментального материала: настройка среды, GitHub, полный вводный модуль по Sass.
5 часов практики: создание первого адаптивного сайта.

Ключевые темы BASIC

Семантическая разметка HTML
BEM, структура SCSS, переменные, миксины, утилитарные классы
Каскад, специфичность, наследование
Блочная модель и поток документа
Flexbox и CSS Grid
Адаптивные единицы измерения: em, rem, vw, %
Типографика с clamp()
CSS‑переменные
Адаптивные изображения и работа с SVG
Анимации, эффекты наведения и переходы
linear-gradient(), calc() и другие полезные функции

PREMIUM (4 часа)

Более продвинутые техники для построения сложных адаптивных секций.

Темы PREMIUM

Анимированные эффекты при наведении
Работа с grid areas
Создание и стилизация SVG‑форм
Абсолютное позиционирование
Макеты с использованием nth-child
Псевдоэлементы ::before и ::after
Стилизация форм и полей ввода

ULTIMATE (6 часов)

Финальный этап — реальные техники из профессиональной разработки.

Темы ULTIMATE

Создание бургер-меню с анимацией и доступностью
Работа с z-index и контекстами наложения
Реализация цветовых тем на CSS‑переменных
Grid‑сетки с auto-fit и minmax()
Перекрывающиеся элементы
object-fit и object-position
Эффекты mix-blend-mode
Основы Node.js, npm, package.json
Компиляция SCSS с Vite

Результат

Пройдя все три уровня, вы создадите полностью адаптивный сайт по макету Figma, освоите современные инструменты фронтенд-разработки и почувствуете уверенность при работе над проектами любой сложности.

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

Урок 1. 00:03:43
Welcome! How to use this course
Урок 2. 00:08:22
Setting up VS Code
Урок 3. 00:21:34
Intro to Git and GitHub
Урок 4. 00:08:51
Setting up project files
Урок 5. 00:04:37
What is Sass?
Урок 6. 00:11:26
VS Code Extensions
Урок 7. 00:13:24
Sass partials
Урок 8. 00:17:11
Sass variables and CSS custom properties
Урок 9. 00:06:16
Responsive design
Урок 10. 00:07:10
Sass and BEM
Урок 11. 00:21:04
Building the responsive 2-column layout
Урок 12. 00:18:00
Setting widths
Урок 13. 00:12:22
Sass mixins
Урок 14. 00:10:00
Using max-width media queries
Урок 15. 00:08:09
Order of media queries
Урок 16. 00:11:34
Responsive typography
Урок 17. 00:15:19
Why you shouldn't use pixels (usually)
Урок 18. 00:10:10
Sass functions
Урок 19. 00:20:07
Using the rem() function
Урок 20. 00:07:10
Why I use em units in media queries
Урок 21. 00:04:43
Nesting and BEM
Урок 22. 00:08:32
Default browser styles
Урок 23. 00:11:10
BEM modifiers and Sass placeholders
Урок 24. 00:09:17
Helper and utility classes
Урок 25. 00:15:20
Figma design
Урок 26. 00:03:47
GitHub commits
Урок 27. 00:05:37
Adding the favicon
Урок 28. 00:03:32
My VS Code setup for screencasting
Урок 29. 00:04:49
Study the design
Урок 30. 00:11:45
Colors
Урок 31. 00:12:45
Wrapper styles
Урок 32. 00:06:36
H-tags
Урок 33. 00:15:02
Clamp() function and responsive typography
Урок 34. 00:13:26
Responsive typography and media queries
Урок 35. 00:19:01
Semantic HTML tags
Урок 36. 00:04:43
Design and exporting logo
Урок 37. 00:09:15
Creating a skip link
Урок 38. 00:20:03
Writing the HTML markup
Урок 39. 00:21:25
Styling the navigation links
Урок 40. 00:21:06
Layout with flexbox
Урок 41. 00:06:28
Adding gap with flexbox
Урок 42. 00:19:16
Spacing and CSS flow layout
Урок 43. 00:07:52
Hover states
Урок 44. 00:13:00
Mobile styles
Урок 45. 00:16:46
Prep and HTML markup
Урок 46. 00:14:48
Setting up styles
Урок 47. 00:16:52
Unicorn image
Урок 48. 00:12:14
Header styles
Урок 49. 00:21:18
Paragraph styles
Урок 50. 00:13:48
Unicorn image spacing
Урок 51. 00:11:31
Button styles
Урок 52. 00:15:16
Button sizing
Урок 53. 00:12:50
Button spacing
Урок 54. 00:15:56
Button hover states
Урок 55. 00:17:22
Flexbox mobile layout
Урок 56. 00:15:40
Flexbox desktop layout
Урок 57. 00:18:28
Sizing the flex children
Урок 58. 00:10:48
Flex-grow and flex-basis
Урок 59. 00:08:54
Optional: Grid mobile layout
Урок 60. 00:12:32
Optional: Grid desktop layout
Урок 61. 00:29:10
Double-checking the styles
Урок 62. 00:09:48
HTML markup
Урок 63. 00:17:09
Adding the styles
Урок 64. 00:32:56
Flexbox responsive layout
Урок 65. 00:14:33
Optional: Flexbox intrinsic layout
Урок 66. 00:09:32
HTML markup
Урок 67. 00:13:05
Adding styles
Урок 68. 00:12:15
Paragraph and image styles
Урок 69. 00:10:40
Images & Device Pixel Ratio
Урок 70. 00:20:32
HTML markup
Урок 71. 00:07:50
Adding styles
Урок 72. 00:09:49
Quotation mark styles
Урок 73. 00:12:57
Quote & author styles
Урок 74. 00:23:17
Flexbox layout
Урок 75. 00:20:02
Linear-gradient background
Урок 76. 00:09:38
Prep and HTML markup
Урок 77. 00:05:55
Sharing styles
Урок 78. 00:09:44
Sass @extend at-rule
Урок 79. 00:15:50
Sass placeholders
Урок 80. 00:10:35
Sass mixins
Урок 81. 00:06:17
Helper/utility classes
Урок 82. 00:05:57
Button styles
Урок 83. 00:08:10
Checking the styles
Урок 84. 00:27:25
Prep and HTML markup
Урок 85. 00:18:41
Adding basic styles
Урок 86. 00:10:03
Hover state styles
Урок 87. 00:08:02
Footer column markup
Урок 88. 00:10:34
SVG styles
Урок 89. 00:08:20
Sizing and aligning the SVG
Урок 90. 00:27:12
Responsive layout with CSS grid
Урок 91. 00:05:42
Deploying the site with Netlify
Урок 92. 00:00:27
Congratulations! Now what?
Урок 93. 00:01:19
Getting started
Урок 94. 00:10:06
Setup and HTML markup
Урок 95. 00:17:32
Writing styles
Урок 96. 00:04:43
Prep and setup
Урок 97. 00:16:57
Wrapper styles
Урок 98. 00:19:49
Content styles
Урок 99. 00:13:29
Prep and markup
Урок 100. 00:20:55
Basic styles
Урок 101. 00:13:22
Text links
Урок 102. 00:19:00
Layout styles
Урок 103. 00:12:58
Alternating styles
Урок 104. 00:06:23
Prep and markup
Урок 105. 00:12:17
First quotation mark
Урок 106. 00:09:00
Second quotation mark
Урок 107. 00:09:28
Troubleshooting
Урок 108. 00:13:05
Prep and markup
Урок 109. 00:17:59
Form styles
Урок 110. 00:11:15
Mobile grid layout
Урок 111. 00:14:02
Aligning grid children
Урок 112. 00:14:55
Tablet-Desktop grid layout
Урок 113. 00:02:42
Deployment & Congrats
Урок 114. 00:01:36
Introduction
Урок 115. 00:07:15
Prep and markup
Урок 116. 00:24:57
Menu styles
Урок 117. 00:12:57
Menu shadow
Урок 118. 00:15:36
ARIA and animation
Урок 119. 00:13:24
Overlay
Урок 120. 00:15:08
JavaScript
Урок 121. 00:18:05
Hiding elements accessibly
Урок 122. 00:09:23
Switching viewport widths
Урок 123. 00:11:19
Animation issues
Урок 124. 00:10:19
Stacking and z-index
Урок 125. 00:10:51
Locking the scroll
Урок 126. 00:15:46
More optimizations
Урок 127. 00:09:05
Setup
Урок 128. 00:08:41
Dark theme
Урок 129. 00:27:03
Setup and markup
Урок 130. 00:13:27
Basic styles
Урок 131. 00:20:48
Text block styles
Урок 132. 00:15:41
Font sizing
Урок 133. 00:19:52
Adding cards
Урок 134. 00:13:24
Layout styles
Урок 135. 00:06:38
Gradient variations
Урок 136. 00:20:36
Sass for-loop
Урок 137. 00:18:28
Installing Vite
Урок 138. 00:18:35
Loading files
Урок 139. 00:06:50
Deployment
Урок 140. 00:01:42
Congratulations!

Basic course

https://github.com/thecodercoder/rdb-checkpoints
https://github.com/thecodercoder/rdb-transcripts

Premium course

https://github.com/thecodercoder/rdb-checkpoints
https://github.com/thecodercoder/rdb-transcripts

Ultimate course

https://github.com/thecodercoder/rdb-checkpoints
https://github.com/thecodercoder/rdb-transcripts

Автор - Jess Chan

Jess Chan

Привет! Я - Джесс Чан. Я создаю обучающие материалы на YouTube для начинающих веб-разработчиков. Раньше я 8 лет работала веб-разработчиком в рекламных и маркетинговых компаниях.Я самоучка - у меня нет диплома по компьютерным наукам и я не проходила буткемпы по программированию. Начало пути было невероятно трудным: я часто чувствовала себя потерянной, часами искала решения в Google и пробовала десятки способов исправить ошибки.Со временем я лучше

Комментарии

dyowee
12 февр. 2026 г., 00:54
Still no possibility for this to be updated? :(
pasopil136
29 дек. 2025 г., 04:54
Please update
Bekar
5 дек. 2025 г., 11:49
Could you please update the course. Thanks.
Anonymous
30 нояб. 2025 г., 18:31
The course was updated a few days, please upload the latest release. Thanks
dyowee
24 нояб. 2025 г., 12:35
Please update. Thanks!
pasopil136
16 сент. 2025 г., 06:59
Nice & Good
Stock&Code
15 сент. 2025 г., 20:23
Thanks