Professional CSS 2023 (Flexbox & Grid & Animations & 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.


Homepage

https://www.udemy.com/course/professional-css/