Этот материал находится в платной подписке. Оформи премиум подписку и смотри или слушай Beyond 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