Section 1 : Getting Started
Lecture 1 INTRODUCTION TO BRAINMEASURES PROCTOR SYSTEM
Lecture 2 What is CSS_ 00:02:59 Duration
Lecture 3 About Certification
Lecture 4 CSS History, Present & Future 00:01:50 Duration
Lecture 5 Course Outline 00:04:34 Duration
Lecture 6 Choose Your Track
Lecture 7 Course Prerequisites 00:00:43 Duration
Lecture 8 How To Get The Most Out Of This Course 00:02:49 Duration
Lecture 9 Recommended Tools 00:01:26 Duration
Lecture 10 Where to Find the Source Code
Lecture 11 Useful Resources & Links

Section 2 : Diving Into the Basics of CSS
Lecture 1 Module Introduction 00:00:55 Duration
Lecture 2 Understanding the Course Project Setup 00:02:44 Duration
Lecture 3 Adding CSS to our Project with Inline Styles 00:03:53 Duration
Lecture 4 Understanding the _style_ Tag & Creating a 00:06:27 Duration
Lecture 5 Applying Additional Styles & Importing Google Fonts 00:06:51 Duration
Lecture 6 Theory Time - Selectors 00:08:54 Duration
Lecture 7 Understanding the _Cascading_ Style & Specificity8203
Lecture 8 Understanding Inheritance 00:05:47 Duration
Lecture 9 Adding Combinators 00:06:16 Duration
Lecture 10 Theory Time - Combinators 00:05:40 Duration
Lecture 11 Summarizing Properties & Selectors 00:03:49 Duration
Lecture 12 Wrap Up 00:02:02 Duration
Lecture 13 Useful Resources & Links

Section 3 : Diving Deeper into CSS
Lecture 1 Module Introduction 00:01:19 Duration
Lecture 2 Introducing the CSS Box Model 00:03:36 Duration
Lecture 3 Understanding the Box Model 00:03:01 Duration
Lecture 4 Understanding Margin Collapsing and Removing Default Margins 00:03:05 Duration
Lecture 5 Deep Dive on _Margin Collapsing_
Lecture 6 Theory Time - Working with Shorthand Properties 00:03:46 Duration
Lecture 7 Applying Shorthands in Practice 00:02:05 Duration
Lecture 8 Diving Into the Height & Width Properties 00:06:07 Duration
Lecture 9 Understanding Box Sizing 00:06:40 Duration
Lecture 10 Adding the Header to our Project 00:05:37 Duration
Lecture 11 Understanding the Display Property 00:07:12 Duration
Lecture 12 display_ none vs visibility_ hidden
Lecture 13 HTML Refresher_ Block-level vs Inline Elements
Lecture 14 Applying the Display Property & Styling our Navigation Bar 00:06:53 Duration
Lecture 15 Understanding an Unexpected _inline-block_ Behaviour 00:02:03 Duration
Lecture 16 Working with _text-decoration_ & _vertical-align_ 00:04:54 Duration
Lecture 17 Styling Anchor Tags 00:04:00 Duration
Lecture 18 Adding Pseudo Classes 00:01:47 Duration
Lecture 19 Theory Time - Pseudo Classes & Pseudo Elements 00:05:35 Duration
Lecture 20 Grouping Rules 00:01:14 Duration
Lecture 21 Working with _font-weight_ & _border_ 00:02:04 Duration
Lecture 22 Adding & Styling a CTA-Button 00:04:09 Duration
Lecture 23 Adding a Background Image to our Project 00:01:50 Duration
Lecture 24 Properties Worth to Remember 00:01:29 Duration
Lecture 25 Wrap Up 00:02:31 Duration
Lecture 26 Useful Resources & Links

Section 4 : More on Selectors & CSS Features
Lecture 1 Module Introduction 00:00:41 Duration
Lecture 2 Using Multiple CSS Classes & Combined Selectors 00:07:09 Duration
Lecture 3 Classes or IDs_ 00:04:05 Duration
Lecture 4 (Not) using _important 00:03:15 Duration
Lecture 5 Selecting the Opposite with _not() 00:03:29 Duration
Lecture 6 CSS & Browser Support
Lecture 7 Wrap Up 00:01:06 Duration
Lecture 8 Useful Resources & Links

