New We're excited to introduce our latest course: Professional CSS | Buy today for $10
New

Professional CSS Course

48 videos | 20+ hours

Upgrade your CSS skill by coding 3 beautiful, real-world projects from scratch. Learn: CSS like a pro, Grid & Flexbox, Animations & Transitions, Responsiveness, tons of properties, design trends, Sass, BEM, and much more

Video placeholder
  • Introduction
  • 1Welcome 05:41
  • 2Big picture 08:22
  • Project 1 Modern Portfolio
  • 3Preparation12:37
  • 4CSS Flexbox03:23
  • 5Creating header10:55
  • 6Creating cards22:01
  • 7Creating pricing14:33
  • Creating footer829:21
  • Finishing touches904:31
  • Project 2 Podcast Web App
  • 9Preparation03:04
  • 10CSS Grid05:34
  • 11Creating layout11:31
  • 12Creating cards7:43
  • 13Creating audio player19:33
  • Project 3 Rental Platform
  • 14Preparation25:12
  • 15CSS Grid & Flexbox02:23
  • 16Creating image effect23:02
  • 17Creating info box33:45
  • 18Creating reviews8:54
  • Loose ends
  • 19CSS peculiarities13:45
  • Closing
  • 20Final video05:04
Course project 1
Course project 1
Course project 1

What you'll learn

  • An overall increased understanding of how to use CSS in 2020 by coding 3 real-world projects from scratch and seeing how it all fits together
  • Create simple-to-complex layouts with CSS Grid & Flexbox from scratch
  • Modern design trends & tricks that make your projects stand out and how to implement them in CSS
  • Use simple-to-advanced CSS animations & transitions that 'wow' your users
  • Implement Responsive Web Design (RWD) for mobile, tablet, laptop & desktop. Learn about using & managing media queries, responsive images, px vs rem vs em units, advanced CSS Grid & Flexbox, etc.
  • Differences of coding CSS in modern frameworks/libraries like React/Angular/Vue vs outside them
  • Tons of crucial properties and techniques that are too many to list here (e.g. which unit to use, using pseudo-elements, the 'transform' property, @keyframes, utility classes, etc.)
  • Use the most popular CSS pre-processor (Sass/SCSS) and the value it adds
  • Use the most popular convention to name your classes (BEM) and the value it adds, and the alternatives in React/Angular/Vue
  • Structure your CSS: reusable components, modularity, folders & files, naming your classes (BEM), Sass variables & mixins, etc.
  • Simple-to-advanced CSS theory in practice: cascade, specificity, inheritance, performance issues (e.g. layout triggers), etc.
  • Implement a simple build process (adding vendor prefixes and minification) with npm
  • Everything is up-to-date and important to anyone working with the front-end

For who

You have used CSS before but want to take it to a modern, professional level

Instructor
Course instructor
Wessel Web Developer

Prerequisites

HTML and CSS basics