Главная страницаКатегория cssЗа пределами CSS

За пределами CSS

Name: За пределами CSS
Price: 12.5 USD
Rating: 4.8 (30 reviews)

Beyond CSS

kevin powell

★4.8 (всего оценок - 30)

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

21 ч 8 мин

Категория

CSS

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

247 Видео

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

19 мар. 2024 г., 16:09

Язык

Английский

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

29 апр. 2026 г., 19:59

“За пределами CSS” — это продвинутый курс, который помогает разработчикам выйти за рамки базовых свойств и научиться эффективно организовывать, поддерживать и масштабировать стили в реальных проектах. В этой статье вы узнаете, как современные возможности CSS, а также инструменты вроде Sass и PostCSS позволяют упростить работу над крупными и командными проектами.

Почему масштабируемый CSS — это вызов

Начинать писать CSS обычно легко, но сложность растёт вместе с проектом. Чем больше компонентов, страниц и участников команды, тем труднее поддерживать чистоту и последовательность в стилях.

Основные проблемы роста проектов

Увеличение количества стилей приводит к хаосу в структуре файлов.
Командная работа усложняется из-за разных подходов к написанию CSS.
Конфликты стилей становятся регулярной проблемой.
Сложно поддерживать единое соглашение об именовании.

Почему традиционных материалов недостаточно

Учебники и видео обычно объясняют фундаментальные концепции — flexbox, grid, позиционирование — но не охватывают тему разработки на уровне больших приложений. Это оставляет разработчиков без понимания того, как структурировать стили, когда проект растёт.

Инструменты и подходы, которые меняют правила игры

CSS развивается — новые возможности языка и современные инструменты даются нам для решения именно тех проблем, с которыми сталкиваются команды и крупные проекты.

Современные возможности CSS

Пользовательские свойства (CSS Custom Properties) — позволяют стандартизировать значения и гибко управлять стилями.
Каскадные слои (Cascade Layers) — помогают избегать конфликтов приоритетов и структурировать код.

Инструменты индустриального уровня

Sass — добавляет переменные, миксины, вложенность и модули.
PostCSS — расширяет возможности CSS через плагины.
Прочие инструменты, которые ускоряют разработку и повышают стабильность проекта.

Чему вы научитесь на курсе

Курс помогает перейти от уверенного владения основами CSS к профессиональной работе над масштабируемыми проектами. Вы узнаете, как применять современные практики и инструменты, чтобы уменьшать объём CSS и повышать качество кода.

Ключевые навыки

Организация масштабируемой архитектуры CSS.
Работа с Sass и PostCSS в современных проектных структурах.
Создание систем токенов и модульных стилей.
Построение командных процессов и единых соглашений по стилям.

Для кого подходит этот курс

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

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