Section 5 : Practicing the Basics
Lecture 1 Module Introduction 00:00:37 Duration
Lecture 2 Adding Style to our Plans 00:08:34 Duration
Lecture 3 Working on the Recommended Plan 00:06:33 Duration
Lecture 4 Styling the Badge with _border-radius_ 00:03:22 Duration
Lecture 5 Styling our List 00:03:02 Duration
Lecture 6 Working on the Title and the Price of our Packages 00:04:33 Duration
Lecture 7 Improving our Action Button 00:06:40 Duration
Lecture 8 Understanding Outlines 00:02:17 Duration
Lecture 9 Presenting the Core Features to the User 00:01:22 Duration
Lecture 10 Styling the Headline of the Core Features Section 00:03:38 Duration
Lecture 11 Preparing the Content of the Key Feature Area 00:07:15 Duration
Lecture 12 Adding the Footer
Lecture 13 What we Achieved so Far 00:01:45 Duration
Lecture 14 Adding the Packages Page 00:06:24 Duration
Lecture 15 Your Challenge 00:01:31 Duration
Lecture 16 Styling the Links 00:03:55 Duration
Lecture 17 Styling our Package Boxes 00:07:15 Duration
Lecture 18 Adding _float_ to our Package 00:05:14 Duration
Lecture 19 Fixing the Hover Effect 00:04:11 Duration
Lecture 20 Adding the Final Touches
Lecture 21 Useful Resources & Links

Section 6 : Positioning Elements with CSS
Lecture 1 Module Introduction 00:02:44 Duration
Lecture 2 Why Positioning will Improve our Website 00:02:32 Duration
Lecture 3 Understanding Positioning - The Theory 00:05:54 Duration
Lecture 4 Working with the _fixed_ Value 00:09:50 Duration
Lecture 5 Creating a Fixed Navigation Bar 00:03:54 Duration
Lecture 6 Using _position_ to Add a Background Image 00:06:02 Duration
Lecture 7 Understanding the Z-Index 00:06:59 Duration
Lecture 8 Adding a Badge to our Package 00:08:00 Duration
Lecture 9 Styling & Positioning our Badge with _absolute_ and _relative_ 00:03:10 Duration
Lecture 10 Diving Deeper into Relative Positioning 00:04:02 Duration
Lecture 11 Working with _overflow_ and Relative Positioning 00:04:17 Duration
Lecture 12 Introducing _sticky_ Positioning 00:06:52 Duration
Lecture 13 Understanding the Stacking Context 00:05:52 Duration
Lecture 14 Wrap Up 00:04:12 Duration
Lecture 15 Useful Resources & Links

Section 7 : Understanding Background Images & Images
Lecture 1 Optional_ Advanced Track Introduction 00:02:21 Duration
Lecture 2 Module Introduction 00:01:05 Duration
Lecture 3 Understanding _background-size_ 00:08:40 Duration
Lecture 4 Working with _background-position_ 00:04:59 Duration
Lecture 5 The _background_ Shorthand - Theory 00:02:12 Duration
Lecture 6 Applying _background_ Origin, Clip & Attachment 00:05:51 Duration
Lecture 7 Using the _background_ Shorthand on our Project 00:02:19 Duration
Lecture 8 Styling Images 00:07:33 Duration
Lecture 9 Adding the Customers Page to our Website 00:03:18 Duration
Lecture 10 Working on the Image Layout 00:08:07 Duration
Lecture 11 Understanding Linear Gradients 00:06:16 Duration
Lecture 12 Applying Radial Gradients 00:05:41 Duration
Lecture 13 Stacking Multiple Backgrounds 00:04:50 Duration
Lecture 14 Understanding Filters 00:04:00 Duration
Lecture 15 Adding & Styling SVGs - The Basics 00:04:19 Duration
Lecture 16 Wrap Up 00:02:14 Duration
Lecture 17 Useful Resources & Links

