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

CSS - short for Cascading Style Sheets - is a "programming language" you use to turn your raw HTML pages into real beautiful websites. This course covers it all - we start at the very basics (What...

  • All levels
  • English

Course Description

CSS - short for Cascading Style Sheets - is a "programming language" you use to turn your raw HTML pages into real beautiful websites. This course covers it all - we start at the very basics (What is CSS? How does it work? How do you use it)? and gradually dive in deeper and deeper. And we do this by showing both practical examples as well as the theory behind it. Getting started with CSS mi...

CSS - short for Cascading Style Sheets - is a "programming language" you use to turn your raw HTML pages into real beautiful websites. This course covers it all - we start at the very basics (What is CSS? How does it work? How do you use it)? and gradually dive in deeper and deeper. And we do this by showing both practical examples as well as the theory behind it. Getting started with CSS might look easy but there actually is a lot of depth to CSS - hence this course provides different "Tracks" or "Entry points" to exactly meet your demands and reflect you current knowledge level: The Basics Track: Start from scratch, learn CSS from the ground up. You start with lecture 1 and simply follow through to the end. The Advanced Track: You already know the CSS basics, you know what selectors are and how it works but you want to dive in deeper and learn some advanced features and usages. The Expert Track: You got the advanced knowledge, too, but you want to dive into things like Flexbox, CSS Grid, CSS Variables or Sass. This track is for you. Of course this course offers the theory and practical examples - we'll build an entire real course project throughout the course - but there also are multiple assignments, quizzes and challenges for you to practice individual concepts taught throughout the course.

What you’ll learn
  • The Basics Track: Start from scratch, learn CSS from the ground up. You start with lecture 1 and simply follow through to the end.
  • The Advanced Track: You already know the CSS basics, you know what selectors are and how it works but you want to dive in deeper and learn some advanced features and usages.
  • The Expert Track: You got the advanced knowledge, too, but you want to dive into things like Flexbox, CSS Grid, CSS Variables or Sass. This track is for you.

Covering Topics

1
Section 1 : Getting Started

2
Section 2 : Diving Into the Basics of CSS

3
Section 3 : Diving Deeper into CSS

4
Section 4 : More on Selectors & CSS Features

5
Section 5 : Practicing the Basics

6
Section 6 : Positioning Elements with CSS

7
Section 7 : Understanding Background Images & Images

8
Section 8 : Sizes & Units

9
Section 9 : Working with JavaScript & CSS

10
Section 10 : Making our Website Responsive

Curriculum

      Section 1 : Getting Started
    1
    Introduction Preview
    2
    What is CSS?
    3
    CSS History, Present & Future
    4
    Course Outline
    5
    Course Prerequisites Preview
    6
    How To Get The Most Out Of This Course
    7
    Recommended Tools
      Section 2 : Diving Into the Basics of CSS
    8
    Module Introduction
    9
    Understanding the Course Project Setup
    10
    Adding CSS to our Project with Inline Styles
    11
    Understanding the style Tag & Creating a .css File
    12
    Applying Additional Styles & Importing Google Fonts
    13
    Theory Time - Selectors Preview
    14
    Understanding the "Cascading" Style & Specifity
    15
    Understanding Inheritance
    16
    Adding Combinators
    17
    Theory Time - Combinators
    18
    Summarizing Properties & Selectors
    19
    Wrap Up
      Section 3 : Diving Deeper into CSS
    20
    Module Introduction Preview
    21
    Introducing the CSS Box Model
    22
    Understanding the Box Model
    23
    Understanding Margin Collapsing and Removing Default Margins
    24
    Theory Time - Working with Shorthand Properties
    25
    Applying Shorthands in Practice
    26
    Diving Into the Height & Width Properties
    27
    Understanding Box Sizing Preview
    28
    Adding the Header to our Project
    29
    Understanding the Display Property
    30
    Applying the Display Property & Styling our Navigation Bar
    31
    Understanding an Unexpected "inline-block" Behaviour
    32
    Working with "text-decoration" & "vertical-align"
    33
    Styling Anchor Tags
    34
    Adding Pseudo Classes
    35
    Theory Time - Pseudo Classes & Pseudo Elements
    36
    Grouping Rules
    37
    Working with "font-weight" & "border"
    38
    Adding & Styling a CTA-Button
    39
    Adding a Background Image to our Project
    40
    Properties Worth to Remember
    41
    Wrap Up
      Section 4 : More on Selectors & CSS Features
    42
    Module Introduction Preview
    43
    Using Multiple CSS Classes & Combined Selectors
    44
    Classes or IDs?
    45
    (Not) using !important
    46
    Selecting the Opposite with :not()
    47
    CSS & Browser Support
    48
    Wrap Up
      Section 5 : Practicing the Basics
    49
    Module Introduction Preview
    50
    Adding Style to our Plans
    51
    Working on the Recommended Plan
    52
    Styling the Badge with "border-radius"
    53
    Styling our List
    54
    Working on the Title and the Price of our Packages
    55
    Improving our Action Button
    56
    Understanding Outlines
    57
    Presenting the Core Features to the User
    58
    Styling the Headline of the Core Features Section
    59
    Preparing the Content of the Key Feature Area
    60
    Adding the Footer
    61
    What we Achieved so Far
    62
    Adding the Packages Page
    63
    Your Challenge
    64
    Styling the Links
    65
    Styling our Package Boxes
    66
    Adding "float" to our Package
    67
    Fixing the Hover Effect
    68
    Adding the Final Touches
      Section 6 : Positioning Elements with CSS
    69
    Module Introduction
    70
    Why Positioning will Improve our Website
    71
    Understanding Positioning - The Theory
    72
    Working with the "fixed" Value
    73
    Creating a Fixed Navigation Bar
    74
    Using "position" to Add a Background Image
    75
    Understanding the Z-Index
    76
    Adding a Badge to our Package
    77
    Styling & Positioning our Badge with "absolute" and "relative"
    78
    Diving Deeper into Relative Positioning
    79
    Working with "overflow" and Relative Positioning
    80
    Introducing "sticky" Positioning
    81
    Understanding the Stacking Context
    82
    Wrap Up
      Section 7 : Understanding Background Images & Images
    83
    Optional: Advanced Track Introduction
    84
    Module Introduction
    85
    Understanding "background-size"
    86
    Working with "background-position"
    87
    The "background" Shorthand - Theory
    88
    Applying "background" Origin, Clip & Attachment
    89
    Using the "background" Shorthand on our Project
    90
    Styling Images
    91
    Adding the Customers Page to our Website
    92
    Working on the Image Layout
    93
    Understanding Linear Gradients
    94
    Applying Radial Gradients
    95
    Stacking Multiple Backgrounds
    96
    Understanding Filters
    97
    Adding & Styling SVGs - The Basics
    98
    Wrap Up
      Section 8 : Sizes & Units
    99
    Module Introduction
    100
    What's Wrong With Our Project Units?
    101
    Where Units Matter
    102
    An Overview of Available Sizes & Units
    103
    Rules to Remember: Fixed Positioning & "%"
    104
    Rules to Remember: Absolute Positioning & "%"
    105
    Rules to Remember: Relative / Static Positioning & "%"
    106
    Fixing the Height 100% Issue
    107
    Defining the Font Size in the Root Element
    108
    Using "min-width/height" & "max-width/height"
    109
    Working with "rem" & "em"
    110
    Adding "rem" to Additional Properties
    111
    Finishing "rem"
    112
    Understanding the Viewport Units "vw" &"vh"
    113
    Choosing the Right Unit
    114
    Using "auto" to Center Elements
    115
    Cleaning Up our Code
    116
    Wrap Up
      Section 9 : Working with JavaScript & CSS
    117
    Module Introduction
    118
    Adding a Modal
    119
    Selecting & Manipulating Styles with JavaScript
    120
    Adding an Event Listener
    121
    Adding a Side Navigation Bar
    122
    Opening and Closing the Hamburger Menu
    123
    Manipulating Element Classes
    124
    Understanding Property Notations
    125
    Cleaning Up our Code
    126
    Wrap Up
      Section 10 : Making our Website Responsive
    127
    Module Introduction
    128
    Why our Project Should Become Responsive
    129
    Understanding Hardware Pixels vs. Software Pixels
    130
    Comparing the Viewport Metatag (HTML) and Media Queries (CSS)
    131
    Understanding the "viewport" Metatag
    132
    Designing Websites "Mobile First"
    133
    Adding our First Media Queries
    134
    Things to Keep in Mind when Working with Media Queries
    135
    Finding the Right Breaking Points
    136
    Creating the Mobile First Design for our Plans
    137
    Making the Plans Responsive
    138
    Your Challenge
    139
    Working with Logical Operators
    140
    Improving the Customers Page
    141
    Improving the Packages Page
    142
    Cleaning Up the Navigation Bar
    143
    Positioning our Footer Correctly
    144
    Wra

Frequently Asked Questions

It is an online tutorial that covers a specific part of a topic in several sections. An Expert teaches the students with theoretical knowledge as well as with practical examples which makes it easy for students to understand.

A Course helps the user understand a specific part of a concept. While a path and E-Degrees are broader aspects and help the user understand more than just a small area of the concept.

A Course will help you understand any particular topic. For instance, if you are a beginner and want to learn about the basics of any topic in a fluent manner within a short period of time, a Course would be best for you to choose.

We have an inbuilt question-answer system to help you with your queries. Our support staff will be answering all your questions regarding the content of the Course.