4.71 out of 5
4.71
2030 reviews on Udemy

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

Learn CSS for the first time or brush up your CSS skills and dive in even deeper. EVERY web developer has to know CSS.
Instructor:
Academind by Maximilian Schwarzmüller
12,887 students enrolled
English [Auto-generated] More
Build beautiful websites which don't just contain great content but also look good
Use basic as well as advanced CSS features
Understand the concepts and theory behind CSS and certain CSS features

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.

Talking about the course project – we’ll build the frontend (no backend) of a fictional web hosting company. We’ll have a starting screen which has different sections, we got a responsive design with an animated side-drawer, we got modals and forms and in general we got a lot of CSS animations, font styles and more!

Here’s what’s inside the course in detail – this is all also applied to the mentioned course project:

  • The basics about selectors, combinators and how you set up styling rules in general
  • Properties, values and decalarations
  • How specifity and inheritance work and why it’s called “Cascading” Style Sheets
  • Important theoretical concepts like the “Box Model”
  • How the default position of elements can be changed
  • Styling backgrounds (e.g. gradients) and images
  • Which units and dimensions you typically use in CSS (px, rem, % and more)
  • How JavaScript and CSS interact
  • Responsive design and what “Mobile First” means
  • Styling forms and form inputs
  • Working with text, fonts and text styles
  • Flexbox! How it works and how to use it
  • Using the CSS Grid and how it differs from Flexbox
  • Transforming and animating HTML elements with the help of CSS
  • Writing future-proof CSS with features like CSS variables or best-practice class names
  • Using Sass and what it actually is all about

Is this course for you?

It’s for you if …

  • you started with learning web development and you want to build more beautiful websites
  • you already know CSS but want to dive deeper
  • you’re using CSS in a trial-and-error manner and want to change this (you should!)

You might come back later if …

  • you’re an absolute CSS pro and you know the CSS working group drafts by heart
  • you’re a backend-only developer (Node, PHP, NO HTML or frontend JavaScript)
  • you’re a total newcomer to web development and you don’t know the basics about HTML

If that sounds good to you, we’d be more than happy to welcome you in this course!

Getting Started

1
Introduction

Let me introduce you to this course and to what you'll learn inside of it.

2
What is CSS?

Let's start with the most important question first: What is CSS and why do we need it on our websites?

3
CSS History, Present & Future

CSS constantly evolves so let me give you a quick overview of the past and the current development of CSS!

4
Course Outline

You now know what CSS is but what does the course actually offer you? This lecture will answer that question.

5
Choose Your Track

As noted in the course outline, this course offers multiple tracks. Here's how you reach your favorite one.

6
Course Prerequisites

You know what this courses offers, but what do you need to succeed in this course? Let's have a look at the prerequisites.

7
How To Get The Most Out Of This Course

There's more than one way of taking a course. Let's find out how you can get the most out of this course in this lecture.

8
Recommended Tools

Which tools are we using throughout this course? Time to have a quick look at our code editor and the recommended browser.

9
Where to Find the Source Code

Find out where you can get the course source code.

10
Useful Resources & Links

Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.

Diving Into the Basics of CSS

1
Module Introduction

Let me introduce you to this module and to what you'll learn inside of it.

2
Understanding the Course Project Setup

This is a hands-on course, so we will learn CSS in practice. Time to take a closer look at the starting setup for our course project!

3
Adding CSS to our Project with Inline Styles

We have an index.html file, but how can we add CSS now? Let me show you inline styles and how these allow us to change the look of our website!

4
Understanding the Tag & Creating a .css File

We learned that inline styles are probably not the best way to add CSS code. So let's have a look at two other ways to achieve this and also explain which approach we will follow throughout the course.

5
Applying Additional Styles & Importing Google Fonts

We added CSS and applied some basic styling, but so far the same style is applied to all elements. Time to change that, so let's understand how we can select a specific element and add styles to it. Additionally, we'll import fonts using Google Fonts.

6
Theory Time - Selectors