Section 8 : Sizes & Units
Lecture 1 Module Introduction 00:02:35 Duration
Lecture 2 What's Wrong With Our Project Units_ 00:05:21 Duration
Lecture 3 Where Units Matter 00:06:02 Duration
Lecture 4 An Overview of Available Sizes & Units 00:04:24 Duration
Lecture 5 Rules to Remember_ Fixed Positioning & _%_ 00:04:15 Duration
Lecture 6 Rules to Remember_ Absolute Positioning & _%_ 00:08:14 Duration
Lecture 7 Rules to Remember_ Relative _ Static Positioning & _%_ 00:08:53 Duration
Lecture 8 Fixing the Height 100% Issue 00:12:02 Duration
Lecture 9 Defining the Font Size in the Root Element 00:02:18 Duration
Lecture 10 Using _min-width_height_ & _max-width_height_ 00:05:27 Duration
Lecture 11 Working with _rem_ & _em_ 00:12:46 Duration
Lecture 12 Adding _rem_ to Additional Properties 00:08:16 Duration
Lecture 13 Finishing _rem_ 00:05:21 Duration
Lecture 14 Understanding the Viewport Units _vw_ &_vh_ 00:09:47 Duration
Lecture 15 Windows, Viewport Units & Scrollbars
Lecture 16 Choosing the Right Unit 00:05:30 Duration
Lecture 17 Using _auto_ to Center Elements 00:01:42 Duration
Lecture 18 Cleaning Up our Code 00:01:06 Duration
Lecture 19 Wrap Up 00:04:23 Duration
Lecture 20 Useful Resources & Links

Section 9 : Working with JavaScript & CSS
Lecture 1 Module Introduction 00:01:16 Duration
Lecture 2 Adding a Modal 00:04:13 Duration
Lecture 3 Selecting & Manipulating Styles with JavaScript 00:10:33 Duration
Lecture 4 Adding an Event Listener 00:06:05 Duration
Lecture 5 Adding a Side Navigation Bar 00:07:13 Duration
Lecture 6 Opening and Closing the Hamburger Menu 00:03:57 Duration
Lecture 7 Manipulating Element Classes 00:06:40 Duration
Lecture 8 Understanding Property Notations 00:03:12 Duration
Lecture 9 Cleaning Up our Code 00:05:30 Duration
Lecture 10 Wrap Up 00:01:15 Duration
Lecture 11 Useful Resources & Links

Section 10 : Making our Website Responsive
Lecture 1 Module Introduction 00:01:45 Duration
Lecture 2 Why our Project Should Become Responsive 00:01:45 Duration
Lecture 3 Understanding Hardware Pixels vs 00:10:29 Duration
Lecture 4 Comparing the Viewport Metatag (HTML) and Media Queries (CSS) 00:03:04 Duration
Lecture 5 Understanding the _viewport_ Metatag 00:07:22 Duration
Lecture 6 Designing Websites _Mobile First_ 00:01:54 Duration
Lecture 7 Adding our First Media Queries 00:12:52 Duration
Lecture 8 Things to Keep in Mind when Working with Media Queries 00:08:09 Duration
Lecture 9 Finding the Right Breaking Points 00:03:45 Duration
Lecture 10 Creating the Mobile First Design for our Plans 00:06:37 Duration
Lecture 11 Making the Plans Responsive 00:08:35 Duration
Lecture 12 Your Challenge 00:06:06 Duration
Lecture 13 Working with Logical Operators 00:08:13 Duration
Lecture 14 Improving the Customers Page 00:14:58 Duration
Lecture 15 Improving the Packages Page 00:05:41 Duration
Lecture 16 Cleaning Up the Navigation Bar 00:04:39 Duration
Lecture 17 Positioning our Footer Correctly 00:10:09 Duration
Lecture 18 Wrap Up 00:02:15 Duration
Lecture 19 Useful Resources & Links

Section 11 : Adding & Styling Forms
Lecture 1 Module Introduction 00:01:31 Duration
Lecture 2 Adding the Unstyled Form 00:02:37 Duration
Lecture 3 Page Initialization 00:06:35 Duration
Lecture 4 Understanding Advanced Attribute Selectors 00:06:02 Duration
Lecture 5 Working on the General Layout 00:07:15 Duration
Lecture 6 Restyling the Form Elements 00:06:29 Duration
Lecture 7 Styling the Checkbox 00:06:52 Duration
Lecture 8 Providing Validation Feedback 00:08:50 Duration
Lecture 9 Styling the Signup Button 00:03:41 Duration
Lecture 10 Fixing a Broken Link
Lecture 11 Wrap Up 00:01:29 Duration
Lecture 12 Useful Resources & Links

