Save for later

CSS - The Complete Guide 2020 (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 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.

Get Details and Enroll Now

OpenCourser is an affiliate partner of Udemy.

Get a Reminder

Not ready to enroll yet? We'll send you an email reminder for this course

Send to:

Udemy

Rating 4.6 based on 895 ratings
Length 23 hours
Starts On Demand (Start anytime)
Cost $10
From Udemy
Instructors Maximilian Schwarzmüller, Manuel Lorenz, Academind by Maximilian Schwarzmüller, Academind by Maximilian Schwarzm端ller, Maximilian Schwarzm端ller
Download Videos Only via the Udemy mobile app
Language English
Subjects Art & Design
Tags Design Web Design

Get a Reminder

Get an email reminder about this course

Send to:

Similar Courses

What people are saying

According to other learners, here's what you need to know

highly recommend this course in 11 reviews

One of the most complete CSS courses on Udemy, I highly recommend this course for all levels of knowledge, specially for beginners!

I highly recommend this course.

Highly recommend this course.

Highly recommend this course to web developers of any skill level.

I learned so many new things from beginner to advanced topics and would highly recommend this course to anybody.

I highly recommend this course for beginners who want to master the CSS.

I would highly recommend this course for any web designer and I'm only half way through at this point.

I highly recommend this course and any of Max's courses!

I highly recommend this course to become better at CSS3.

I'd highly recommend this course for a deeper understanding of css.

Read more

so far so good in 9 reviews

So far so good!

so far so good, lets see where it goes from here!

so far so good Very Nice Plans Yes I always love the courses of Max.

Very Good ●まだ本文に入っていないので内容についてヮどのような教え形なのか不明ですが、講師の説明にヮ学習内容の良さにおいて期待感があるといったところです。 喋るペースの速さもあるにしてもやる気をおもう事のできる言葉だったと受け止めてしまうしだいです。ようヮCSSの背景を説明することで丁寧さをうかがえたといったところです。(初度目の評価。次ヮ2度目) So far I'm not sure Maximilian is the best material is fed sequentially so far so good Great as always.

So far so good, I just want to continue and learn more from this course.. yesss Great content, well organized and many practice exercises.

So far so good.

Read more

easy to follow in 10 reviews

The project is fun and easy to follow, so don’t hesitate and jump right in!

This course gives clear idea of how web development works, and it is easy to follow.

Finally, I'm very glad to see that they zoom in on both the code and results, making the tutorials easy to follow on smaller devices AND keeps you focused on what is important.

Very in depth and easy to follow!

I have always enjoyed Max courses as he is a great instructor and easy to follow.

Easy to follow, very rich materials and up to date.

[Initial Review] I am really enjoying this course so far and I feel like it will be an engaging and easy to follow course.

Very high quality as all other Maximillian courses The course is so well organized and easy to follow and I've already learned things I didn't know, that are really useful.

Very clear instructions and easy to follow along while you learn.

Read more

step by step in 8 reviews

The instructors go through everything step by step and explain not only the hows but the whys.

best css course it tells you step by step what you need to know for css.

The concepts are covered in depth and step by step.

Categorizing of modules is so helpful to understand step by step.

It is include everything you need to know about css3 - from responsive design, through flex and grid to the jQuery selectors and drop-down menu Love the step by step detailed approach.

Building the project step by step is really a great exercise.

i like the pace of introduction of new features building up step by step.

Read more

web development in 11 reviews

I would recommend any of the Academind Udemy courses to anyone wanting to really learn front end web development (JavaScript, React, Angular, Html & Css).

I'm exited to learn nodejs and mongodb with Max... Really great course, highly recommend not skipping any of the sections: even after more than 3 years of professional web development I've still learned something new from nearly every section.

It is for that reason, I am taking several courses on line in the full stack web development arena.

Great for someone who knows how to program well but hasn't ever done web development before.

Strongly recommend it to anyone with has interest in web development.

I haven't seen so far from other courses a clear approach to web development, until now.

I recommend this course to anyone who is serious about web development.

I already have taken and intro to web development course at my local community college.

Read more

web developer in 10 reviews

I'm looking to be a web developer and for sure i can't keep on hating CSS whenever i see it.

An absolute must for any web developer!

Definitely recommended for all web developers.

I am an experienced unix/linux system administrator and I am getting exited to become a professional web developer.

I'm a pro web developer (specializing in server side code).

Great and very comprehensive course, even for experienced web developers.

I am already a senior web developer, but I can see that this course will fill in some gaps in my CSS knowledge.

Read more

how css works in 6 reviews

hell yes, they really explain well with lot of exemples and explanations on how css works and with lot of tips.

But thankfully to this course, now I completely understand how CSS works and now it looks not such menace as before =) Astounding explanation and deep diving into the core helped me to understand and cover all my gaps.