Урок 1. 00:02:02
1. Introduction to the course
Урок 2. 00:04:22
2.1.1. Installing Sass
Урок 3. 00:04:40
2.1.2. Making sure Sass is working
Урок 4. 00:03:12
2.1.3. Watching files
Урок 5. 00:02:16
2.1.4. What are source maps
Урок 6. 00:01:31
2.2.1. The parent selector
Урок 7. 00:02:19
2.2.2. Avoiding specificity issues with nesting
Урок 8. 00:05:02
2.2.3. Using a trailing
Урок 9. 00:08:07
2.3.1. Variable challenge
Урок 10. 00:04:30
2.3.2. Variables vs. Custom Properties
Урок 11. 00:03:50
2.4.1. Color functions and custom properties
Урок 12. 00:11:07
2.5.1. Before we get started
Урок 13. 00:04:26
2.5.2. Setting things uo
Урок 14. 00:03:57
2.5.3. The HTML
Урок 15. 00:07:35
2.5.4. Pricing Table - Reset and Base Styles
Урок 16. 00:15:28
2.5.5. Styling the page
Урок 17. 00:02:02
2.5.6. Creating the inverted color scheme (a challenge)
Урок 18. 00:02:38
2.5.7. Creating the button hover and focus states (a challenge)
Урок 19. 00:03:02
2.6.1. Why extends can be dangerous
Урок 20. 00:02:14
2.7.1. Mixins vs. Extendsb
Урок 21. 00:03:03
2.7.2. Maxin arguments
Урок 22. 00:01:59
2.7.3. Optional arguments
Урок 23. 00:04:33
2.7.4. Challenge
Урок 24. 00:02:12
2.8.1. Using variables in different places
Урок 25. 00:02:42
2.8.2.1. Two challenges
Урок 26. 00:04:47
2.8.2.2. Two challenges
Урок 27. 00:08:01
2.8.3. Nested children and &
Урок 28. 00:15:34
2.9.1. The HTML and basic page structure
Урок 29. 00:02:39
2.9.2. Getting info from Figma
Урок 30. 00:03:53
2.9.3.1. Even columns
Урок 31. 00:06:27
2.9.3.2. Utility classes
Урок 32. 00:07:44
2.9.4. Styling the product card
Урок 33. 00:08:17
2.9.5. Positioning the button
Урок 34. 00:06:24
2.9.6. The category card
Урок 35. 00:04:24
3.1. The Sass color module
Урок 36. 00:01:50
3.2.2.1. @for. In action
Урок 37. 00:02:48
3.2.2.2. @for. In action. Column-count
Урок 38. 00:01:26
3.2.2.3. @for. In action. Column-count
Урок 39. 00:06:15
3.2.2.4. @for. In action. Grid based system
Урок 40. 00:04:15
3.2.3.1. @for. A challenge
Урок 41. 00:00:47
3.2.4.1. @EACH In action
Урок 42. 00:02:05
3.2.5.1. @each. With nested lists
Урок 43. 00:02:48
3.3.1. @if, @else, @if else, and if() Adding logic to our stylesheets
Урок 44. 00:02:06
3.3.2. @if In action
Урок 45. 00:02:06
3.3.3. @if @else A challenge
Урок 46. 00:02:15
3.3.4. @if Refactoring our ui-component mixin
Урок 47. 00:02:01
3.4.1. Functions Creating your own functions
Урок 48. 00:02:38
3.4.2. Functions In action
Урок 49. 00:04:00
3.4.3.1. Functions Warnings, errors, and debugging
Урок 50. 00:03:23
3.4.3.2. Functions Warnings, errors, and debugging
Урок 51. 00:01:51
3.5.1.1. Arbitrary arguments
Урок 52. 00:02:37
3.5.1.2. Arbitrary arguments
Урок 53. 00:01:39
3.5.2. @content
Урок 54. 00:03:33
3.6.1.1. A fancy list
Урок 55. 00:02:59
3.6.1.2. A fancy list
Урок 56. 00:03:49
3.6.2. An easier way to access them
Урок 57. 00:01:51
3.6.3.1. Nested maps
Урок 58. 00:02:37
3.6.3.2. Nested maps
Урок 59. 00:04:40
3.6.4. Accessing map values with loops
Урок 60. 00:02:43
3.6.5. map.has-key() and errors
Урок 61. 00:02:14
4.1.1.1. Building our own Sass modules
Урок 62. 00:02:46
4.1.1.2. Building our own Sass modules
Урок 63. 00:01:41
4.1.2.1. Using, and name-spacing, our partial files
Урок 64. 00:02:48
4.1.4.1. @forward
Урок 65. 00:02:01
4.1.4.2. @forward
Урок 66. 00:01:49
4.1.6.1. Why bother with partial files
Урок 67. 00:03:53
4.2.2.1. Getting started with Vite
Урок 68. 00:03:40
4.2.2.2. Getting started with Vite
Урок 69. 00:01:57
4.2.2.3. Getting started with Vite
Урок 70. 00:02:39
4.2.3.1. Setting up Vite for multiple pages
Урок 71. 00:03:02
4.2.3.2. Setting up Vite for multiple pages
Урок 72. 00:07:11
4.2.3.3. Setting up Vite for multiple pages
Урок 73. 00:08:50
4.2.4. Getting our projects online
Урок 74. 00:16:22
4.3.2. A good starting point
Урок 75. 00:02:52
4.3.3. Creating a template
Урок 76. 00:02:27
4.4.1. Creating a new project from the template
Урок 77. 00:06:14
4.4.2.1. Refactoring the pricing table project
Урок 78. 00:01:16
4.4.2.2. Refactoring the pricing table project
Урок 79. 00:02:04
4.4.2.3. Refactoring the pricing table project
Урок 80. 00:01:30
4.4.2.4. Refactoring the pricing table project
Урок 81. 00:21:06
4.4.2.5. Refactoring the pricing table project
Урок 82. 00:02:56
4.4.3.1. Updating the template
Урок 83. 00:04:56
4.4.3.2. Updating the template
Урок 84. 00:03:08
4.4.3.3. Updating the template
Урок 85. 00:02:48
4.4.3.4. Updating the template
Урок 86. 00:02:47
4.5.1. Starting a new project using our template
Урок 87. 00:08:10
4.5.2. Analyzing the design
Урок 88. 00:02:45
4.5.3.1. Setting up the abstracts
Урок 89. 00:02:50
4.5.3.2. Setting up the abstracts
Урок 90. 00:10:28
4.5.3.3. Setting up the abstracts
Урок 91. 00:04:10
4.5.4.1. New utilities and generic layouts
Урок 92. 00:03:14
4.5.4.2. New utilities and generic layouts
Урок 93. 00:05:18
4.5.4.3. New utilities and generic layouts
Урок 94. 00:03:11
4.5.4.4. New utilities and generic layouts
Урок 95. 00:04:03
4.5.4.5. New utilities and generic layouts
Урок 96. 00:02:53
4.5.4.6. New utilities and generic layouts
Урок 97. 00:06:43
4.5.5.1. The components
Урок 98. 00:18:39
4.5.5.2. The components
Урок 99. 00:02:22
4.5.6. Reset and base styles
Урок 100. 00:01:00
4.5.7.1. Writing the HTML
Урок 101. 00:06:17
4.5.7.2. Writing the HTML
Урок 102. 00:04:30
4.5.7.3. Writing the HTML
Урок 103. 00:05:26
4.5.7.4. Writing the HTML
Урок 104. 00:03:56
4.5.7.5. Writing the HTML
Урок 105. 00:02:53
4.5.7.6. Writing the HTML
Урок 106. 00:03:28
4.5.7.7. Writing the HTML
Урок 107. 00:07:24
4.5.8. Styling the header
Урок 108. 00:02:39
4.5.9. Styling the hero
Урок 109. 00:01:50
4.5.10. Improving the buttons
Урок 110. 00:01:22
4.5.11.1. Design tweaks
Урок 111. 00:04:31
4.5.11.2. Design tweaks
Урок 112. 00:03:45
4.5.11.3. Design tweaks
Урок 113. 00:03:43
4.5.12. Fixing the flex-group
Урок 114. 00:09:04
4.5.13. The figures
Урок 115. 00:10:40
4.5.14. The testimonial cards
Урок 116. 00:03:44
4.5.15. Finishing touches
Урок 117. 00:17:18
4.6.1. Updating our starter template
Урок 118. 00:01:59
4.6.2. A faster way to use your template
Урок 119. 00:02:27
4.7.1. Introduction
Урок 120. 00:02:33
4.7.2.1. Getting started with PostCSS and postcss-present-env
Урок 121. 00:07:11
4.7.2.2. Getting started with PostCSS and postcss-present-env
Урок 122. 00:05:03
4.7.2.3. Getting started with PostCSS and postcss-present-env
Урок 123. 00:06:49
4.7.2.4. Getting started with PostCSS and postcss-present-env
Урок 124. 00:06:56
4.7.2.5. Getting started with PostCSS and postcss-present-env
Урок 125. 00:04:54
4.7.2.6. Getting started with PostCSS and postcss-present-env
Урок 126. 00:05:46
5.1.2. What is a design system
Урок 127. 00:05:27
5.1.3.1. Design Tokens
Урок 128. 00:03:36
5.1.3.2. Design Tokens
Урок 129. 00:04:31
5.1.3.3. Design Tokens
Урок 130. 00:02:54
5.1.4.1. Global Tokens and Private Members
Урок 131. 00:02:15
5.1.4.2. Global Tokens and Private Members
Урок 132. 00:01:52
5.1.5.1. Getting Started with our System
Урок 133. 00:01:07
5.1.5.2. Getting Started with our System
Урок 134. 00:02:35
5.1.6.1. Setting up our Colors
Урок 135. 00:03:42
5.1.6.2. Setting up our Colors
Урок 136. 00:01:45
5.1.6.3. Setting up our Colors
Урок 137. 00:02:45
5.1.6.4. Setting up our Colors
Урок 138. 00:08:20
5.1.7.1. Setting up the typography
Урок 139. 00:03:10
5.1.7.2. Setting up the typography
Урок 140. 00:03:09
5.1.7.3. Setting up the typography
Урок 141. 00:04:09
5.1.7.4. Setting up the typography
Урок 142. 00:03:41
5.1.7.5. Setting up the typography
Урок 143. 00:02:01
5.1.10.1. Contextual & Component Sizes
Урок 144. 00:10:42
5.1.10.2. Contextual & Component Sizes
Урок 145. 00:02:00
5.1.10.3. Contextual & Component Sizes
Урок 146. 00:07:24
5.1.12.1. Body, buttons, and cards
Урок 147. 00:12:47
5.1.12.2. Body, buttons, and cards
Урок 148. 00:06:31
5.1.12.3. Body, buttons, and cards
Урок 149. 00:03:27
5.1.12.4. Body, buttons, and cards
Урок 150. 00:01:59
5.2.2. Creating a new theme
Урок 151. 00:01:24
5.2.3. Using our new theme
Урок 152. 00:07:38
5.2.5.1. Making the logo change with the color scheme
Урок 153. 00:05:15
5.2.5.2. Making the logo change with the color scheme
Урок 154. 00:01:56
5.2.6. Switching between themes
Урок 155. 00:02:14
5.2.7. Fixing the utility classes
Урок 156. 00:14:31
5.2.8.1. Manually toggling the themes
Урок 157. 00:03:36
5.2.8.2. Manually toggling the themes
Урок 158. 00:07:06
5.3.4. Prefixing
Урок 159. 00:02:11
5.4.2. What we will be working on
Урок 160. 00:02:01
5.4.3. Getting started
Урок 161. 00:10:57
5.4.4. The color abstracts
Урок 162. 00:03:07
5.4.5. The typography abstracts
Урок 163. 00:22:34
5.4.7. Setting up our tokens
Урок 164. 00:17:52
5.4.8. The HTML
Урок 165. 00:02:58
5.4.9. Improving our buttons
Урок 166. 00:04:19
5.4.10. The hero area
Урок 167. 00:16:52
5.4.11. The about section
Урок 168. 00:02:14
5.4.12. Rounding the image
Урок 169. 00:03:19
5.4.13. The offset grid
Урок 170. 00:04:40
5.4.14.1. Customizing the cards in the offset grid
Урок 171. 00:08:24
5.4.14.2. Customizing the cards in the offset grid
Урок 172. 00:04:35
5.4.15. Making decisions on how we use this system
Урок 173. 00:02:58
5.4.16. Moving forward from here
Урок 174. 00:03:39
6.1.2. Getting started with Astro
Урок 175. 00:01:11
6.1.3. The Astro extension
Урок 176. 00:03:32
6.1.4. What we are starting with
Урок 177. 00:02:00
6.1.5. The Dev Toolbar
Урок 178. 00:02:53
6.1.6. Code fences & dynamic content
Урок 179. 00:03:50
6.1.7. Creating a base layout
Урок 180. 00:04:12
6.1.11. Creating a second page and navigation
Урок 181. 00:06:42
6.1.13. CSS and Astro
Урок 182. 00:02:14
6.1.14. Addind Sass to an Astro project
Урок 183. 00:01:27
6.1.15. Scoped styles & Sass
Урок 184. 00:04:28
6.1.17. Defining a content collection
Урок 185. 00:07:53
6.1.18.1. Using a content collection
Урок 186. 00:04:14
6.1.18.2. Using a content collection
Урок 187. 00:03:28
6.2.3.1. Creating a button component part 1
Урок 188. 00:04:45
6.2.3.2. Creating a button component part 1
Урок 189. 00:01:40
6.2.4.1. Creating a button component part 2
Урок 190. 00:01:48
6.2.4.2. Creating a button component part 2
Урок 191. 00:04:23
6.2.5.1. Dynamic elements
Урок 192. 00:03:29
6.2.6.1. Using classes instead of data-attribute modifiers
Урок 193. 00:06:47
6.3.1.1. What we're going to be building
Урок 194. 00:06:27
6.3.2.1. First steps
Урок 195. 00:03:02
6.3.2.2. First steps
Урок 196. 00:32:17
6.3.3.1. Setting up the tokens
Урок 197. 00:10:05
6.3.4.1. Getting started with the layouts
Урок 198. 00:05:09
6.3.6.1. Creating the header & footer components
Урок 199. 00:06:09
6.3.6.2. Creating the header & footer components
Урок 200. 00:06:58
6.3.6.3. Creating the header & footer components
Урок 201. 00:06:32
6.3.6.4. Creating the header & footer components
Урок 202. 00:09:50
6.3.7.1. Creating & Using a content collection
Урок 203. 00:08:15
6.3.8.1. Creating the article index page
Урок 204. 00:04:08
6.3.8.2. Creating the article index page
Урок 205. 00:01:57
6.3.9.1. Creating an Article Preview component
Урок 206. 00:10:25
6.3.10.1. Creating a Tag component
Урок 207. 00:04:55
6.3.11.1. Creating a FormattedDate component
Урок 208. 00:02:37
6.3.13.1. The Homepage
Урок 209. 00:03:20
6.3.14.1. Featured articles
Урок 210. 00:05:16
6.3.15.1. Generating the pages
Урок 211. 00:01:43
6.3.15.2. Cleaning up the tags
Урок 212. 00:02:31
6.3.15.3. Adding content to the pages
Урок 213. 00:03:29
6.3.17.1. Creating the excerpts
Урок 214. 00:01:30
6.3.18.1. Controlling the excerptLength
Урок 215. 00:02:36
6.3.18.2. Only add a paragraph if we have an excerpt
Урок 216. 00:09:28
6.3.20.1. Adding the missing content to our articles
Урок 217. 00:08:56
6.3.22.1. Using the component
Урок 218. 00:04:42
6.3.22.2. Styling the component
Урок 219. 00:17:34
6.3.24.1. Creating the component
Урок 220. 00:10:53
6.3.26.1. The About & Contact pages
Урок 221. 00:05:09
6.4.2.1. Getting started with Tina
Урок 222. 00:03:29
6.4.3.1. Content Modelling
Урок 223. 00:07:23
6.4.3.2. Modelling our content
Урок 224. 00:01:04
6.4.3.3. Fixing the dates
Урок 225. 00:04:07
6.4.4.1. Fixing the path to the images
Урок 226. 00:04:19
6.4.5.1. Refactoring our authors
Урок 227. 00:03:13
6.4.6.1. The authors are a reference field
Урок 228. 00:17:12
6.4.6.2. The authors are a reference field 2
Урок 229. 00:02:42
6.4.7.1. Creating default values for fields
Урок 230. 00:00:48
6.4.8.1. Publish to GitHub
Урок 231. 00:02:02
6.4.8.2. Connect your project to TinaCloud
Урок 232. 00:06:08
6.4.8.3. Setting up our environment variables
Урок 233. 00:03:45
6.4.8.4. Uploading to Netlify (or other host)
Урок 234. 00:05:00
6.4.8.5. Connecting the URL
Урок 235. 00:00:43
6.5.2.1. View transitions
Урок 236. 00:01:06
6.5.2.2. The header
Урок 237. 00:00:12
6.5.2.3. Example
Урок 238. 00:07:44
6.5.3.1. OG Image Options
Урок 239. 00:09:35
6.5.4.1. Making it easier to work with nested components
Урок 240. 00:15:57
6.5.4.2. The scrolling effect
Урок 241. 00:24:33
6.5.4.3. The mobile navigation
Урок 242. 00:08:18
6.5.4.4. Fixing the blur effect
Урок 243. 00:04:27
6.5.4.5. Small screens and the button
Урок 244. 00:06:38
6.5.4.6. Fixing the navigation
Урок 245. 00:18:54
6.5.5.1. Setting up an OverflowGrid component
Урок 246. 00:07:09
6.5.5.2. Alternative card layout
Урок 247. 00:04:13
6.5.5.3. The scrollbar

