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

What's inside

Learning objectives

Learn why css is amazing, not something to be afraid of!
Use basic as well as advanced css features
Flexbox, grid, animations, transitions, fonts, media queries and much more - it's all included!

Understand the concepts and theory behind css and certain css features
Build beautiful websites which don't just contain great content but also look good

Learn why css is amazing, not something to be afraid of!
Use basic as well as advanced css features
Flexbox, grid, animations, transitions, fonts, media queries and much more - it's all included!
Understand the concepts and theory behind css and certain css features
Build beautiful websites which don't just contain great content but also look good

Syllabus

Students will understand what CSS is, why and when to use it and what to expect from this course.

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

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

Join our Online Learning Community

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

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

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

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

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.

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

Find out where you can get the course source code.

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

Students will understand the core concepts behind CSS and be able to to apply these basic concepts on their own

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

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!

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!

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.

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.

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!

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?

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!

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.

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

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!

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

Time to Practice - The Basics

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

Students will apply the knowledge gained in the last module and use it do dive deeper into the CSS basics and to understand additional fundamental concepts

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!

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.

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

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

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!

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

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.

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.

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!

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.

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

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.

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.

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

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

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.

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?

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!

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.

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.

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.

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!

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.

Time to Practice - Diving Deeper into CSS

Students will understand how they may work with CSS selectors and what they should watch out for when implementing various CSS features.

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

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

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

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.

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

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

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

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

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

Students will actively practice the concepts learned so far and apply these by styling an entire webpage

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!

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

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!

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!

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

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.

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.

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

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

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.

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!

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

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.

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!

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

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

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?

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.

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!

Students will learn how to use the "position" property to change the default positioning of elements on a 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!

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.

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.

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.

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.

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!

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!

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!

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.

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!

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Provides strong foundational knowledge for beginners in the fundamentals of building visually appealing websites by teaching basic and advanced CSS features

Teaches students how to use styling and position of HTML elements to create a website with both content and style

Taught by Maximillian Schwarzmüller, Manuel Lorenz, and Academind by Maximilian Schwarzmüller, recognized experts in the field of web development

Offers multiple tracks, such as the Basics Track, Advanced Track, and Expert Track, allowing learners to choose the level of learning that best suits their needs

Emphasizes hands-on learning by guiding learners through the process of building a real-world website project

Covers a wide range of topics including Flexbox, CSS Grid, CSS Variables, Sass, and advanced CSS techniques for creating responsive and interactive websites

Reviews summary

Css course highly recommended

Learners say CSS - The Complete Guide 2024 is a top-notch course. The well-structured video lectures help make learning CSS, including Flexbox, Grid, and Sass, smooth. Students have found that the instructors, Max and Manuel, are outstanding.

Max and Manuel are excellent teachers.

"Thanks a lot Max & Manuel, you people are amazing teachers."

Well-structured video lectures.

"The best course for CSS."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in CSS - The Complete Guide 2024 (incl. Flexbox, Grid & Sass) with these activities:

Review your HTML knowledge

Show steps

Strengthen your foundation by reviewing the basics of HTML, which is essential for understanding CSS.

Browse courses on FrontEnd Development

Show steps

Read an article about HTML.
Watch a video tutorial on HTML.
Take a practice quiz on HTML.
Create a simple web page using HTML.
Validate your HTML code.

Join a CSS study group

Show steps

Enhance your learning by connecting with other students and discussing CSS concepts and techniques.

Show steps

Find a CSS study group to join.
Attend the study group meetings regularly.
Participate in discussions about CSS concepts and techniques.
Share your own knowledge and experience with other members of the group.
Work together on CSS projects.

Practice basic CSS selectors

Show steps

Improve your understanding of CSS selectors by practicing how to select elements on a web page.

Browse courses on CSS Selectors

Show steps

Open a code editor.
Create a new HTML file.
Write some HTML code to create a simple web page.
Write some CSS code to style the web page.
Use CSS selectors to select different elements on the web page.

Five other activities

Expand to see all activities and additional details

Show all eight activities

Create a CSS cheat sheet

Show steps

Reinforce your understanding of CSS by creating a cheat sheet that summarizes the most important concepts and properties.

Browse courses on FrontEnd Development

Show steps

Gather a list of the most important CSS concepts and properties.
Organize the concepts and properties into a logical order.
Write a clear and concise explanation for each concept and property.
Format the cheat sheet in a way that is easy to read and use.
Share the cheat sheet with others.

Create a CSS style guide

Show steps

Enhance your understanding of CSS best practices by creating a style guide that outlines your own CSS conventions.

Browse courses on FrontEnd Development

Show steps

Research CSS best practices.
Develop a set of CSS coding conventions.
Create a style guide that documents your conventions.
Use your style guide to ensure consistency in your CSS code.
Share your style guide with others.

Learn about CSS Flexbox

Show steps

Expand your knowledge of CSS by learning how to use Flexbox to create flexible and responsive layouts.

Browse courses on CSS Flexbox

Show steps

Watch a video tutorial on CSS Flexbox.
Read an article about CSS Flexbox.
Follow along with a coding tutorial to create a web page using Flexbox.
Experiment with Flexbox properties to create different layouts.
Apply Flexbox to your own web projects.

Participate in a CSS coding competition

Show steps

Challenge yourself and test your CSS skills by participating in a coding competition.

Browse courses on FrontEnd Development

Show steps

Find a CSS coding competition to participate in.
Read the competition rules and guidelines.
Develop a strategy for your submission.
Create a CSS design for the competition.
Submit your design to the competition.

Build a personal website

Show steps