We learned how to select elements, but we probably need more selectors to style our website individually. Thankfully, we do have more selectors available in CSS, so let's understand classes, IDs and attribute selectors!

7
Understanding the "Cascading" Style & Specificity​

Our website keeps growing, but why are some styles applied and why is this not true for others? Turns out that there are two important concepts that are mainly responsible for that: The "Cascading" nature of CSS and Specificity. But what is the idea behind these?

8
Understanding Inheritance

We understood Specificity so the general styling logic is clear now. Unfortunately not, there is one additional core concept we definitely have to understand: Inheritance. Time to add this to our project and to understand it in this video!

9
Adding Combinators

For the styling of a website it is very important to define the look of the different parts of the website individually, because we definitely do not want our website to have the same style all over. Combinators helps us to achieve that.

10
Theory Time - Combinators

We added the descendant combinator, but there are more combinators available in CSS. Time to dive into these in this theory lecture.

11
Summarizing Properties & Selectors

We learned a lot about the CSS core concepts in this module. Let me quickly summarize what we learned so far about selectors, properties and values!

12
Selectors & Combinators

Do you know how to work with all these selectors and combinators?

13
Time to Practice - The Basics
14
Wrap Up

Let me wrap this module up and summarize what you learned thus far.

15
Useful Resources & Links

Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.

Diving Deeper into CSS

1
Module Introduction

Let me introduce you to this module and to what you'll learn inside of it.

2
Introducing the CSS Box Model

One of the most important concepts to understand is the way CSS interacts with elements in HTML. This concept is called the box model, so let's see if we can find such a box in our project!

3
Understanding the Box Model

Content, padding, border, margin - we found and understood these parts of the box model. Let's now take a closer look at it and also understand the box model concept in connection with parent and child elements.

4
Understanding Margin Collapsing and Removing Default Margins

Why could we observe overlapping margins between two elements? Let's understand why margin collapsing causes this behaviour and how we can remove the default margin from the <body>.

5
Deep Dive on "Margin Collapsing"

Margins of elements can behave unexpectedly - here's a deep dive on the phenomena.

6
Theory Time - Working with Shorthand Properties

Theory time! Throughout this course we already applied a lot of properties. Turns out that we can combine multiple properties in a single one by using a shorthand. Let's understand these shorthands in this video!

7
Applying Shorthands in Practice

Shorthands seem to make writing CSS code a lot easier. Let's try it out and apply some in practice in our project!

8
Diving Into the Height & Width Properties

Styling our website also requires to define the size of our elements. In this video, we will apply the "height" and "width" properties and see how we can use these to change the box size according to our needs.

9
Understanding Box Sizing

We changed the "height" and the "width", but what was actually changed? Let's dive into the "box-sizing" property and also learn, how we can use this property to change the default behaviour of the "height" and "width" properties.

10
Adding the Header to our Project

Let's apply what we learned so far and dive deeper into our project. In this video, it's time to work on the header!

11
Understanding the Display Property

We have two types of elements in HTML - block-level and inline. But is there a way to change the default behaviour of these elements? Turns out it is, so let's find out how we can achieve this and why this might be helpful in certain situations.

12
display: none vs visibility: hidden

There's more than one way of hiding elements on the page. Let's explore the differences between display: none; and visibility: hidden.

13
HTML Refresher: Block-level vs Inline Elements

It's not really a CSS topic (though it's related to it) but it's super important to know. The difference between block-level and inline elements.

14
Applying the Display Property & Styling our Navigation Bar

After we understood the "display" property it's now time to style our navigation bar. For that we'll also use the advantages of the "inline-block" value of this property.

15
Understanding an Unexpected "inline-block" Behaviour

"inline-block" is a really helpful value, but there is one specific behaviour which can cause problems in practice. Let me show you which problem this is and how you can easily solve it.

16
Working with "text-decoration" & "vertical-align"

Let's continue the work in our project and improve the styling of our navigation. For that, we will style links with "text-decoration" and align elements with "vertical-align".

17
Styling Anchor Tags

