Course

Professional CSS

21 hours

English

Last updated: 6/2020

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 crucial properties & techniques, design trends, Sass/SCSS, BEM, and much more

Screenshot of course project: podcast web app UI
Screenshot of course project: portfolio site
Screenshot of course project: property page

For who

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

Instructor

Instructor portrait

Cornelis

Web developer

Prerequisites

HTML and CSS basics

Contents

Videos & projects

Video poster

Watch trailer

1080p hd

Downloadable

  • 1

    Welcome

    03:56

  • 2

    Big picture

    08:22

Project 1

Modern portfolio

  • 3

    Preparation

    12:37

  • 4

    CSS Flexbox

    03:23

  • 5

    Creating header

    10:55

  • 6

    Building review

    09:35

  • 7

    Grid or Flexbox

    04:12

  • 6

    Building review

    09:35

  • 6

    Building review

    09:35

  • 6

    Building review

    09:35

  • 6

    Building review

    09:35

  • 6

    Building review

    09:35

  • 6

    Building review

    09:35

  • 6

    Building review

    09:35

  • 6

    Building review

    09:35

Screenshot of course project: podcast web app UI

Podcast web app

Build the UI of a web app for podcasts

CSS Grid

Screenshot of course project: portfolio site

Personal portfolio

Build a modern-looking personal portfolio website

Flexbox

Screenshot of course project: property page

Property page

Build a property page for a real estate website

CSS Grid

Flexbox

Learning objectives

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
  • 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
  • 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.)
  • 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 for anyone working with the front-end

Take your CSS to a professional level