• Урок 1. 00:01:40
    Introduction
  • Урок 2. 00:03:00
    What is CSS?
  • Урок 3. 00:01:51
    CSS History, Present & Future
  • Урок 4. 00:04:35
    Course Outline
  • Урок 5. 00:00:44
    Course Prerequisites
  • Урок 6. 00:02:50
    How To Get The Most Out Of This Course
  • Урок 7. 00:01:27
    Recommended Tools
  • Урок 8. 00:00:56
    Module Introduction
  • Урок 9. 00:02:45
    Understanding the Course Project Setup
  • Урок 10. 00:03:54
    Adding CSS to our Project with Inline Styles
  • Урок 11. 00:06:28
    Understanding the <style> Tag & Creating a .css File
  • Урок 12. 00:06:52
    Applying Additional Styles & Importing Google Fonts
  • Урок 13. 00:08:57
    Theory Time - Selectors
  • Урок 14. 00:08:15
    Understanding the "Cascading" Style & Specificity​
  • Урок 15. 00:05:48
    Understanding Inheritance
  • Урок 16. 00:06:17
    Adding Combinators
  • Урок 17. 00:05:43
    Theory Time - Combinators
  • Урок 18. 00:03:50
    Summarizing Properties & Selectors
  • Урок 19. 00:02:03
    Wrap Up
  • Урок 20. 00:01:20
    Module Introduction
  • Урок 21. 00:03:37
    Introducing the CSS Box Model
  • Урок 22. 00:03:02
    Understanding the Box Model
  • Урок 23. 00:03:06
    Understanding Margin Collapsing and Removing Default Margins
  • Урок 24. 00:03:49
    Theory Time - Working with Shorthand Properties
  • Урок 25. 00:02:06
    Applying Shorthands in Practice
  • Урок 26. 00:06:08
    Diving Into the Height & Width Properties
  • Урок 27. 00:06:44
    Understanding Box Sizing
  • Урок 28. 00:05:38
    Adding the Header to our Project
  • Урок 29. 00:07:13
    Understanding the Display Property
  • Урок 30. 00:06:54
    Applying the Display Property & Styling our Navigation Bar
  • Урок 31. 00:02:04
    Understanding an Unexpected "inline-block" Behaviour
  • Урок 32. 00:04:55
    Working with "text-decoration" & "vertical-align"
  • Урок 33. 00:04:01
    Styling Anchor Tags
  • Урок 34. 00:01:48
    Adding Pseudo Classes
  • Урок 35. 00:05:39
    Theory Time - Pseudo Classes & Pseudo Elements
  • Урок 36. 00:01:16
    Grouping Rules
  • Урок 37. 00:02:05
    Working with "font-weight" & "border"
  • Урок 38. 00:04:10
    Adding & Styling a CTA-Button
  • Урок 39. 00:01:51
    Adding a Background Image to our Project
  • Урок 40. 00:01:30
    Properties Worth to Remember
  • Урок 41. 00:02:32
    Wrap Up
  • Урок 42. 00:00:42
    Module Introduction
  • Урок 43. 00:07:10
    Using Multiple CSS Classes & Combined Selectors
  • Урок 44. 00:04:06
    Classes or IDs?
  • Урок 45. 00:03:16
    (Not) using !important
  • Урок 46. 00:03:30
    Selecting the Opposite with :not()
  • Урок 47. 00:03:52
    CSS & Browser Support
  • Урок 48. 00:01:07
    Wrap Up
  • Урок 49. 00:00:38
    Module Introduction
  • Урок 50. 00:08:35
    Adding Style to our Plans
  • Урок 51. 00:06:34
    Working on the Recommended Plan
  • Урок 52. 00:03:23
    Styling the Badge with "border-radius"
  • Урок 53. 00:03:04
    Styling our List
  • Урок 54. 00:04:34
    Working on the Title and the Price of our Packages
  • Урок 55. 00:06:41
    Improving our Action Button
  • Урок 56. 00:02:18
    Understanding Outlines
  • Урок 57. 00:01:23
    Presenting the Core Features to the User
  • Урок 58. 00:03:39
    Styling the Headline of the Core Features Section
  • Урок 59. 00:07:16
    Preparing the Content of the Key Feature Area
  • Урок 60. 00:06:50
    Adding the Footer
  • Урок 61. 00:01:47
    What we Achieved so Far
  • Урок 62. 00:06:25
    Adding the Packages Page
  • Урок 63. 00:01:32
    Your Challenge
  • Урок 64. 00:03:56
    Styling the Links
  • Урок 65. 00:07:16
    Styling our Package Boxes
  • Урок 66. 00:05:15
    Adding "float" to our Package
  • Урок 67. 00:04:12
    Fixing the Hover Effect
  • Урок 68. 00:03:02
    Adding the Final Touches
  • Урок 69. 00:02:45
    Module Introduction
  • Урок 70. 00:02:33
    Why Positioning will Improve our Website
  • Урок 71. 00:05:56
    Understanding Positioning - The Theory
  • Урок 72. 00:09:51
    Working with the "fixed" Value
  • Урок 73. 00:03:55
    Creating a Fixed Navigation Bar
  • Урок 74. 00:06:04
    Using "position" to Add a Background Image
  • Урок 75. 00:07:00
    Understanding the Z-Index
  • Урок 76. 00:08:01
    Adding a Badge to our Package
  • Урок 77. 00:03:11
    Styling & Positioning our Badge with "absolute" and "relative"
  • Урок 78. 00:04:04
    Diving Deeper into Relative Positioning
  • Урок 79. 00:04:19
    Working with "overflow" and Relative Positioning
  • Урок 80. 00:06:54
    Introducing "sticky" Positioning
  • Урок 81. 00:05:54
    Understanding the Stacking Context
  • Урок 82. 00:04:13
    Wrap Up
  • Урок 83. 00:02:23
    Optional: Advanced Track Introduction
  • Урок 84. 00:01:07
    Module Introduction
  • Урок 85. 00:08:42
    Understanding "background-size"
  • Урок 86. 00:05:01
    Working with "background-position"
  • Урок 87. 00:02:13
    The "background" Shorthand - Theory
  • Урок 88. 00:05:52
    Applying "background" Origin, Clip & Attachment
  • Урок 89. 00:02:20
    Using the "background" Shorthand on our Project
  • Урок 90. 00:07:34
    Styling Images
  • Урок 91. 00:03:20
    Adding the Customers Page to our Website
  • Урок 92. 00:08:08
    Working on the Image Layout
  • Урок 93. 00:06:17
    Understanding Linear Gradients
  • Урок 94. 00:05:42
    Applying Radial Gradients
  • Урок 95. 00:04:51
    Stacking Multiple Backgrounds
  • Урок 96. 00:04:01
    Understanding Filters
  • Урок 97. 00:04:21
    Adding & Styling SVGs - The Basics
  • Урок 98. 00:02:15
    Wrap Up
  • Урок 99. 00:02:36
    Module Introduction
  • Урок 100. 00:05:22
    What's Wrong With Our Project Units?
  • Урок 101. 00:06:03
    Where Units Matter
  • Урок 102. 00:04:25
    An Overview of Available Sizes & Units
  • Урок 103. 00:04:16
    Rules to Remember: Fixed Positioning & "%"
  • Урок 104. 00:08:15
    Rules to Remember: Absolute Positioning & "%"
  • Урок 105. 00:08:54
    Rules to Remember: Relative / Static Positioning & "%"
  • Урок 106. 00:12:03
    Fixing the Height 100% Issue
  • Урок 107. 00:02:19
    Defining the Font Size in the Root Element
  • Урок 108. 00:05:28
    Using "min-width/height" & "max-width/height"
  • Урок 109. 00:12:48
    Working with "rem" & "em"
  • Урок 110. 00:08:18
    Adding "rem" to Additional Properties
  • Урок 111. 00:05:22
    Finishing "rem"
  • Урок 112. 00:09:48
    Understanding the Viewport Units "vw" &"vh"
  • Урок 113. 00:05:31
    Choosing the Right Unit
  • Урок 114. 00:01:43
    Using "auto" to Center Elements
  • Урок 115. 00:01:07
    Cleaning Up our Code
  • Урок 116. 00:04:24
    Wrap Up
  • Урок 117. 00:01:17
    Module Introduction
  • Урок 118. 00:04:14
    Adding a Modal
  • Урок 119. 00:10:35
    Selecting & Manipulating Styles with JavaScript
  • Урок 120. 00:06:06
    Adding an Event Listener
  • Урок 121. 00:07:15
    Adding a Side Navigation Bar
  • Урок 122. 00:03:58
    Opening and Closing the Hamburger Menu
  • Урок 123. 00:06:41
    Manipulating Element Classes
  • Урок 124. 00:03:13
    Understanding Property Notations
  • Урок 125. 00:05:32
    Cleaning Up our Code
  • Урок 126. 00:01:16
    Wrap Up
  • Урок 127. 00:01:46
    Module Introduction
  • Урок 128. 00:02:26
    Why our Project Should Become Responsive
  • Урок 129. 00:10:30
    Understanding Hardware Pixels vs. Software Pixels
  • Урок 130. 00:03:05
    Comparing the Viewport Metatag (HTML) and Media Queries (CSS)
  • Урок 131. 00:07:23
    Understanding the "viewport" Metatag
  • Урок 132. 00:01:55
    Designing Websites "Mobile First"
  • Урок 133. 00:12:53
    Adding our First Media Queries
  • Урок 134. 00:08:10
    Things to Keep in Mind when Working with Media Queries
  • Урок 135. 00:03:46
    Finding the Right Breaking Points
  • Урок 136. 00:06:38
    Creating the Mobile First Design for our Plans
  • Урок 137. 00:08:36
    Making the Plans Responsive
  • Урок 138. 00:06:07
    Your Challenge
  • Урок 139. 00:08:14
    Working with Logical Operators
  • Урок 140. 00:14:59
    Improving the Customers Page
  • Урок 141. 00:05:42
    Improving the Packages Page
  • Урок 142. 00:04:40
    Cleaning Up the Navigation Bar
  • Урок 143. 00:10:11
    Positioning our Footer Correctly
  • Урок 144. 00:02:16
    Wrap Up
  • Урок 145. 00:01:33
    Module Introduction
  • Урок 146. 00:02:38
    Adding the Unstyled Form
  • Урок 147. 00:06:36
    Page Initialization
  • Урок 148. 00:06:03
    Understanding Advanced Attribute Selectors
  • Урок 149. 00:07:16
    Working on the General Layout
  • Урок 150. 00:06:30
    Restyling the Form Elements
  • Урок 151. 00:06:53
    Styling the Checkbox
  • Урок 152. 00:08:51
    Providing Validation Feedback
  • Урок 153. 00:03:43
    Styling the Signup Button
  • Урок 154. 00:01:30
    Wrap Up
  • Урок 155. 00:01:21
    Module Introduction
  • Урок 156. 00:02:58
    Comparing Generic Families & Font Families
  • Урок 157. 00:06:18
    Understanding the Browser Settings
  • Урок 158. 00:06:54
    Using the Default Font Families
  • Урок 159. 00:06:19
    Understanding the "font-family" Syntax
  • Урок 160. 00:03:51
    Working with Locally Saved Fonts
  • Урок 161. 00:10:29
    Working with Google Fonts
  • Урок 162. 00:06:51
    Understanding Font Faces & "font-style"
  • Урок 163. 00:09:04
    Importing our Custom Fonts
  • Урок 164. 00:05:42
    Understanding Font Formats
  • Урок 165. 00:03:11
    Diving into Font Properties
  • Урок 166. 00:04:44
    Adding "letter-spacing"
  • Урок 167. 00:06:08
    Changing the Line Height
  • Урок 168. 00:05:52
    Applying "text-decoration" & "text-shadow"
  • Урок 169. 00:08:40
    Understanding the "font" Shorthand
  • Урок 170. 00:09:50
    Loading Performance & "font-display"
  • Урок 171. 00:03:49
    Wrap Up
  • Урок 172. 00:03:24
    Optional: Expert Track Introduction
  • Урок 173. 00:01:33
    Module Introduction
  • Урок 174. 00:02:59
    How we Could Improve our Project
  • Урок 175. 00:03:19
    Understanding Flexbox
  • Урок 176. 00:05:34
    Creating a Flex Container
  • Урок 177. 00:05:37
    Using "flex-direction" & "flex-wrap"
  • Урок 178. 00:07:28
    Understanding the Importance of Main Axis & Cross Axis
  • Урок 179. 00:11:00
    Working with "align-items" & "justify-content"
  • Урок 180. 00:02:41
    And What About "align-content"?
  • Урок 181. 00:12:03
    Improving the Navigation Bar with Flexbox
  • Урок 182. 00:04:18
    Your Challenge - Working on the Mobile Navigation Bar
  • Урок 183. 00:05:36
    Improving the Footer
  • Урок 184. 00:08:33
    [OPTIONAL] Assignment Solution
  • Урок 185. 00:03:17
    Adding Flexbox to the Customers Page
  • Урок 186. 00:06:08
    Using the "order" Property for a Flex Item
  • Урок 187. 00:02:45
    Working with "align-self"
  • Урок 188. 00:07:36
    Understanding "flex-grow"
  • Урок 189. 00:03:13
    Applying "flex-shrink"
  • Урок 190. 00:08:36
    Comparing "flex-basis" vs "width" & "height"
  • Урок 191. 00:03:53
    Wrap Up
  • Урок 192. 00:01:15
    Module Introduction
  • Урок 193. 00:01:28
    What is the CSS Grid?
  • Урок 194. 00:02:24
    Getting Started
  • Урок 195. 00:03:22
    Turning a Container into a Grid
  • Урок 196. 00:05:50
    Defining Columns & Rows
  • Урок 197. 00:04:14
    Positioning Child Elements in a Grid
  • Урок 198. 00:06:46
    Using "element-sizing", "repeat" & "minmax"
  • Урок 199. 00:06:31
    Advanced Element Positioning
  • Урок 200. 00:03:54
    Working with Named Lines
  • Урок 201. 00:02:55
    Understanding Column & Row Shorthands
  • Урок 202. 00:02:34
    Working with Gaps
  • Урок 203. 00:06:40
    Adding Named Template Areas
  • Урок 204. 00:07:11
    Creating Automatically Generated Grid Areas
  • Урок 205. 00:09:11
    Using the Grid on our Project
  • Урок 206. 00:03:32
    Working with "fit-content"
  • Урок 207. 00:03:36
    Positioning Grid Elements
  • Урок 208. 00:03:18
    Positioning the Entire Grid Content
  • Урок 209. 00:01:36
    Positioning Elements Individually
  • Урок 210. 00:05:31
    Understanding Responsive Grids
  • Урок 211. 00:06:40
    Applying Autoflow
  • Урок 212. 00:02:32
    Comparing the Explicit & Implicit Grid
  • Урок 213. 00:03:34
    Understanding "auto-fill" & "auto-fit"
  • Урок 214. 00:03:23
    Creating a Dense Grid
  • Урок 215. 00:09:46
    Styling the Project Form with Grid
  • Урок 216. 00:02:28
    Comparing Grid & Flexbox
  • Урок 217. 00:01:32
    Next Steps
  • Урок 218. 00:03:50
    Wrap Up
  • Урок 219. 00:00:32
    Module Introduction
  • Урок 220. 00:03:46
    Rotating Elements and setting transform-origin
  • Урок 221. 00:04:58
    Using Rotate and Translate
  • Урок 222. 00:06:19
    Working with "skew" and "scale"
  • Урок 223. 00:02:25
    Applying Transformation Shorthands
  • Урок 224. 00:04:20
    Rotating Elements in 3 Dimensions
  • Урок 225. 00:03:38
    Understanding the "perspective" Property
  • Урок 226. 00:03:55
    Moving Elements along the Z-Axis with "translateZ"
  • Урок 227. 00:03:45
    Rotating the Container with "transform style"
  • Урок 228. 00:01:16
    Flipping Elements & "backface-visibility"
  • Урок 229. 00:01:15
    Wrap Up
  • Урок 230. 00:00:23
    Module Introduction
  • Урок 231. 00:07:24
    Understanding and Applying Transitions
  • Урок 232. 00:02:51
    Working with Timing Functions
  • Урок 233. 00:06:12
    Transitions & "display"
  • Урок 234. 00:09:02
    Using CSS Animations
  • Урок 235. 00:03:23
    Adding Multiple Keyframes
  • Урок 236. 00:04:00
    Adding Animations to our Customers Page
  • Урок 237. 00:03:25
    Using JavaScript Animation Event Listeners
  • Урок 238. 00:01:36
    Wrap Up
  • Урок 239. 00:00:35
    Module Introduction
  • Урок 240. 00:01:56
    CSS Modules & Their Working Groups
  • Урок 241. 00:07:32
    Using CSS Variables
  • Урок 242. 00:04:49
    Understanding & Using Vendor Prefixes
  • Урок 243. 00:02:59
    Which Prefixes Should You Use?
  • Урок 244. 00:05:10
    Detecting Browser Support with @supports
  • Урок 245. 00:02:46
    Polyfills
  • Урок 246. 00:02:59
    Eliminating Cross-Browser Inconsistencies
  • Урок 247. 00:04:53
    How to Name CSS Classes
  • Урок 248. 00:08:37
    Vanilla CSS vs Frameworks
  • Урок 249. 00:04:17
    Wrap Up
  • Урок 250. 00:00:43
    Module Introduction
  • Урок 251. 00:03:32
    What is Sass & Scss?
  • Урок 252. 00:04:26
    Installing Sass
  • Урок 253. 00:01:34
    Things to be Improved with Sass
  • Урок 254. 00:06:36
    Nesting Selectors
  • Урок 255. 00:01:28
    Adding Nested Properties
  • Урок 256. 00:03:06
    Understanding Variables
  • Урок 257. 00:05:59
    Storing Lists & Maps in Variables
  • Урок 258. 00:03:19
    Built-In Functions
  • Урок 259. 00:02:25
    Adding Simple Arithmetics
  • Урок 260. 00:04:47
    Adding Better Import and Partials
  • Урок 261. 00:02:25
    Improving Media Queries
  • Урок 262. 00:03:34
    Understanding Inheritance
  • Урок 263. 00:06:46
    Adding Mixins
  • Урок 264. 00:02:58
    Using the Ampersand Operator
  • Урок 265. 00:01:15
    Wrap Up
  • Урок 266. 00:01:57
    Course Roundup