Styling links is very important as every website contain such. The default styling is not the most beautiful one though, so let's find out how we can improve that.

18
Adding Pseudo Classes

Pseudo classes are a big help to improve the user experience on our website. Why don't we take the chance and apply some pseudo-classes in our project?

19
Theory Time - Pseudo Classes & Pseudo Elements

Time to dive into the theory. We already applied pseudo classes, but which additional values are available and what is the difference between a pseudo class and a pseudo-element? Let's find the answers in this video!

20
Grouping Rules

Sometimes the same rules should be applied to different selectors. Turns out we can avoid repeating these rules again and again by grouping them. Let me show you how this works.

21
Working with "font-weight" & "border"

We constantly improve the look of our website, so let's use "font-weight" to change the default font style of selected elements. In addition to that, it's also time to add some borders.

22
Adding & Styling a CTA-Button

Until now we only have list items in our navigation bar. Wouldn't it be great to have a special CTA-button in a different style? I think it would, so let's add one in this video.

23
Adding a Background Image to our Project

The red block level element in the background is ok, but I think a real background image definitely would improve the user experience. Let's learn how we can easily add such an image in this video!

24
Properties Worth to Remember

Puh, we worked with a lot of properties so far. Of course we don't have to remember every single property, but you will probably use some properties a lot. This short list will help you remembering these.

25
Time to Practice - Diving Deeper into CSS
26
Wrap Up

Let me wrap this module up and summarize what you learned thus far.

27
Useful Resources & Links

Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.

More on Selectors & CSS Features

1
Module Introduction

Let me introduce you to this module and what you'll learn in it.

2
Using Multiple CSS Classes & Combined Selectors

There are a couple of things we can do with CSS classes and selectors in general.

3
Classes or IDs?

Besides class selectors, we can use ID selectors, tag selectors etc. But which one should you use?

4
(Not) using !important

In very, very, very rare cases, you might need to force a certain declaration to overwrite the others, even though it normally wouldn't. Here comes !important.

5
Selecting the Opposite with :not()

Thus far, we always set our rules up to select certain elements. You can also set up rules that DON'T select something.

6
CSS & Browser Support

Not all CSS features are supported by all browsers. This lecture explains how you find out what is supported and what's not.

7
Wrap Up

Let me wrap this module up and summarize what we learned thus far.

8
Rounding up the Basics

We got the very basics of CSS covered. Time to round it up and check if you got them down.

9
Useful Resources & Links

Attached to this lecture, you find the module resources. In the lecture, you find some helpful links.

Practicing the Basics

1
Module Introduction

Let me introduce you to this module and to what you'll learn inside of it.

2
Adding Style to our Plans

Our page gets more and more beautiful, but there is still a lot of content and styling missing. So let's add our different hosting plans and some basic styling in this video!

3
Working on the Recommended Plan

We want our users to focus onto the recommended plan. Let's use our CSS knowledge to highlight this plan!

4
Styling the Badge with "border-radius"

The badge on the recommended plan doesn't stand out so far. Time to add some styling to it, to make clear that this is the plan to choose!

5
Styling our List

All our plans include lists which present the features of the corresponding plan. The bullet points are quite ugly though, so let's remove these and improve the look of our lists!

6
Working on the Title and the Price of our Packages

Let's continue with the title and the price presented on our plans. So far these look pretty unspectacular, time to change that!

7
Improving our Action Button

The action button at the bottom of each box will redirect the user to the plan purchasing page. We want to make sure that our users click these buttons, so some nice button style might be a good idea.

8
Understanding Outlines

We styled our buttons, but if we hover over these we still see an additional blue outline. This is automatically added to the element and definitely something we don't want to be displayed. Let's learn how we can remove it in this video.

9
Presenting the Core Features to the User

Time to add another (unstyled) section, which presents the core advantages of our hosting service to the user!

10
Styling the Headline of the Core Features Section

Let's start styling the new section! A good starting point probably is the headline and the background!

11
Preparing the Content of the Key Feature Area