In addition to all of it's content, it offers the 'Whys' of how CSS works the way it does.

I have previous knowledge but i want to improve They really help you understand how CSS works.

good course, goes into detail about how CSS works by building up a site and explaining all the styling decisions.

Read more

rather than in 9 reviews

I am learning a lot but sometimes I'd rather just learn the correct way first rather than dilly dally with 'wrong' ways.

I think the content is fine , but sometimes it's hard to understand some concepts but with sometime you spend on researching you can understand it well , sometimes its easier for me to go read some document rather than repeating the video again and again Very extensive trainning, bringing information for everything related to CSS.

I used a color scheme built around complementary blues/whites rather than the red/green mess, didn't use the "Impact-inspired" font introduced towards the beginning of the course, and generally used more whitespace than was used in the course.

It took quite a while to finish it, but sometimes it's better to take your time and make sure that you really understand a topic, rather than hastily jumping through the videos.

My only regret is that I wish I had started my web developer career here rather than looking at any other trainers because the first trainer can build or destroy your confidence.

I love how the instructors repeat several tips and tricks throughout the course rather than assume the student already remembers or has understood the reasoning behind it.

It would be better if it's divided into smaller project rather than one big.

For example, rather than show us everything, consider showing the next improvement and ask us to do it on our own before showing us the answer.

I.e., WHY some property goes in a parent class rather than a child class, rather than just HOW to get the styling working.

I like it so far because the course covers high level concepts that get you an overview CSS rather than explaining every tag or property in a tedious sequence.

Read more

well thought out in 5 reviews

The depth of the tutorials and the explanations provided make this a really well thought out learning experience.

A thorough and well thought out course.

I love these guys, they have a great teaching style and their courses are always thorough and well thought out.

Also, it's very evident that you created this course more on the fly and wasn't well thought out.

Read more

everything you need in 5 reviews

It's been excellent thus far; Maximilian explains everything you need to know, and most importantly, talks about important topics like scalability and best practices starting early in the course.

The course contains everything you need to know to start playing with CSS or broaden your existing knowledge.

This course teaches you everything you need to know about web development, from the ground up.

Read more

highly recommended in 8 reviews

Highly recommended!

Highly recommended ^-^ A very valuable course.

Highly recommended.

Read more

responsive design in 8 reviews

It had too much to learn like basic CSS concepts, responsive design, animations etc.

Helped to clarify CSS topic as a whole, and the advanced features (responsive design, pre-processors).

Even if these aren't to be covered, at least a nod that they exist and where to go find out more about them would be helpful, since they're so intertwined with the overall concept of responsive design being taught.

This is an excellent course on CSS and responsive design.

I tried to follow his other section, "responsive design" and the results were horrible: what used to be a pretty website became a cut-off image and ginormous letters (on the non-mobile website).

I have not completed entire course yet (just finished 50%) but i would say great CSS and responsive design course.

To be honest I knew quite some CSS stuff already but was always out of clues whenever it comes to Responsive Designs, Positioing, Pseudo classes, units & sizes, Flexbox, Grids.

Read more

Careers

An overview of related careers and their average salaries in the US. Bars indicate income percentile.

Assistant Buyer, Sport Style $52k

Fit Specialist/Style Guide $55k

Style Guru Contractor $57k

Style & Design Editor $58k

Freelance Assistant Designer - Style&Co. Casual Knits $61k

Assistant Style & Design Editor $61k

Owner Style Guru Consultant $63k

In Style Production $80k

Figure Analyst Style Designer Consultant $90k

Senior Online Style and Beauty Photo Editor for Us Weekly $92k

Deputy Online Style and Beauty Photo Editor for Us Weekly $125k

Senior Style Partner Consultant $216k

Write a review

Your opinion matters. Tell us what you think.

Udemy

Rating 4.6 based on 895 ratings
Length 23 hours
Starts On Demand (Start anytime)
Cost $10
From Udemy
Instructors Maximilian Schwarzmüller, Manuel Lorenz, Academind by Maximilian Schwarzmüller, Academind by Maximilian Schwarzm端ller, Maximilian Schwarzm端ller
Download Videos Only via the Udemy mobile app
Language English
Subjects Art & Design
Tags Design Web Design

Similar Courses

Sorted by relevance

Like this course?

Here's what to do next:

  • Save this course for later
  • Get more details from the course provider
  • Enroll in this course
Enroll Now