Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Meditation Personal Transformation Life Purpose Emotional Intelligence CBT
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Data Science
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
2021-01-14 18:33:23
30-Day Money-Back Guarantee
Design Web Design CSS

CSS - The Complete Guide 2021 (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
Rating: 4.7 out of 54.7 (10,034 ratings)
50,092 students
Created by Academind by Maximilian Schwarzmüller, Maximilian Schwarzmüller, Manuel Lorenz
Last updated 1/2021
English
English, Italian [Auto], 
30-Day Money-Back Guarantee

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
Curated for the Udemy for Business collection

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

Mudiaga Moody Uwojeya
Mudiaga Moody Uwojeya
11 courses
7 reviews
Rating: 5.0 out of 53 months ago
Now, this is the kind of CSS course I was looking for. Detailed discussion of concepts and then practical application. I really value those insights about viewport, how positioning elements affect size and the behaviour to expect, and so on. I am more confident using css now. I am inclined to check out academind js course.

Course content

19 sections • 296 lectures • 22h 46m total length

  • Preview01:39
  • What is CSS?
    Preview02:59
  • Join our Online Learning Community
    00:21
  • Preview01:50
  • Preview04:34
  • Choose Your Track
    00:27
  • Preview00:43
  • Preview02:49
  • Preview01:26
  • Where to Find the Source Code
    00:09
  • Useful Resources & Links
    00:04

  • Module Introduction
    00:55
  • Understanding the Course Project Setup
    02:44
  • Adding CSS to our Project with Inline Styles
    03:53
  • Understanding the <style> Tag & Creating a .css File
    06:27
  • Applying Additional Styles & Importing Google Fonts
    06:51
  • Theory Time - Selectors
    08:56
  • Understanding the "Cascading" Style & Specificity​
    08:14
  • Understanding Inheritance
    05:47
  • Adding Combinators
    06:16
  • Theory Time - Combinators
    05:42
  • Summarizing Properties & Selectors
    03:49
  • Selectors & Combinators
    5 questions
  • Time to Practice - The Basics
    1 question
  • Wrap Up
    02:02
  • Useful Resources & Links
    00:07

  • Module Introduction
    01:19
  • Introducing the CSS Box Model
    03:36
  • Understanding the Box Model
    03:01
  • Understanding Margin Collapsing and Removing Default Margins
    03:05
  • Deep Dive on "Margin Collapsing"
    01:17
  • Theory Time - Working with Shorthand Properties
    03:48
  • Applying Shorthands in Practice
    02:05
  • Diving Into the Height & Width Properties
    06:07
  • Understanding Box Sizing
    06:43
  • Adding the Header to our Project
    05:37
  • Understanding the Display Property
    07:12
  • display: none vs visibility: hidden
    00:42
  • HTML Refresher: Block-level vs Inline Elements
    01:06
  • Applying the Display Property & Styling our Navigation Bar
    06:53
  • Understanding an Unexpected "inline-block" Behaviour
    02:03
  • Working with "text-decoration" & "vertical-align"
    04:54
  • Styling Anchor Tags
    04:00
  • Adding Pseudo Classes
    01:47
  • Theory Time - Pseudo Classes & Pseudo Elements
    05:38
  • Grouping Rules
    01:14
  • Working with "font-weight" & "border"
    02:04
  • Adding & Styling a CTA-Button
    04:09
  • Adding a Background Image to our Project
    01:50
  • Properties Worth to Remember
    01:29
  • Time to Practice - Diving Deeper into CSS
    1 question
  • Wrap Up
    02:31
  • Useful Resources & Links
    00:05

  • Module Introduction
    00:41
  • Using Multiple CSS Classes & Combined Selectors
    07:09
  • Classes or IDs?
    04:05
  • (Not) using !important
    03:15
  • Selecting the Opposite with :not()
    03:29
  • CSS & Browser Support
    03:51
  • Wrap Up
    01:06
  • Rounding up the Basics
    4 questions
  • Useful Resources & Links
    00:04

  • Module Introduction
    00:37
  • Adding Style to our Plans
    08:34
  • Working on the Recommended Plan
    06:33
  • Styling the Badge with "border-radius"
    03:22
  • Styling our List
    03:03
  • Working on the Title and the Price of our Packages
    04:33
  • Improving our Action Button
    06:40
  • Understanding Outlines
    02:17
  • Presenting the Core Features to the User
    01:22
  • Styling the Headline of the Core Features Section
    03:38
  • Preparing the Content of the Key Feature Area
    07:15
  • Adding the Footer
    06:49
  • What we Achieved so Far
    01:46
  • Adding the Packages Page
    06:24
  • Your Challenge
    01:31
  • Styling the Links
    03:55
  • Styling our Package Boxes
    07:15
  • Adding "float" to our Package
    05:14
  • Fixing the Hover Effect
    04:11
  • Adding the Final Touches
    03:01
  • Useful Resources & Links
    00:01

  • Module Introduction
    02:44
  • Why Positioning will Improve our Website
    02:32
  • Understanding Positioning - The Theory
    05:54
  • Working with the "fixed" Value
    09:50
  • Creating a Fixed Navigation Bar
    03:54
  • Using "position" to Add a Background Image
    06:03
  • Understanding the Z-Index
    06:59
  • Adding a Badge to our Package
    08:00
  • Styling & Positioning our Badge with "absolute" and "relative"
    03:10
  • Diving Deeper into Relative Positioning
    04:03
  • Are you a "position" expert?
    4 questions
  • Working with "overflow" and Relative Positioning
    04:17
  • Introducing "sticky" Positioning
    06:53
  • Understanding the Stacking Context
    05:53
  • Time to Practice - Positioning
    1 question
  • Wrap Up
    04:12
  • Useful Resources & Links
    00:06

  • Optional: Advanced Track Introduction
    02:22
  • Module Introduction
    01:06
  • Understanding "background-size"
    08:41
  • Working with "background-position"
    05:00
  • The "background" Shorthand - Theory
    02:12
  • Applying "background" Origin, Clip & Attachment
    05:51
  • Using the "background" Shorthand on our Project
    02:19
  • Styling Images
    07:33
  • Adding the Customers Page to our Website
    03:19
  • Working on the Image Layout
    08:07
  • Understanding Linear Gradients
    06:16
  • Applying Radial Gradients
    05:41
  • Stacking Multiple Backgrounds
    04:50
  • Understanding Filters
    04:00
  • Adding & Styling SVGs - The Basics
    04:20
  • Wrap Up
    02:14
  • Useful Resources & Links
    00:02

  • Module Introduction
    02:35
  • What's Wrong With Our Project Units?
    05:21
  • Where Units Matter
    06:02
  • An Overview of Available Sizes & Units
    04:24
  • Rules to Remember: Fixed Positioning & "%"
    04:15
  • Rules to Remember: Absolute Positioning & "%"
    08:14
  • Rules to Remember: Relative / Static Positioning & "%"
    08:53
  • Fixing the Height 100% Issue
    12:02
  • Defining the Font Size in the Root Element
    02:18
  • Using "min-width/height" & "max-width/height"
    05:27
  • Working with "rem" & "em"
    12:47
  • Adding "rem" to Additional Properties
    08:17
  • Finishing "rem"
    05:21
  • Understanding the Viewport Units "vw" &"vh"
    09:47
  • Windows, Viewport Units & Scrollbars
    00:44
  • Choosing the Right Unit
    05:30
  • Using "auto" to Center Elements
    01:42
  • Cleaning Up our Code
    01:06
  • Wrap Up
    04:23
  • Useful Resources & Links
    00:04

  • Module Introduction
    01:16
  • Adding a Modal
    04:13
  • Selecting & Manipulating Styles with JavaScript
    10:34
  • Adding an Event Listener
    06:05
  • Time to Practice - Adding Styles with JavaScript
    1 question
  • Adding a Side Navigation Bar
    07:14
  • Opening and Closing the Hamburger Menu
    03:57
  • Manipulating Element Classes
    06:40
  • Understanding Property Notations
    03:12
  • Cleaning Up our Code
    05:31
  • Wrap Up
    01:15
  • Useful Resources & Links
    00:01

  • Module Introduction
    01:45
  • Why our Project Should Become Responsive
    02:25
  • Understanding Hardware Pixels vs. Software Pixels
    10:29
  • Comparing the Viewport Metatag (HTML) and Media Queries (CSS)
    03:04
  • Understanding the "viewport" Metatag
    07:22
  • Designing Websites "Mobile First"
    01:54
  • Adding our First Media Queries
    12:52
  • Things to Keep in Mind when Working with Media Queries
    08:09
  • Finding the Right Breaking Points
    03:45
  • Creating the Mobile First Design for our Plans
    06:37
  • Making the Plans Responsive
    08:35
  • Your Challenge
    06:06
  • Time to Practice - Creating a Responsive Design with Media Queries
    1 question
  • Working with Logical Operators
    08:13
  • Improving the Customers Page
    14:58
  • Improving the Packages Page
    05:41
  • Cleaning Up the Navigation Bar
    04:39
  • Positioning our Footer Correctly
    10:09
  • Wrap Up
    02:15
  • Useful Resources & Links
    00:04

Instructors

Academind by Maximilian Schwarzmüller
Online Education
Academind by Maximilian Schwarzmüller
  • 4.6 Instructor Rating
  • 315,529 Reviews
  • 1,331,187 Students
  • 25 Courses

Bundling the courses and know how of successful instructors, Academind strives to deliver high quality online education. 

Online Education, Real-Life Success - that's what Academind stands for. Learn topics like web development, data analyses and more in a fun and engaging way.

Currently, you can find courses published by Maximilian Schwarzmüller and Manuel Lorenz, more instructors to come!

Keep learning!

Maximilian Schwarzmüller
Professional Web Developer and Instructor
Maximilian Schwarzmüller
  • 4.6 Instructor Rating
  • 569,897 Reviews
  • 1,350,301 Students
  • 35 Courses

Experience as (Web) Developer

Starting out at the age of 13 I never stopped learning new programming skills and languages. Early I started creating websites for friends and just for fun as well. Besides web development I also explored Python and other non-web-only languages. This passion has since lasted and lead to my decision of working as a freelance web developer and consultant. The success and fun I have in this job is immense and really keeps that passion burningly alive.

Starting web development on the backend (PHP with Laravel, NodeJS, Python) I also became more and more of a frontend developer using modern frameworks like React, Angular or VueJS in a lot of projects. I love both worlds nowadays!

As a self-taught developer I had the chance to broaden my horizon by studying Business Administration where I hold a Master's degree. That enabled me to work in a major strategy consultancy as well as a bank. While learning, that I enjoy development more than these fields, the time in this sector greatly improved my overall experience and skills.

Experience as Instructor

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enables me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 1,000,000 students on Udemy as well as a successful YouTube channel is the best proof for that.

Whether working as development instructor or teaching Business Administration I always received great feedback. The most rewarding experience is to see how people find new, better jobs, build awesome web applications, acquire amazing projects or simply enjoy their hobby with the help of my content.

Together with Manuel Lorenz, I founded Academind to offer the best possible learning experience to our more than 1,000,000 students.

Manuel Lorenz
Professional Business Analyst and Instructor
Manuel Lorenz
  • 4.6 Instructor Rating
  • 58,783 Reviews
  • 542,050 Students
  • 5 Courses

Having worked as a business analyst in both a major consultancy and an investment bank, I always found myself confronted with both various and complex problem sets and challenging client demands. The rapid development of technology and business requirements forces everyone to constantly adapt and to continue learning.

Being an early adopter of new and quickly evolving tools, I always enjoyed both learning these tools and passing on my knowledge to my colleagues and fellow students. 

Since working as a business analyst implies a high affinity to programming, I also enjoy working as a web developer. It's that combination of self-taught knowledge and its application in a highly competitive consulting environment for various clients which gave me the ability to evaluate solutions from an industry perspective as well as from a learner's perspective. The latter also allows me to identify the pain points students might hit when learning these tools.

Since I always found it hard to find high quality, understandable and comprehensive learning materials, I decided to create such materials on my own. Together with Maximilian Schwarzmüller I founded Academind to offer the best possible learning experience on web development and data science to our more than 600,000 students.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.