Time to style the list which includes our core website features. As these are presented as list items, we can apply our previous knowledge to change the list style. Additionally, we should align the features.

12
Adding the Footer

We reached the end of our starting page - time to add a footer. Let's learn how we can easily add one in this video!

13
What we Achieved so Far

We finished (at least partially) our starting page. So let's think about what we achieved so far and how we can continue. Because one page probably is not enough...

14
Adding the Packages Page

Time to add more content, this time for the packages page. We know how this works, so let's add the HTML code and apply some basic styling to get started.

15
Your Challenge

Now it's your turn! You learned a lot so far, so let's take the chance and practice what we learned. Style the page on your own and try to achieve the result shown in this video!

16
Styling the Links

How did I solve it? Let me show you my solution in this video and let's start with the styling of our links.

17
Styling our Package Boxes

The links look fine, but the different plans also need individual styles. Time to add these in this video!

18
Adding "float" to our Package

Until now the plans are displayed according to the document flow, but we would prefer to display one plan aligned to the right part of the page. How could we achieve this?

19
Fixing the Hover Effect

With "float" being applied, the free plan is positioned correctly, but the hover effect doesn't work correctly any more. Let me show you how to easily fix that in this video.

20
Adding the Final Touches

This was a lot of work, but we now finished two pages - great job! Let's fix some minor issues before we dive deeper into positioning in the next module to further improve the look of our website!

21
Useful Resources & Links

Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.

Positioning Elements with CSS

1
Module Introduction

Let me introduce you to this module and to what you'll learn inside of it.

2
Why Positioning will Improve our Website

Before we dive deeper - why is positioning elements important when creating a website? Let's take a look at our website and identify potential areas of improvement for the position of our elements!

3
Understanding Positioning - The Theory

How does positioning work? Let's recap the default behaviour of elements and understand how the "position" property can be used to change the default position of elements.

4
Working with the "fixed" Value

We understood that we can apply different values to the "position" property. Let's take a closer look at the "fixed" value, understand its positioning context and the impact on the document flow it has on the element it is applied to.

5
Creating a Fixed Navigation Bar

We already have a navigation bar on our website, but as soon as we scroll down the bar disappears. Let's understand how we can stick the navigation bar to the viewport with the "fixed" value.

6
Using "position" to Add a Background Image

The navigation bar works, but we also need a background image for our Packages page. Turns out that the "fixed" value can also be very helpful is this situation, so let's find our more.

7
Understanding the Z-Index

We added the background image but the remaining elements are hidden below it. Why isn't there a property that allows us to change the element order along the z-axis? Thankfully the "z-index" does exactly that, so time to understand and apply it!

8
Adding a Badge to our Package

The "Plus" plan is the #1 choice for our customers and our recommendation. Why don't we add a badge to this package which indicates exactly what? Let me show you how the "absolute" and "relative" values work together and make the positioning of the badge a breeze!

9
Styling & Positioning our Badge with "absolute" and "relative"

We added the badge but the positioning is not perfect yet and we definitely need to add more style to it. So let's continue!

10
Diving Deeper into Relative Positioning

The "relative" value was very helpful to position the badge, but did we really understand how it works? Let's dive deeper and find out more about its positioning context and its impact on the positioning context on the element it is applied to.

11
Are you a "position" expert?

We learned a lot about the position property in this module so far. Let's now practice this knowledge in this quiz before we continue!

12
Working with "overflow" and Relative Positioning

With "relative" we can move our element without any limitations - even outside of its parent. In case this is our intention that's ok, but what if we want to make the element invisible once it leaves the parent element? Then we need "overflow"...

You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.7
4.7 out of 5
2030 Ratings

Detailed Rating

Stars 5
1508
Stars 4
442
Stars 3
68
Stars 2
10
Stars 1
6
75ed8a771a7a90297da269b680ea86db
30-Day Money-Back Guarantee

Includes

23 hours on-demand video
28 articles
Full lifetime access
Access on mobile and TV
Certificate of Completion
Demos
Support Customization Buy $0