Apply your CSS knowledge to create a portfolio or showcase website that demonstrates your skills.

Show steps

Plan the design of your website.
Create the HTML structure for your website.
Write the CSS code to style your website.
Add content to your website.
Publish your website.

Career center

Learners who complete CSS - The Complete Guide 2024 (incl. Flexbox, Grid & Sass) will develop knowledge and skills that may be useful to these careers:

Front-End Developer

A Front-End Developer is responsible for designing and implementing the presentation layer of a website or application. This course teaches the fundamentals of CSS, which is a crucial component for creating visually appealing and user-friendly interfaces. By acquiring a strong foundation in CSS, learners can enhance their skills in creating responsive and interactive web designs, making them more competitive in the job market.

See salaries and explore the career path for Front-End Developer

Web Designer

Web Designers are responsible for planning, designing, and developing websites and web pages. This course provides comprehensive training in CSS, enabling learners to create visually engaging and user-friendly web designs. The knowledge gained from this course will equip individuals to design and develop effective and aesthetically pleasing websites, increasing their employability prospects in the field of web design.

See salaries and explore the career path for Web Designer

Web Developer

Web Developers are responsible for building and maintaining websites. This course provides a solid foundation in CSS, enabling learners to create visually pleasing and functional web designs. By gaining proficiency in CSS, individuals can develop responsive and interactive web applications, increasing their competitiveness in the job market.

See salaries and explore the career path for Web Developer

User Interface (UI) Designer

UI Designers specialize in designing and developing the visual interface of websites and applications. This course offers a comprehensive understanding of CSS, which is essential for creating user-friendly and visually appealing interfaces. By mastering CSS, individuals can enhance their skills in designing intuitive and immersive user experiences, making them highly sought after in the tech industry.

See salaries and explore the career path for User Interface (UI) Designer

Digital Designer

Digital Designers use digital tools to create designs for various online platforms. This course offers a comprehensive overview of CSS, empowering learners to design and develop user interfaces for websites and applications. By mastering CSS, individuals can create visually appealing and intuitive designs, enhancing their ability to succeed in the digital design field.

See salaries and explore the career path for Digital Designer

Webmaster

Webmasters are responsible for managing and maintaining websites. This course provides a thorough understanding of CSS, allowing learners to develop and implement visually appealing and functional website designs. By gaining expertise in CSS, individuals can effectively create and manage websites that meet the needs of users and search engines, increasing their value in the field of web development.

See salaries and explore the career path for Webmaster

Graphic designer

Graphic Designers create visual content for various purposes, including websites, print materials, and social media. This course offers a comprehensive overview of CSS, enabling learners to incorporate CSS into their graphic designs, creating visually stunning and interactive elements. By understanding CSS, Graphic Designers can enhance their skills in creating visually appealing and engaging designs for multiple platforms, making them more competitive in the industry.

See salaries and explore the career path for Graphic designer

Software Developer

Software Developers design, develop, and maintain software applications. This course provides a foundation in CSS, enabling learners to incorporate CSS into their software applications, creating visually appealing and user-friendly interfaces. By understanding CSS, Software Developers can enhance their skills in building robust and user-centric applications, making them more competitive in the software development industry.

See salaries and explore the career path for Software Developer

Technical Writer

Technical Writers create documentation and instructions for software, websites, and other technical products. This course provides a solid understanding of CSS, enabling learners to write clear and concise instructions for using and implementing CSS code. By mastering CSS, Technical Writers can enhance their ability to document and explain complex technical concepts, making them highly valued in the field of technical writing.

See salaries and explore the career path for Technical Writer

IT Support Specialist

IT Support Specialists provide technical support to users of computer systems and networks. This course provides a basic understanding of CSS, enabling learners to assist users with issues related to CSS implementation on websites. By gaining knowledge of CSS, IT Support Specialists can enhance their ability to troubleshoot and resolve technical problems, making them more effective in their support roles.

See salaries and explore the career path for IT Support Specialist

Content Manager

Content Managers plan, create, and manage content for websites and other digital platforms. This course provides a basic understanding of CSS, enabling learners to collaborate with web designers to ensure that written content is visually appealing and user-friendly. By gaining knowledge of CSS, Content Managers can enhance their ability to create and manage engaging and effective content, making them more valuable in the field of content management.

See salaries and explore the career path for Content Manager

Marketing Manager

Marketing Managers plan and execute marketing campaigns to promote products and services. This course provides a basic understanding of CSS, enabling learners to assess the visual impact of marketing materials and make informed decisions about design choices. By gaining knowledge of CSS, Marketing Managers can enhance their ability to create effective marketing campaigns that resonate with target audiences, making them more competitive in the field of marketing.

See salaries and explore the career path for Marketing Manager

Product Manager

Product Managers oversee the development and launch of new products or features. This course provides a basic understanding of CSS, enabling learners to collaborate with designers and developers to ensure that products meet user needs and are visually appealing. By gaining knowledge of CSS, Product Managers can enhance their ability to create products that are user-centric and visually appealing, making them more successful in their roles.

See salaries and explore the career path for Product Manager

Business Analyst

Business Analysts analyze business processes and systems to identify areas for improvement. This course may be useful for Business Analysts who want to understand the technical aspects of web development and how CSS can be used to improve the user experience.

See salaries and explore the career path for Business Analyst

Project Manager

Project Managers oversee the planning, execution, and completion of projects. This course may be useful for Project Managers who want to gain a basic understanding of CSS, enabling them to better understand the work of web designers and developers and to make informed decisions about project deliverables.

See salaries and explore the career path for Project Manager