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

  1. Урок 1. 00:06:03
    Welcome & Curriculum Overview
  2. Урок 2. 00:02:02
    Important Note On Leaving Feedback!
  3. Урок 3. 00:11:11
    A First Taste of HTML & CSS
  4. Урок 4. 00:07:38
    How The Web Works
  5. Урок 5. 00:07:16
    The Roles of HTML, CSS, and JS
  6. Урок 6. 00:03:15
    Installing The Tools We Need
  7. Урок 7. 00:05:23
    Configuring VSCode
  8. Урок 8. 00:02:12
    Important Note On The Course Exercises
  9. Урок 9. 00:04:00
    Introducing HTML
  10. Урок 10. 00:05:00
    The Basic HTML Workflow
  11. Урок 11. 00:05:50
    The Paragraph Element
  12. Урок 12. 00:02:11
    Mozilla Developer Network
  13. Урок 13. 00:03:48
    Chrome Developer Tools
  14. Урок 14. 00:05:05
    Document Structure
  15. Урок 15. 00:04:08
    Creating HTML Comments
  16. Урок 16. 00:09:49
    Creating Headings
  17. Урок 17. 00:10:27
    HTML Basics Exercise
  18. Урок 18. 00:08:25
    Working With HTML Lists
  19. Урок 19. 00:09:08
    The Em, Strong, B, and I Elements
  20. Урок 20. 00:01:52
    Nesting Elements
  21. Урок 21. 00:02:20
    Superscript and Subscript
  22. Урок 22. 00:03:10
    Inline Vs. Block Elements
  23. Урок 23. 00:07:04
    Creating Links
  24. Урок 24. 00:07:36
    Other Types of Links
  25. Урок 25. 00:08:06
    Creating Images
  26. Урок 26. 00:12:07
    Pasta Recipe Exercise
  27. Урок 27. 00:04:34
    Creating Text Inputs and Buttons
  28. Урок 28. 00:06:50
    The Form Element
  29. Урок 29. 00:06:53
    Name and Placeholder Attributes
  30. Урок 30. 00:04:01
    Properly Labelling Form Controls
  31. Урок 31. 00:05:10
    Other Types of Inputs
  32. Урок 32. 00:06:11
    Checkboxes, Textareas, and Range Inputs
  33. Урок 33. 00:07:45
    Selects and Radio Button Groupings
  34. Урок 34. 00:14:48
    Course Landing Page Form Exercise
  35. Урок 35. 00:06:30
    Spans
  36. Урок 36. 00:05:21
    Divs
  37. Урок 37. 00:09:18
    Tables
  38. Урок 38. 00:07:11
    Semantic Markup
  39. Урок 39. 00:07:19
    Semantic Elements
  40. Урок 40. 00:02:20
    Getting Our Starter Code
  41. Урок 41. 00:04:30
    Working Within Inline Styles
  42. Урок 42. 00:04:51
    Writing Internal Styles
  43. Урок 43. 00:04:29
    External Styles: The Best Way To Write Styles
  44. Урок 44. 00:02:21
    Quick Note on Codepen
  45. Урок 45. 00:05:04
    Anatomy of CSS
  46. Урок 46. 00:03:15
    The Element Selector
  47. Урок 47. 00:02:40
    CSS Basics Exercise
  48. Урок 48. 00:02:17
    Working with background-color
  49. Урок 49. 00:04:21
    Quick Tip: MDN & Comments
  50. Урок 50. 00:04:04
    Named Colors
  51. Урок 51. 00:07:30
    Understanding RGB Colors
  52. Урок 52. 00:08:17
    Hexadecimal Colors
  53. Урок 53. 00:05:52
    RGBA Colors and Opacity
  54. Урок 54. 00:05:02
    Colors Quiz
  55. Урок 55. 00:06:02
    CSS Inheritance
  56. Урок 56. 00:08:08
    CSS Colors Exercise
  57. Урок 57. 00:12:07
    Changing Fonts with Font-Family
  58. Урок 58. 00:08:53
    Font-size, font-weight, and font-style
  59. Урок 59. 00:04:13
    Changing Text Alignment
  60. Урок 60. 00:04:50
    Line-height, letter-spacing, and word-spacing
  61. Урок 61. 00:11:33
    Adding Custom Fonts With Google Fonts
  62. Урок 62. 00:12:36
    Styling Text Exercise
  63. Урок 63. 00:07:07
    Creating Text Shadows
  64. Урок 64. 00:16:07
    Our First Mini Project: Cantilever
  65. Урок 65. 00:07:56
    Text-transform & text-decoration
  66. Урок 66. 00:05:41
    The ID Selector
  67. Урок 67. 00:06:12
    The Class Selector
  68. Урок 68. 00:08:27
    Styling Lists
  69. Урок 69. 00:07:41
    Styling Links and :hover Pseudo-Class
  70. Урок 70. 00:04:35
    The Font Shorthand Property
  71. Урок 71. 00:09:48
    Leafy Seadragon Exercise
  72. Урок 72. 00:05:17
    The Universal Selector
  73. Урок 73. 00:07:21
    The Attribute Selector
  74. Урок 74. 00:04:26
    Grouping Selectors
  75. Урок 75. 00:08:19
    Descendant & Child Combinators
  76. Урок 76. 00:04:24
    Compound Selectors
  77. Урок 77. 00:08:15
    CSS Selectors Exercise
  78. Урок 78. 00:05:28
    Introducing The Box Model
  79. Урок 79. 00:07:22
    Working With Borders
  80. Урок 80. 00:06:53
    Width, Height, and Percentages
  81. Урок 81. 00:06:34
    Adding Padding to Elements
  82. Урок 82. 00:05:04
    Working With Margins
  83. Урок 83. 00:06:29
    The Alternate Box Model
  84. Урок 84. 00:11:34
    The Display Property
  85. Урок 85. 00:03:53
    Display: None
  86. Урок 86. 00:06:25
    Negative Margin & Margin Auto
  87. Урок 87. 00:05:14
    Margin Collapsing: WTF?
  88. Урок 88. 00:02:42
    A Common Layout Pattern
  89. Урок 89. 00:04:25
    Min and Max Width
  90. Урок 90. 00:03:18
    Rounding Elements With Border Radius
  91. Урок 91. 00:06:38
    Box Shadows
  92. Урок 92. 00:06:44
    Working With Overflow
  93. Урок 93. 00:13:27
    Ski Resort Exercise
  94. Урок 94. 00:03:02
    Introducing Our Project
  95. Урок 95. 00:05:12
    Basic Project Setup
  96. Урок 96. 00:04:08
    Writing The Navbar Markup
  97. Урок 97. 00:11:19
    Styling The Navbar
  98. Урок 98. 00:11:27
    Finishing Up The Navbar
  99. Урок 99. 00:05:06
    Creating The Photo Grid
  100. Урок 100. 00:13:26
    Continuing The Photo Grid
  101. Урок 101. 00:10:06
    Finishing The Photo Grid
  102. Урок 102. 00:16:08
    Adding The Footer Content
  103. Урок 103. 00:00:47
    Section Introduction
  104. Урок 104. 00:04:36
    The Sibling Combinator
  105. Урок 105. 00:15:04
    Working With Pseudo-Classes
  106. Урок 106. 00:04:42
    Styling Pseudo-Elements
  107. Урок 107. 00:13:03
    CSS Selectors Pt. 2 Exercise
  108. Урок 108. 00:08:01
    The Basics of Specificity
  109. Урок 109. 00:02:08
    Inline Styles and Specificity
  110. Урок 110. 00:09:49
    Calculating Specificity Values
  111. Урок 111. 00:06:05
    !important and The Cascade
  112. Урок 112. 00:06:28
    Wrapping Up The Cascade
  113. Урок 113. 00:03:25
    Introducing Our Blog Post Project
  114. Урок 114. 00:06:34
    Centering The Main Content
  115. Урок 115. 00:13:30
    Working on Typography
  116. Урок 116. 00:13:16
    Creating the Headline Section
  117. Урок 117. 00:10:00
    Implementing Our Headings
  118. Урок 118. 00:11:49
    Adding In Code Styles
  119. Урок 119. 00:09:35
    Creating the Footer
  120. Урок 120. 00:10:02
    Writing The Full Size Hero
  121. Урок 121. 00:10:18
    Absolute Units: Pixels, Centimeters, and More!
  122. Урок 122. 00:05:15
    Working With Percentages
  123. Урок 123. 00:07:44
    The Joy of Rem Units
  124. Урок 124. 00:08:17
    Understanding The Em Unit
  125. Урок 125. 00:06:32
    Vw and Vh Units
  126. Урок 126. 00:03:03
    Which Units Should You Use?
  127. Урок 127. 00:07:08
    Working With Floats
  128. Урок 128. 00:02:47
    Introducing The Project
  129. Урок 129. 00:07:35
    Setting Up The Navbar
  130. Урок 130. 00:05:05
    Finishing The Navbar
  131. Урок 131. 00:06:52
    Starting The Hero Content
  132. Урок 132. 00:09:47
    Making The Skills Section
  133. Урок 133. 00:11:22
    Creating The Blog Section
  134. Урок 134. 00:07:00
    Adding The Events Section
  135. Урок 135. 00:04:59
    Making A Simple Footer
  136. Урок 136. 00:08:33
    Working With Background Images
  137. Урок 137. 00:02:38
    Controlling Background-Repeat
  138. Урок 138. 00:05:51
    Sizing Our Background
  139. Урок 139. 00:05:56
    Positioning Background
  140. Урок 140. 00:02:13
    Working With Background-Clip
  141. Урок 141. 00:05:42
    Background Exercise
  142. Урок 142. 00:00:52
    An Important Note About Gradients!
  143. Урок 143. 00:05:39
    Creating Linear Gradients
  144. Урок 144. 00:08:09
    Radial, Conic, and Repeating Gradients
  145. Урок 145. 00:04:32
    The Background Shorthand Property
  146. Урок 146. 00:05:29
    Fancy CSS Filters
  147. Урок 147. 00:04:59
    Introducing Positioning
  148. Урок 148. 00:05:01
    Relative Positioning
  149. Урок 149. 00:03:00
    Controlling Layers With Z-Index
  150. Урок 150. 00:06:25
    Absolute Positioning Pt 1
  151. Урок 151. 00:04:53
    Absolute Positioning Pt 2
  152. Урок 152. 00:14:38
    Creating A Button Badge
  153. Урок 153. 00:04:36
    Fixed Positioning
  154. Урок 154. 00:04:30
    Positioning Exercise #1
  155. Урок 155. 00:06:05
    Positioning Exercise #2
  156. Урок 156. 00:05:31
    Positioning Exercise #3
  157. Урок 157. 00:04:24
    Introducing Transitions
  158. Урок 158. 00:06:34
    The Basic Transition Syntax
  159. Урок 159. 00:03:23
    Working With Multiple Transitions
  160. Урок 160. 00:05:40
    Transition Timing Functions
  161. Урок 161. 00:02:18
    Transition Delays
  162. Урок 162. 00:09:52
    Understanding Animation Performance
  163. Урок 163. 00:06:24
    Introducing Transforms
  164. Урок 164. 00:07:55
    Other Types of Transformations
  165. Урок 165. 00:02:36
    Transform Origin
  166. Урок 166. 00:17:08
    Building Fancy Button Hover Effects
  167. Урок 167. 00:06:32
    Introducing Flexbox
  168. Урок 168. 00:05:38
    Display: Flex and Flex Axis
  169. Урок 169. 00:05:12
    Working With Flex-Direction
  170. Урок 170. 00:02:19
    Flexbox Exercise 1
  171. Урок 171. 00:08:14
    Flex-Wrap
  172. Урок 172. 00:10:10
    Justify-Content
  173. Урок 173. 00:02:12
    Flexbox Exercise 2
  174. Урок 174. 00:06:29
    Align-Items
  175. Урок 175. 00:02:44
    Flexbox Exercise 3
  176. Урок 176. 00:05:46
    Align-Content
  177. Урок 177. 00:04:34
    Flexbox Exercise 4
  178. Урок 178. 00:03:43
    Align-Self
  179. Урок 179. 00:04:37
    Flexbox Exercise 5
  180. Урок 180. 00:11:10
    The Flex-Grow Property
  181. Урок 181. 00:05:07
    Controlling Shrinkage With Flex-Shrink
  182. Урок 182. 00:06:26
    Flex-Basis: Important & Confusing
  183. Урок 183. 00:07:35
    The Flex Shorthand Property
  184. Урок 184. 00:07:35
    The Order Flex-Item Property
  185. Урок 185. 00:09:12
    Flexbox Patterns: Building A Simple Navbar
  186. Урок 186. 00:05:12
    Flexbox Patterns: Nested Flex Containers
  187. Урок 187. 00:04:33
    Flexbox Patterns: Centering Content
  188. Урок 188. 00:07:00
    Flexbox Patterns: Building A Card Layout
  189. Урок 189. 00:02:33
    Introducing The Cost Estimator Project
  190. Урок 190. 00:07:54
    Building Our Container
  191. Урок 191. 00:08:07
    Creating The Top Tabs
  192. Урок 192. 00:08:03
    Positioning The Tabs Underline
  193. Урок 193. 00:11:57
    Creating The Active Tab Styles
  194. Урок 194. 00:10:44
    Adding The Toggle Section
  195. Урок 195. 00:06:59
    Building The Sessions Card
  196. Урок 196. 00:14:33
    Creating The Slider
  197. Урок 197. 00:08:06
    Creating The Two Price Cards
  198. Урок 198. 00:11:35
    Finishing Up The Price Cards
  199. Урок 199. 00:06:35
    Introducing Responsive Design
  200. Урок 200. 00:07:15
    Our First Media Query
  201. Урок 201. 00:06:22
    More On Media Queries
  202. Урок 202. 00:06:05
    Working With Media Features
  203. Урок 203. 00:03:07
    Media Query Logical Operators
  204. Урок 204. 00:05:32
    Media Queries Exercise
  205. Урок 205. 00:05:18
    Media Queries Level 4 & 5
  206. Урок 206. 00:08:56
    Common Responsive Breakpoints
  207. Урок 207. 00:08:44
    Creating a Simple Responsive Navbar
  208. Урок 208. 00:06:28
    Responsive Flexbox Grid Demo
  209. Урок 209. 00:04:43
    Mobile First vs. Desktop First Design
  210. Урок 210. 00:06:06
    Building a Simple Mobile-First Layout
  211. Урок 211. 00:07:40
    Making Cantilever Responsive
  212. Урок 212. 00:09:27
    Making Potter Portfolio Responsive
  213. Урок 213. 00:17:19
    Making Hazel CV Project Responsive
  214. Урок 214. 00:09:13
    Making Cost Estimator Responsive
  215. Урок 215. 00:06:52
    Introducing CSS Grid
  216. Урок 216. 00:05:30
    Enabling CSS Grid
  217. Урок 217. 00:05:29
    Grid-Template-Columns
  218. Урок 218. 00:05:11
    Grid-Template-Rows
  219. Урок 219. 00:02:52
    Grid Exercise 1
  220. Урок 220. 00:04:06
    Grid-Template Shorthand Property
  221. Урок 221. 00:08:28
    The Minmax() Function
  222. Урок 222. 00:03:33
    Working With Repeat()
  223. Урок 223. 00:03:03
    Fit-Content
  224. Урок 224. 00:03:46
    Controlling Grid Gaps
  225. Урок 225. 00:02:45
    Grid Exercise 2
  226. Урок 226. 00:05:18
    Working with Grid Lines
  227. Урок 227. 00:07:43
    Positioning Grid Items
  228. Урок 228. 00:03:24
    The Span Keyword
  229. Урок 229. 00:06:12
    The Grid-Area Shorthand Property
  230. Урок 230. 00:06:53
    Naming Our Grid Lines
  231. Урок 231. 00:07:53
    Grid-Template-Areas
  232. Урок 232. 00:06:23
    Using Grid-Template-Areas With Rows & Cols
  233. Урок 233. 00:05:17
    Grid-Auto-Flow
  234. Урок 234. 00:04:24
    Grid Auto Columns & Rows
  235. Урок 235. 00:07:12
    Autofit and Autofill
  236. Урок 236. 00:04:30
    Introducing Our Grid Project
  237. Урок 237. 00:10:32
    Creating Image Overlay Pt 1
  238. Урок 238. 00:05:51
    Creating Image Overlay Pt 2
  239. Урок 239. 00:05:39
    Adding In Our Images
  240. Урок 240. 00:07:35
    Positioning Our Images On The Grid
  241. Урок 241. 00:10:09
    Making Our Grid Layout Responsive
  242. Урок 242. 00:03:06
    Fixing Our Image Overlays
  243. Урок 243. 00:10:08
    Building The Navbar
  244. Урок 244. 00:07:05
    Finalizing The Navbar and Footer
  245. Урок 245. 00:12:30
    Creating The Hamburger Button
  246. Урок 246. 00:04:20
    Introducing Keyframes Animations
  247. Урок 247. 00:06:13
    Defining @keyframes
  248. Урок 248. 00:07:56
    More Practice With @Keyframes
  249. Урок 249. 00:06:27
    Animation Delay, Repeat, and More!
  250. Урок 250. 00:02:03
    Reusing Animations
  251. Урок 251. 00:04:23
    Animation Shorthand Property
  252. Урок 252. 00:04:14
    Building A Simple Spinner Animation
  253. Урок 253. 00:08:55
    Creating a More Complex Loader
  254. Урок 254. 00:04:54
    The Animation Fill Mode Property
  255. Урок 255. 00:02:41
    Introducing Our Animated Drawer
  256. Урок 256. 00:07:55
    Writing The Individual Bar Animations
  257. Урок 257. 00:09:05
    A Lightspeed Crash Course In JavaScript
  258. Урок 258. 00:06:38
    Making Our Hamburger Button Work
  259. Урок 259. 00:06:57
    Creating The Mobile Drawer Menu
  260. Урок 260. 00:07:30
    Animating The Drawer Slide-Out
  261. Урок 261. 00:05:05
    Introducing Before and After
  262. Урок 262. 00:07:36
    Creating Decorative Quotes With Pseudo-Elements
  263. Урок 263. 00:06:30
    Gradient Borders With Pseudo-Elements
  264. Урок 264. 00:08:21
    Fancy Animated Buttons With Pseudo-Elements
  265. Урок 265. 00:07:31
    Super Fancy Animated Spinner With Pseudo-Elements
  266. Урок 266. 00:13:19
    Custom Form Controls With Pseudo-Elements
  267. Урок 267. 00:03:21
    Introducing CSS Variables
  268. Урок 268. 00:07:17
    Writing CSS Variables
  269. Урок 269. 00:03:53
    The :root pseudo-class
  270. Урок 270. 00:02:32
    Variables and Media Queries
  271. Урок 271. 00:04:40
    Using Variables For Sizes
  272. Урок 272. 00:05:43
    Introducing Calc()
  273. Урок 273. 00:05:37
    The Rules of Calc()
  274. Урок 274. 00:05:02
    Another Example of Using Calc()
  275. Урок 275. 00:07:50
    Introducing Swipe
  276. Урок 276. 00:05:57
    Setting Up Our Font Variables
  277. Урок 277. 00:07:25
    Defining Basic Heading Styles
  278. Урок 278. 00:05:16
    Writing General Link Styles
  279. Урок 279. 00:04:09
    Defining Body Styles
  280. Урок 280. 00:11:36
    Creating our Text Classes - Subtitle, Secondary Text
  281. Урок 281. 00:12:52
    Defining Our Button Styles - Primary & Secondary Buttons
  282. Урок 282. 00:05:08
    Creating Our Buttons With Animated Icons
  283. Урок 283. 00:12:12
    Building The Navbar
  284. Урок 284. 00:11:56
    Defining Our Two-Column Layout Classes
  285. Урок 285. 00:04:50
    Writing The Hero Markup
  286. Урок 286. 00:13:12
    Styling The Page Hero
  287. Урок 287. 00:09:15
    Building The Partners Grid Section
  288. Урок 288. 00:15:01
    Adding The Unified Platform Section
  289. Урок 289. 00:08:06
    Creating Our Graphic Photos Grid
  290. Урок 290. 00:07:22
    Writing Our Reusable Card Class
  291. Урок 291. 00:16:57
    Adding The Integrations Section
  292. Урок 292. 00:09:21
    Defining The Why Swipe Section
  293. Урок 293. 00:14:59
    Creating The Global Section
  294. Урок 294. 00:06:00
    Positioning The Globe Image
  295. Урок 295. 00:07:51
    Adding The Virtual Events Section Markup
  296. Урок 296. 00:20:06
    Styling The Virtual Events Section
  297. Урок 297. 00:12:21
    Building The Getting Started Section
  298. Урок 298. 00:07:03
    Writing The Page Footer Markup
  299. Урок 299. 00:13:49
    Styling The Page Footer
  300. Урок 300. 00:08:19
    Adding The First Angled Stripe
  301. Урок 301. 00:09:07
    Finishing The Angled Stripes
  302. Урок 302. 00:11:12
    Creating The Animated Gradient Hero Background
  303. Урок 303. 00:04:18
    Fixing An Issue With Our Angled Stripes
  304. Урок 304. 00:07:43
    Starting To Make Swipe Responsive
  305. Урок 305. 00:08:24
    Making The Partners Grid Responsive
  306. Урок 306. 00:05:59
    Making The Unified Platform Section Responsive
  307. Урок 307. 00:09:01
    Making The Integrations Section Responsive
  308. Урок 308. 00:06:50
    Making The Why Swipe Section Responsive
  309. Урок 309. 00:05:40
    Making The Global Section Responsive
  310. Урок 310. 00:08:38
    Making The Virtual Events Section Responsive
  311. Урок 311. 00:10:34
    Making The Bottom of The Page Responsive
  312. Урок 312. 00:25:31
    Making The Page Hero Responsive
  313. Урок 313. 00:11:20
    Adding Our Responsive Navbar
  314. Урок 314. 00:14:38
    Responsive Tweaks To Background Stripes
  315. Урок 315. 00:10:59
    Cleaning Up Our CSS
  316. Урок 316. 00:05:04
    Fixing A Minor Issue With Border Radius
  317. Урок 317. 00:07:03
    Fixing Another Minor Issue With Partners Grid