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

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