This course is still a work in progress and the top tier is in pre-release at the moment.

As it stands now, modules 1-5 are finished and you will get immediate access to them (though a bit of tidying up and small fixes are still needed).

Этот курс все еще находится в процессе разработки.

Модули 1-5 завершены, и вы получите к ним немедленный доступ (хотя все еще требуется некоторая уборка и небольшие исправления).

Автор - kevin powell

kevin powell

Я учу людей, как строить Интернет и как заставить его выглядеть хорошо, пока они в нем. Помогу вам научиться создавать веб-сайты и при этом делать их привлекательными.

+70

Комментарии

Kathirr007
7 авг. 2025 г., 16:59
Please update this course.
CourseHunter Team Kathirr007
8 сент. 2025 г., 14:30
Nothing to update yet
Andrew
19 мая 2024 г., 22:11
update please
CourseHunter Team Andrew
30 апр. 2025 г., 18:10
Still waiting for module 4 and 5 updates and then will update it all
Jackson_Ford CourseHunter Team
2 сент. 2025 г., 12:21
Please update this course :-)
CourseHunter Team Jackson_Ford
7 сент. 2025 г., 02:46
We will check, thank you for let us know
Andrew CourseHunter Team
21 июн. 2025 г., 15:55
Thanks . Now I think all released by author