CSS - The Complete Guide (incl. Flexbox, Grid & Sass)
- 22.5 hours on-demand video
- 29 articles
- 302 downloadable resources
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to Udemy's top 3,000+ courses anytime, anywhere.Try Udemy for Business
- 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
- 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!
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)
- 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 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!
- 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
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?
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.
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.
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.
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?
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.
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!
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.