on-demand course

CSS - The Complete Guide (incl. Flexbox, Grid and Sass)

with Academind by Maximilian Schwarzmüller GmbH

November 2018

Beginner

20h 42m

English

Packt Publishing

Closed Captioning available in English

Watch now

Unlock full access

Includes

Earns Badge

Course outline

Introduction
1m 31s
What is CSS?
3m 0s
CSS History, Present & Future
1m 51s
Course Outline
4m 35s
Course Prerequisites
43s
How To Get The Most Out Of This Course
1m 48s
Recommended Tools
1m 27s
Module Introduction
56s
Understanding the Course Project Setup
2m 45s
Adding CSS to our Project with Inline Styles
3m 53s
Understanding the style Tag & Creating a .css File
6m 27s
Applying Additional Styles & Importing Google Fonts
6m 52s
Theory Time - Selectors
8m 57s
Understanding the "Cascading" Style & Specificity
8m 15s
Understanding Inheritance
5m 48s
Adding Combinators
6m 16s
Theory Time - Combinators
5m 42s
Summarizing Properties & Selectors
3m 50s
Wrap Up
2m 2s
Module Introduction
1m 20s
Introducing the CSS Box Model
3m 36s
Understanding the Box Model
3m 2s
Understanding Margin Collapsing and Removing Default Margins
3m 6s
Theory Time - Working with Shorthand Properties
3m 48s
Applying Shorthands in Practice
2m 5s
Diving Into the Height & Width Properties
6m 8s
Understanding Box Sizing
6m 43s
Adding the Header to our Project
5m 38s
Understanding the Display Property
7m 13s
Applying the Display Property & Styling our Navigation Bar
6m 54s
Understanding an Unexpected "inline-block" Behaviour
2m 4s
Working with "text-decoration" & "vertical-align"
4m 55s
Styling Anchor Tags
4m 0s
Adding Pseudo Classes
1m 48s
Theory Time - Pseudo Classes & Pseudo Elements
5m 38s
Grouping Rules
1m 15s
Working with "font-weight" & "border"
2m 4s
Adding & Styling a CTA-Button
4m 10s
Adding a Background Image to our Project
1m 50s
Properties Worth to Remember
1m 29s
Wrap Up
2m 32s
Module Introduction
42s
Using Multiple CSS Classes & Combined Selectors
7m 10s
Classes or IDs?
4m 6s
(Not) using! Important
3m 15s
Selecting the Opposite with: not()
3m 30s
CSS & Browser Support
3m 51s
Wrap Up
1m 6s
Module Introduction
38s
Adding Style to our Plans
8m 34s
Working on the Recommended Plan
6m 34s
Styling the Badge with "border-radius"
3m 22s
Styling our List
3m 3s
Working on the Title and the Price of our Packages
4m 34s
Improving our Action Button
6m 40s
Understanding Outlines
2m 17s
Presenting the Core Features to the User
1m 22s
Styling the Headline of the Core Features Section
3m 39s
Preparing the Content of the Key Feature Area
7m 16s
Adding the Footer
6m 50s
What we achieved so Far
1m 46s
Adding the Packages Page
6m 25s
Your Challenge
1m 32s
Styling the Links
3m 55s
Styling our Package Boxes
7m 15s
Adding "float" to our Package
5m 15s
Fixing the Hover Effect
4m 11s
Adding the Final Touches
3m 2s
Module Introduction
2m 44s
Why Positioning will improve our Website
2m 33s
Understanding Positioning - The Theory
5m 55s
Working with the "fixed" Value
9m 51s
Creating a Fixed Navigation Bar
3m 54s
Using "position" to Add a Background Image
6m 3s
Understanding the Z-Index
7m 0s
Adding a Badge to our Package
8m 1s
Styling & Positioning our Badge with "absolute" and "relative"
3m 10s
Diving Deeper into Relative Positioning
4m 3s
Working with "overflow" and Relative Positioning
4m 18s
Introducing "sticky" Positioning
6m 53s
Understanding the Stacking Context
5m 53s
Wrap Up
4m 12s
Optional: Advanced Track Introduction
2m 22s
Module Introduction
1m 6s
Understanding "background-size"
8m 41s
Working with "background-position"
5m 0s
The "background" Shorthand - Theory
2m 12s
Applying "background" Origin, Clip & Attachment
5m 52s
Using the "background" Shorthand on our Project
2m 19s
Styling Images
7m 33s
Adding the Customers Page to our Website
3m 19s
Working on the Image Layout
8m 8s
Understanding Linear Gradients
6m 17s
Applying Radial Gradients
5m 41s
Stacking Multiple Backgrounds
4m 51s
Understanding Filters
4m 1s
Adding & Styling SVGs - The Basics
4m 20s
Wrap Up
2m 15s
Module Introduction
2m 36s
What's Wrong With Our Project Units?
5m 22s
Where Units Matter
6m 3s
An Overview of Available Sizes & Units
4m 25s
Rules to Remember: Fixed Positioning & "%"
4m 15s
Rules to Remember: Absolute Positioning & "%"
8m 14s
Rules to Remember: Relative / Static Positioning & "%"
8m 53s
Fixing the Height 100% Issue
12m 2s
Defining the Font Size in the Root Element
2m 19s
Using "min-width/height" & "max-width/height"
5m 28s
Working with "rem" & "em"
12m 47s
Adding "rem" to Additional Properties
8m 17s
Finishing "rem"
5m 21s
Understanding the Viewport Units "vw" &"vh"
9m 48s
Choosing the Right Unit
5m 30s
Using "auto" to Center Elements
1m 43s
Cleaning Up our Code
1m 6s
Wrap Up
4m 24s
Module Introduction
1m 16s
Adding a Modal
4m 14s
Selecting & Manipulating Styles with JavaScript
10m 34s
Adding an Event Listener
6m 5s
Adding a Side Navigation Bar
7m 14s
Opening and Closing the Hamburger Menu
3m 57s
Manipulating Element Classes
6m 40s
Understanding Property Notations
3m 13s
Cleaning Up our Code
5m 31s
Wrap Up
1m 15s
Module Introduction
1m 45s
Why our Project Should Become Responsive
2m 26s
Understanding Hardware Pixels vs. Software Pixels
10m 29s
Comparing the Viewport Metatag (HTML) and Media Queries (CSS)
3m 5s
Understanding the "viewport" Metatag
7m 23s
Designing Websites "Mobile First"
1m 55s
Adding our First Media Queries
12m 52s
Things to Keep in Mind when Working with Media Queries
8m 10s
Finding the Right Breaking Points
3m 45s
Creating the Mobile First Design for our Plans
6m 38s
Making the Plans Responsive
8m 36s
Your Challenge
6m 6s
Working with Logical Operators
8m 14s
Improving the Customers Page
14m 58s
Improving the Packages Page
5m 41s
Cleaning Up the Navigation Bar
4m 39s
Positioning our Footer Correctly
10m 10s
Wrap Up
2m 15s

