CSS - The Complete Guide (incl. Flexbox, Grid & Sass)
4.7 (3,343 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
19,087 students enrolled

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.
Bestseller
4.7 (3,343 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
19,087 students enrolled
Created by Academind by Maximilian Schwarzmüller, Maximilian Schwarzmüller, Manuel Lorenz
Last updated 4/2019
English
English [Auto-generated], Indonesian [Auto-generated], 6 more
  • Italian [Auto-generated]
  • Polish [Auto-generated]
  • Portuguese [Auto-generated]
  • Romanian [Auto-generated]
  • Spanish [Auto-generated]
  • Thai [Auto-generated]
Preview this course
CSS - The Complete Guide (incl. Flexbox, Grid & Sass)
Current price: $11.99 Original price: $199.99 Discount: 94% off
Buy now
30-Day Money-Back Guarantee
This course includes
  • 22.5 hours on-demand video
  • 29 articles
  • 302 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to Udemy's top 3,000+ courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • 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

Requirements
  • You should know the very basics about HTML and web development in general
  • NO advanced HTML or web development knowledge is required though
  • NO CSS knowledge is required at all! You'll learn it all in this 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 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!

Who this course is for:
  • Anyone who wants to learn CSS for the first time or wants to sharpen his or her CSS skills
  • Anyone who's excited to learn about the latest CSS features like Flexbox, CSS Grid or CSS Variables
  • Anyone who knows CSS but wants to dive deeper
Featured review
Harvey Botero
Harvey Botero ( 21 courses, 7 reviews )
11 months ago
I loved the way they explain, I knew some CSS after working with it for more than 4 years, but it is always good to recheck concepts and learn new things, Sometimes it was a little repetitive, but is good for people who are doing it from scratch.
Course content
Expand all 294 lectures 22:37:57
+ – Getting Started
10 lectures 16:41

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

Introduction
Preview 01:39

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

What is CSS?
Preview 02:59

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

CSS History, Present & Future
Preview 01:50

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

Course Outline
Preview 04:34

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

Choose Your Track
00:28

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

Course Prerequisites
Preview 00:43

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.

How To Get The Most Out Of This Course
Preview 02:49

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

Recommended Tools
Preview 01:26

Find out where you can get the course source code.

Where to Find the Source Code
00:07

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

Useful Resources & Links
00:05
+ – Diving Into the Basics of CSS
13 lectures 01:01:46

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

Module Introduction
00:55

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!

Understanding the Course Project Setup
02:44

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!

Adding CSS to our Project with Inline Styles
03:53

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.

Understanding the <style> Tag & Creating a .css File
06:27

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.

Applying Additional Styles & Importing Google Fonts
06:51

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!

Theory Time - Selectors
08:56

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?

Understanding the "Cascading" Style & Specificity​
08:14

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!

Understanding Inheritance
05:47

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.

Adding Combinators
06:16

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

Theory Time - Combinators
05:42

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!

Summarizing Properties & Selectors
03:49

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

Selectors & Combinators
5 questions
You already learned a lot about the core features of CSS, now it's time to practice!
Time to Practice - The Basics
1 question

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

Wrap Up
02:02

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

Useful Resources & Links
00:10
+ – Diving Deeper into CSS
26 lectures 01:24:25

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

Module Introduction
01:19

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!

Introducing the CSS Box Model
03:36

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.

Understanding the Box Model
03:01

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>.

Understanding Margin Collapsing and Removing Default Margins
03:05

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

Deep Dive on "Margin Collapsing"
01:17

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!

Theory Time - Working with Shorthand Properties
03:48

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

Applying Shorthands in Practice
02:05

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.

Diving Into the Height & Width Properties
06:07

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.

Understanding Box Sizing
06:43

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!

Adding the Header to our Project
05:37

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.

Understanding the Display Property
07:12

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

display: none vs visibility: hidden
00:44

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.

HTML Refresher: Block-level vs Inline Elements
01:09

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.

Applying the Display Property & Styling our Navigation Bar
06:53

"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.

Understanding an Unexpected "inline-block" Behaviour
02:03

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".

Working with "text-decoration" & "vertical-align"
04:54

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.

Styling Anchor Tags
04:00

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?

Adding Pseudo Classes
01:47

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!

Theory Time - Pseudo Classes & Pseudo Elements
05:38

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.

Grouping Rules
01:14

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.

Working with "font-weight" & "border"
02:04

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.

Adding & Styling a CTA-Button
04:09

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!

Adding a Background Image to our Project
01:50

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.

Properties Worth to Remember
01:29
We are making a very good progress, time to test the knowledge you gained in this module!
Time to Practice - Diving Deeper into CSS
1 question

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

Wrap Up
02:31

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

Useful Resources & Links
00:09
+ – More on Selectors & CSS Features
8 lectures 23:43

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

Module Introduction
00:41

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

Using Multiple CSS Classes & Combined Selectors
07:09

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

Classes or IDs?
04:05

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.

(Not) using !important
03:15

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

Selecting the Opposite with :not()
03:29

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

CSS & Browser Support
03:51

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

Wrap Up
01:06

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

Rounding up the Basics
4 questions

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

Useful Resources & Links
00:07
+ – Practicing the Basics
21 lectures 01:28:01

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

Module Introduction
00:37

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!

Adding Style to our Plans
08:34

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

Working on the Recommended Plan
06:33

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!

Styling the Badge with "border-radius"
03:22

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!

Styling our List
03:03

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

Working on the Title and the Price of our Packages
04:33

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.

Improving our Action Button
06:40

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.

Understanding Outlines
02:17

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

Presenting the Core Features to the User
01:22

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

Styling the Headline of the Core Features Section
03:38

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.

Preparing the Content of the Key Feature Area
07:15

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!

Adding the Footer
06:49

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...

What we Achieved so Far
01:46

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.

Adding the Packages Page
06:24

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!

Your Challenge
01:31

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

Styling the Links
03:55

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

Styling our Package Boxes
07:15

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?

Adding "float" to our Package
05:14

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.

Fixing the Hover Effect
04:11

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!

Adding the Final Touches
03:01

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

Useful Resources & Links
00:01
+ – Positioning Elements with CSS
15 lectures 01:14:34

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

Module Introduction
02:44

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!

Why Positioning will Improve our Website
02:32

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.

Understanding Positioning - The Theory
05:54

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.

Working with the "fixed" Value
09:50

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.

Creating a Fixed Navigation Bar
03:54

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.

Using "position" to Add a Background Image
06:03

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!

Understanding the Z-Index
06:59

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!

Adding a Badge to our Package
08:00

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!

Styling & Positioning our Badge with "absolute" and "relative"
03:10

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.

Diving Deeper into Relative Positioning
04:03

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!

Are you a "position" expert?
4 questions

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"...

Working with "overflow" and Relative Positioning
04:17

Time to have a look at "sticky" positioning, combining the advantages of "fixed" and "relative". How it works? Let's have a look in an example project.

Introducing "sticky" Positioning
06:53

The "z-index" allows us to define the element position along the z-axis. But we should not be able to position children of our parent above our parent's neighbours. With the Stacking Context we can easily control that.

Understanding the Stacking Context
05:53
Let's practice what we learned about Positioning in CSS!
Time to Practice - Positioning
1 question

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

Wrap Up
04:12

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

Useful Resources & Links
00:10
+ – Understanding Background Images & Images
17 lectures 01:13:55

You already knew the CSS basics before and just wanted to enhance this knowledge? Then this is your starting point for this course, so let me give you a quick overview of what we achieved up to this point in the beginner's track!

Optional: Advanced Track Introduction
02:22

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

Module Introduction
01:06

When working with backgrounds, we often want to change the size of background images. Learn more about the helpful background-size property.

Understanding "background-size"
08:41

Changing the size of a background-image is nice but positioning it would also be awesome, wouldn't it? Let's dive into that topic in this module.

Working with "background-position"
05:00

Now that we had a closer look at some background properties, let's explorer a shorter version of defining them.

The "background" Shorthand - Theory
02:12

We got more background properties - let's explore them all!

Applying "background" Origin, Clip & Attachment
05:51

With all background properties explored, it's now time to learn the final form of the background shorthand property.

Using the "background" Shorthand on our Project
02:19

We're not limited to styling background images - normal images can be styled, too.

Styling Images
07:33

Time to continue working on the content of our web page. In this lecture, we'll add a brand new page to it: The customers page.

Adding the Customers Page to our Website
03:19

With our page growing, let's now continue working on the image layout.

Working on the Image Layout
08:07

Enough about images! We can also create gradients in CSS. Let's dive into linear gradients in this lecture.

Understanding Linear Gradients
06:16

Linear gradients aren't everything - time to explore radial ones.

Applying Radial Gradients
05:41

Did you know that you could stack background images in CSS? Let's take advantage of that.

Stacking Multiple Backgrounds
04:50

Gradients, images - so many ways to adjust the visuals of our page. Let's add one additional feature: Filters!

Understanding Filters
04:00

Thus far, we worked with bitmap images. We can also use and style (!) SVGs. Time for a first introduction.

Adding & Styling SVGs - The Basics
04:20

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

Wrap Up
02:14

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

Useful Resources & Links
00:04
+ – Sizes & Units
20 lectures 01:49:16

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

Module Introduction
02:35

Our website doesn't look bad and thus far we only used pixels ("px") and percentages ("%") to define the width, padding, font-size, etc. What's wrong with that approach? Let me show you why we might want to improve that...

What's Wrong With Our Project Units?
05:21

Which additional units do we have and are there any core properties these can be applied to? Let's have a look in this lecture.

Where Units Matter
06:02

So we have a lot more units to apply, but can we categorize these to get a better overview? Yes we can so time to have a look at the categories in this video!

An Overview of Available Sizes & Units
04:24

Ok, we applied the "%" unit in our project but apparently we didn't fully understand it. And why is the "position" property important again? A lot of questions, so let's find answers - starting with the "fixed" value!

Rules to Remember: Fixed Positioning & "%"
04:15

The "fixed" value and the viewport, we understood that. But what about "absolute", what is the containing block and how does our element behave when we apply "position: absolute"?

Rules to Remember: Absolute Positioning & "%"
08:14

Two more values left to fully understand the "%" unit. Let's dive into "relative" and "static" and see how these affect the containing block.

Rules to Remember: Relative / Static Positioning & "%"
08:53

"%" are clear now, but why doesn't "height: 100%" work as intended? Turns out that we need a workaround to be able to inherit the height from our parent element in certain situations. Let's have a look!

Fixing the Height 100% Issue
12:02

Do we have to define a specific font size in our root element (the HTML element)? Let me explain which options we have and which approach we will follow throughout this course.

Defining the Font Size in the Root Element
02:18

Our website is not responsive yet, we'll have an entire module to understand and add responsive design. But having a first look at the "min" & "max" properties for "width" and "height" is definitely a good idea to complete our understanding of the "%" unit.

Using "min-width/height" & "max-width/height"
05:27

Time to introduce new units - "rem" & "em". These always refer to the font-size and therefore allow us to make our styling more dynamic depending on the font-size chosen by our visitors. Let me show you how this works.

Working with "rem" & "em"
12:47

"rem" and "em" depend on the font-size but their application is not limited to this single property. Let's see how we can add "rem" to other properties than "font-size" on our website.

Adding "rem" to Additional Properties
08:17

You finished your challenge - so let's have a look at the other .css files and exchange "px" with "rem".

Finishing "rem"
05:21

Time to introduce the last units - "vw" and "vh" allow us to easily define the size of our element based on the viewport. Let's understand how this works and what we can do with "vmin" and "vmax".

Understanding the Viewport Units "vw" &"vh"
09:47

After adding viewport units,, scrollbars are displayed on Windows machines (on Mac this is not an issue). Let me show you how to get rid of these in this article.

Windows, Viewport Units & Scrollbars
00:47

Puh, these were a lot of new units, but which one should we use in which situation? Let me help you by providing some guidance in this lecture!

Choosing the Right Unit
05:30

Time for a quick tip: We already used the "auto" value throughout the course, but now it's time to take a closer look and understand why it helped us to center elements easily!

Using "auto" to Center Elements
01:42

We are almost done, let's have a final look and see if we have to clean up our code and if all units are applied correctly.

Cleaning Up our Code
01:06

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

Wrap Up
04:23

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

Useful Resources & Links
00:05
+ – Working with JavaScript & CSS
11 lectures 50:00

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

Module Introduction
01:16

A modal element is a typically feature to add to a web page. It depends heavily on CSS but also on JavaScript. Learn more about how you can show and hide it via JavaScript in this module.

Adding a Modal
04:13

In the end, it's all about manipulating DOM element styles via JavaScript. Let's dive deeper into that in this lecture.

Selecting & Manipulating Styles with JavaScript
10:34

Often you need to change something on your page upon the occurrence of a certain event. Let's dive into that now.

Adding an Event Listener
06:05
Time to test the JavaScript knowledge you gained until now!
Time to Practice - Adding Styles with JavaScript
1 question

We want to build a responsive website - for that we'll need a side menu. Time to add one - of course with help of JavaScript.

Adding a Side Navigation Bar
07:14

The side menu shouldn't always be visible so let's connect that hamburger menu.

Opening and Closing the Hamburger Menu
03:57

What if you don't want to change the inline styles but the classes attached to an element? You can do that, too!

Manipulating Element Classes
06:40

Time for some theory about the property syntax.

Understanding Property Notations
03:12

We got some cleanup to do - let's tackle that now.

Cleaning Up our Code
05:31

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

Wrap Up
01:15

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

Useful Resources & Links
00:03
+ – Making our Website Responsive
19 lectures 01:59:06

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

Module Introduction
01:45

Our website gets better and better, but we have one problem: We only worked on the styling for desktop devices. Many of our potential users might visit our site using mobile devices, so we should ensure that our site looks great for all users. To achieve this, we need to make our site responsive!

Why our Project Should Become Responsive
02:25

A pixel is not a pixel, sounds strange doesn't it? With the latest smartphones & tablets and their corresponding high pixel density, the traditional 96px = 1inch formula doesn't work anymore, so let's find out how we can solve this problem.

Understanding Hardware Pixels vs. Software Pixels
10:29

Making our website responsive requires both HTML and CSS: In HTML we need to use the "viewport" metatag, in CSS we will add media queries. Let me introduce both concepts to you in this lecture.

Comparing the Viewport Metatag (HTML) and Media Queries (CSS)
03:04

We understand the basic concept of the "viewport" metatag, but which additional options do we have to control the user actions? Let's find that out in this video!

Understanding the "viewport" Metatag
07:22

We just learned how CSS works, so styling our website "Desktop First" was the right approach. With the basics set, we should change that as "Mobile First" is the modern way to style websites. Time to do that!

Designing Websites "Mobile First"
01:54

The mobile version of our background image on the starting page looks ok, but now we destroyed the desktop version. Time to understand the basic concepts of media queries and how these allow us to make our site responsive!

Adding our First Media Queries
12:52

Media queries are powerful and awesome while applying them is really easy. However, there are some things that we need to know about media queries before we continue styling our website.

Things to Keep in Mind when Working with Media Queries
08:09

With the incredible amount of different devices available on the market, setting the right breaking points for our media queries is a big challenge. Let me show you one way how to find a good starting point and how to avoid creating unnecessary media queries!

Finding the Right Breaking Points
03:45

Time to turn the design for our different plans on the starting page into a beautiful mobile style!

Creating the Mobile First Design for our Plans
06:37

We have wonderful mobile plans, but the desktop version is not displayed as intended. Time to optimize that!

Making the Plans Responsive
08:35

With the responsive web design basics being set, it's your turn! Make our features responsive and turn them into beautifully styled mobile and desktop versions. Let me also show you my solution in case you are not sure how to approach the problem.

Your Challenge
06:06
Let's test our knowledge about responsive design and media queries in this assignment!
Time to Practice - Creating a Responsive Design with Media Queries
1 question

So far our media queries were only based on one condition, but we can do more! Let's have a look at logical operators and understand how these allow us to combine multiple conditions in our media queries.

Working with Logical Operators
08:13

We learned a lot about responsive design, but our customers page has a lot of issues. Time to fix these to make our testimonials shine!

Improving the Customers Page
14:58

The packages page also needs some improvement as the look on wider screens is not the best. Time to add an additional media query to improve that!

Improving the Packages Page
05:41

Our navigation bar looks fine, but the calculation logic of our logo height is not perfect. Let's make our code leaner and clean up the navigation bar!

Cleaning Up the Navigation Bar
04:39

We almost did it, but to make our site totally responsive, we need to fix the position of our footer. At the moment it is positioned in the somewhere in the middle of the page, so let's see how we can position the footer at its intended position: At the bottom of each page.

Positioning our Footer Correctly
10:09

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

Wrap Up
02:15

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

Useful Resources & Links
00:08