Section 12 : Working with Text and Fonts
Lecture 1 Module Introduction 00:01:20 Duration
Lecture 2 Comparing Generic Families & Font Families 00:02:56 Duration
Lecture 3 Understanding the Browser Settings 00:06:17 Duration
Lecture 4 Using the Default Font Families 00:06:53 Duration
Lecture 5 Understanding the _font-family_ Syntax 00:06:18 Duration
Lecture 6 Working with Locally Saved Fonts 00:03:50 Duration
Lecture 7 Working with Google Fonts 00:10:28 Duration
Lecture 8 Understanding Font Faces & _font-style_ 00:06:49 Duration
Lecture 9 Importing our Custom Fonts 00:09:03 Duration
Lecture 10 Understanding Font Formats 00:05:40 Duration
Lecture 11 Diving into Font Properties 00:03:10 Duration
Lecture 12 Adding _letter-spacing_ 00:04:43 Duration
Lecture 13 Changing the Line Height 00:06:07 Duration
Lecture 14 Applying _text-decoration_ & _text-shadow_ 00:05:51 Duration
Lecture 15 Understanding the _font_ Shorthand 00:08:39 Duration
Lecture 16 Loading Performance & _font-display_ 00:09:49 Duration
Lecture 17 Wrap Up 00:03:47 Duration
Lecture 18 Useful Resources & Links

Section 13 : Adding Flexbox to our Project
Lecture 1 Optional_ Expert Track Introduction 00:03:23 Duration
Lecture 2 Module Introduction 00:01:31 Duration
Lecture 3 How we Could Improve our Project 00:02:58 Duration
Lecture 4 Understanding Flexbox 00:03:18 Duration
Lecture 5 Creating a Flex Container 00:05:33 Duration
Lecture 6 Using _flex-direction_ & _flex-wrap_ 00:05:35 Duration
Lecture 7 Understanding the Importance of Main Axis & Cross Axis 00:07:27 Duration
Lecture 8 Working with _align-items_ & _justify-content_ 00:10:58 Duration
Lecture 9 And What About _align-content__ 00:02:40 Duration
Lecture 10 Improving the Navigation Bar with Flexbox 00:12:02 Duration
Lecture 11 Your Challenge - Working on the Mobile Navigation Bar 00:04:16 Duration
Lecture 12 Improving the Footer 00:05:35 Duration
Lecture 13 Flexbox and the Z-Index
Lecture 14 [OPTIONAL] Assignment Solution 00:08:32 Duration
Lecture 15 Adding Flexbox to the Customers Page 00:03:16 Duration
Lecture 16 Using the _order_ Property for a Flex Item 00:06:07 Duration
Lecture 17 Working with _align-self_ 00:02:44 Duration
Lecture 18 Understanding _flex-grow_
Lecture 19 Applying _flex-shrink_ 00:03:12 Duration
Lecture 20 Comparing _flex-basis_ vs _width_ & _height_ 00:08:35 Duration
Lecture 21 Wrap Up 00:03:52 Duration
Lecture 22 Useful Resources & Links

Section 14 : Using the CSS Grid
Lecture 1 Module Introduction 00:01:14 Duration
Lecture 2 What is the CSS Grid_ 00:01:27 Duration
Lecture 3 Getting Started 00:02:22 Duration
Lecture 4 Turning a Container into a Grid 00:03:21 Duration
Lecture 5 Defining Columns & Rows 00:05:49 Duration
Lecture 6 Positioning Child Elements in a Grid 00:04:13 Duration
Lecture 7 Using _element-sizing_, _repeat_ & _minmax_ 00:06:45 Duration
Lecture 8 Advanced Element Positioning 00:06:29 Duration
Lecture 9 Working with Named Lines 00:03:53 Duration
Lecture 10 Understanding Column & Row Shorthands 00:02:54 Duration
Lecture 11 Working with Gaps 00:02:33 Duration
Lecture 12 Adding Named Template Areas 00:06:39 Duration
Lecture 13 Creating Automatically Generated Grid Areas 00:07:10 Duration
Lecture 14 Using the Grid on our Project 00:09:10 Duration
Lecture 15 Working with _fit-content_ 00:03:31 Duration
Lecture 16 Positioning Grid Elements 00:03:35 Duration
Lecture 17 Positioning the Entire Grid Content 00:03:17 Duration
Lecture 18 Positioning Elements Individually 00:01:34 Duration
Lecture 19 Understanding Responsive Grid 00:05:30 Duration
Lecture 20 Applying Autoflow 00:06:39 Duration
Lecture 21 Comparing the Explicit & Implicit Grid 00:02:31 Duration
Lecture 22 Understanding _auto-fill_ & _auto-fit_ 00:03:33 Duration
Lecture 23 Creating a Dense Grid 00:03:22 Duration
Lecture 24 Styling the Project Form with Grid 00:09:45 Duration
Lecture 25 Comparing Grid & Flexbox 00:02:27 Duration
Lecture 26 Next Steps 00:01:30 Duration
Lecture 27 Wrap Up 00:03:48 Duration
Lecture 28 Useful Resources & Links