Content preview from CSS - The Complete Guide (incl. Flexbox, Grid and Sass)

Adding Mixins

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Start your free trial

Modern HTML and CSS From The Beginning (Including Sass)

Brad Traversy

CSS Bootcamp: Master CSS (Including CSS Grid/Flexbox)

George Lomidze

50 Projects in 50 Days - HTML, CSS, and JavaScript

Brad Traversy, Florin Pop

CSS: The Definitive Guide, 5th Edition

Eric Meyer, Estelle Weyl

Publisher Resources

ISBN: 9781789954692Supplemental Content

CSS - The Complete Guide (incl. Flexbox, Grid and Sass)

with Academind by Maximilian Schwarzmüller GmbH

Chapter 1 : Getting Started

Chapter 2 : Diving Into the Basics of CSS

Chapter 3 : Diving Deeper into CSS

Chapter 4 : More on Selectors & CSS Features

Chapter 5 : Practicing the Basics

Chapter 6 : Positioning Elements with CSS

Chapter 7 : Understanding Background Images & Images

Chapter 8 : Sizes & Units

Chapter 9 : Working with JavaScript & CSS

Chapter 10 : Making our Website Responsive

Chapter 11 : Adding & Styling Forms

Chapter 12 : Working with Text and Fonts

Chapter 13 : Adding Flexbox to our Project

Chapter 14 : Using the CSS Grid

Chapter 15 : Transforming Elements with CSS Transforms

Chapter 16 : Transitions & Animations in CSS

Chapter 17 : Writing Future-Proof CSS Code

Chapter 18 : Introducing Sass (Syntactically Awesome Style Sheets)

Chapter 19 : Course Roundup

Content preview from CSS - The Complete Guide (incl. Flexbox, Grid and Sass)

Adding Mixins

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

You might also like

Modern HTML and CSS From The Beginning (Including Sass)

CSS Bootcamp: Master CSS (Including CSS Grid/Flexbox)

50 Projects in 50 Days - HTML, CSS, and JavaScript

CSS: The Definitive Guide, 5th Edition

Publisher Resources

Chapter 1 : Getting Started

Chapter 2 : Diving Into the Basics of CSS

Chapter 3 : Diving Deeper into CSS

Chapter 4 : More on Selectors & CSS Features

Chapter 5 : Practicing the Basics

Chapter 6 : Positioning Elements with CSS

Chapter 7 : Understanding Background Images & Images

Chapter 8 : Sizes & Units

Chapter 9 : Working with JavaScript & CSS

Chapter 10 : Making our Website Responsive

Chapter 11 : Adding & Styling Forms

Chapter 12 : Working with Text and Fonts

Chapter 13 : Adding Flexbox to our Project

Chapter 14 : Using the CSS Grid

Chapter 15 : Transforming Elements with CSS Transforms

Chapter 16 : Transitions & Animations in CSS

Chapter 17 : Writing Future-Proof CSS Code

Chapter 18 : Introducing Sass (Syntactically Awesome Style Sheets)

Chapter 19 : Course Roundup

Content preview from CSS - The Complete Guide (incl. Flexbox, Grid and Sass)

Adding Mixins

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,and much more.

You might also like

Modern HTML and CSS From The Beginning (Including Sass)

CSS Bootcamp: Master CSS (Including CSS Grid/Flexbox)

50 Projects in 50 Days - HTML, CSS, and JavaScript

CSS: The Definitive Guide, 5th Edition

Publisher Resources

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.