Урок 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