Section 15 : Transforming Elements with CSS Transforms
Lecture 1 Module Introduction 00:00:31 Duration
Lecture 2 Rotating Elements and setting transform-origin 00:03:45 Duration
Lecture 3 Using Rotate and Translate 00:04:57 Duration
Lecture 4 Working with _skew_ and _scale_ 00:06:18 Duration
Lecture 5 Applying Transformation Shorthands 00:02:23 Duration
Lecture 6 Rotating Elements in 3 Dimensions 00:04:19 Duration
Lecture 7 Understanding the _perspective_ Property 00:03:37 Duration
Lecture 8 Moving Elements along the Z-Axis with _translateZ_ 00:03:54 Duration
Lecture 9 Rotating the Container with _transform style_ 00:03:44 Duration
Lecture 10 Flipping Elements & _backface-visibility_ 00:01:15 Duration
Lecture 11 Wrap Up
Lecture 12 Useful Resources & Links

Section 16 : Transitions & Animations in CSS
Lecture 1 Module Introduction 00:00:22 Duration
Lecture 2 Understanding and Applying Transitions 00:07:23 Duration
Lecture 3 CSS _transition_ Property Deep Dive
Lecture 4 Working with Timing Functions 00:02:50 Duration
Lecture 5 Transitions & _display_ 00:06:11 Duration
Lecture 6 Using CSS Animations 00:09:00 Duration
Lecture 7 CSS _animation_ Property Deep Dive
Lecture 8 Adding Multiple Keyframes 00:03:22 Duration
Lecture 9 Adding Animations to our Customers Page 00:03:59 Duration
Lecture 10 Using JavaScript Animation Event Listeners 00:03:24 Duration
Lecture 11 Wrap Up 00:01:34 Duration
Lecture 12 Useful Resources & Links

Section 17 : Writing Future-Proof CSS Code
Lecture 1 Module Introduction 00:00:34 Duration
Lecture 2 CSS Modules & Their Working Groups 00:01:55 Duration
Lecture 3 Using CSS Variables 00:07:31 Duration
Lecture 4 Understanding & Using Vendor Prefixes 00:04:47 Duration
Lecture 5 Which Prefixes Should You Use_ 00:02:57 Duration
Lecture 6 Detecting Browser Support with @supports 00:05:09 Duration
Lecture 7 Polyfills 00:02:45 Duration
Lecture 8 Eliminating Cross-Browser Inconsistencies 00:02:58 Duration
Lecture 9 How to Name CSS Classes 00:04:52 Duration
Lecture 10 Vanilla CSS vs Frameworks 00:08:36 Duration
Lecture 11 Wrap Up 00:04:15 Duration
Lecture 12 Useful Resources & Links

Section 18 : Introducing Sass (Syntactically Awesome Style Sheets)
Lecture 1 Module Introduction 00:00:42 Duration
Lecture 2 What is Sass & Scss_ 00:03:30 Duration
Lecture 3 Important_ Installing Sass
Lecture 4 Installing Sass 00:04:25 Duration
Lecture 5 Things to be Improved with Sass 00:01:33 Duration
Lecture 6 Nesting Selectors 00:06:35 Duration
Lecture 7 Adding Nested Properties 00:01:27 Duration
Lecture 8 Understanding Variables 00:03:05 Duration
Lecture 9 Built-In Functions 00:03:18 Duration
Lecture 10 Adding Simple Arithmetics 00:02:24 Duration
Lecture 11 Adding Better Import and Partials 00:04:46 Duration
Lecture 12 Improving Media Queries 00:02:24 Duration
Lecture 13 Understanding Inheritance 00:03:33 Duration
Lecture 14 Adding Mixins 00:06:44 Duration
Lecture 15 Using the Ampersand Operator 00:02:57 Duration
Lecture 16 Wrap Up 00:01:13 Duration
Lecture 17 Useful Resources & Links