Professional Css (2023) (Flexbox & Grid & Animations & More)

Master modern CSS in 2023 by building 2 beautiful projects with Flexbox, Grid, Animations & Transitions, and much more!

What you'll learn

How to code CSS in 2023 by building realistic projects from scratch and seeing how it all fits together

Avoid hundreds of beginner mistakes so the people who have to interact with your code have it easy

Implement simple-to-complex layouts with Flexbox & CSS Grid

Crucial best practices in 2023 that every CSS-coder should know (e.g. use rem instead of px)

Implement awesome CSS animations & transitions

Implement Responsive Web Design (RWD) for mobile, tablet, laptop & desktop with media queries (@media)

Use the most popular CSS pre-processor (Sass/SCSS) and the value it adds

Why people use BEM and differences with coding CSS in React/Vue/Angular

Implement a simple build process for CSS (add vendor prefixes and minify CSS file)

Stop struggling with CSS – it becomes fun once you have mastered things like Flexbox (trust me)

Master all critical concepts for a front-end developer

Tons of easy design tricks you can use to drastically improve the look of your projects

BONUS: By going through the course you'll naturally improve design and HTML too

Requirements

None required, it's beginner friendly

Description

– NEW ON UDEMY (just switched my courses to Udemy) –This is the #1 resource to master modern CSS! Take your CSS to an advanced, professional level by building 2 beautiful, real-world projects from scratch. Other courses start from outdated concepts first (like floats) – we will use modern concepts right from the start (like Flexbox).Course Projects2 Top-tier, real-world projects. Expertly engineered to help you code modern websites & web apps with the latest best practices.SocialEditor: Build a slick graphic design editor for social media posts (layouts with Flexbox).BetterPhotos: Build a stylish homepage for a photography community (layouts with Flexbox & Grid).What You'll Learn 1) How to code CSS in 2023 by building realistic projects from scratch and seeing how it all fits together2) Avoid hundreds of beginner mistakes so the people who have to interact with your code have it easy3) Implement simple-to-complex layouts with Flexbox & CSS Grid4) Crucial best practices that every CSS-coder should know (e.g. use rem instead of px)5) Implement simple-to-complex CSS animations & transitions6) Implement Responsive Web Design (RWD) for mobile, tablet, laptop & desktop with media queries (@media)7) Use the most popular CSS pre-processor (Sass/SCSS) and the value it adds8) Why people use BEM and differences with coding CSS in React/Vue/Angular9) Implement a simple build process for CSS (add vendor prefixes and minify CSS file)10) Tons of easy design tricks you can use to drastically improve the look of your projects11) BONUS: By going through the course you'll naturally improve your design and HTML skills tooAvoid struggling with CSS for years to come. Hope to see you in the course!

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 IMPORTANT: Project resources (e.g. image URLs)

Section 2: SocialEditor (Project 1)

Lecture 3 Project Introduction

Lecture 4 Setup & Basics

Lecture 5 Header

Lecture 6 VS Code Extension: Live-Server

Lecture 7 Header Animation

Lecture 8 Flexbox

Lecture 9 Overall Structure

Lecture 10 Sidebar

Lecture 11 BEM

Lecture 12 Panel

Lecture 13 Info-Bar

Lecture 14 Editing Component

Lecture 15 Responsiveness

Section 3: BetterPhotos (Project 2)

Lecture 16 Project Introduction

Lecture 17 Setup

Lecture 18 App Structure

Lecture 19 CSS Grid

Lecture 20 Header

Lecture 21 Sass (SCSS Syntax)

Lecture 22 Intro Section

Lecture 23 Upload Section

Lecture 24 Footer

Lecture 25 Gallery

Lecture 26 Steps

Lecture 27 Responsiveness

Lecture 28 Build Process

Section 4: Loose Ends

Lecture 29 CSS Variables & PX vs REM/EM & CSS in React/Angular/Vue

Section 5: Closing

Lecture 30 Congratulations! (BONUS Lecture)

Front-end developers who want to finally master CSS,Developers who want to learn critical concepts like Flexbox, CSS Grid, Animations & Transitions, and more,Developers who want to know how to build modern websites & web apps with modern CSS,Anyone interacting with CSS – creating/updating their own website, designers who have to touch CSS, etc.