Professional CSS 2024 (Flexbox & Grid & Animations & More)

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

4.67 (158 reviews)

Udemy

platform

English

language

Web Development

What you will learn

How to code CSS in 2024 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 2024 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

Why take this course?

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 Projects

2 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).

Reviews from elsewhere

''Until recently, I've never sat down and learned CSS properly. I know JavaScript and React, but the CSS part of any project would be a chore. I've tried doing various CSS course to complete my CSS knowledge, pretty much all the popular ones on Udemy. However, I would lose interest because they were either too basic or too long winded. I highly recommend the ByteGrad CSS course by Wesley''

''Hi Wesley, I would like to say hello and the most important - THANK YOU for the fantastic CSS course you created. Let me say it's been really (one of) the best I've ever went through. I am at first a backend developer and my frontend experiences are usable but somewhat limited but now I feel much better about it, really, not just talking.''

''As Albert Einstein said: 'Example isn't another way to teach, it is the only way to teach.' Thank you ByteGrad for saving my time by creating the CSS program. After watching many chaotic courses on Lynda and YouTube, finally I can follow some logic here at your school. Thank you!''

''Hi Wesley, For me your CSS course is great and I am really thankful that you actually show the strategy for real world scenario in a concise way, while explaining the context with examples what not to do and why. It's exactly the point I always struggle with, when learning new technology on those beginners silly 'happy day scenarios'. Personally I also appreciate you don't insert unnecessary 'entertainments', which I find in usual IT books and which break the reading flow, adding so much extra work.''

What You'll Learn

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

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

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

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

5) Implement simple-to-complex CSS animations & transitions

6) 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 adds

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

9) 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 projects

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

Avoid struggling with CSS for years to come. Hope to see you in the course!

Screenshots

Professional CSS 2024 (Flexbox & Grid & Animations & More) - Screenshot_01

Professional CSS 2024 (Flexbox & Grid & Animations & More) - Screenshot_02

Professional CSS 2024 (Flexbox & Grid & Animations & More) - Screenshot_03

Professional CSS 2024 (Flexbox & Grid & Animations & More) - Screenshot_04

Reviews

Nazar

October 4, 2023

Nice practice and good experience. It brought the motivation to learn something new and continue improve Web Desing skills.

Jordan

September 22, 2023

Very clear explanations of Grid and Flexbox concepts that were much needed for a dinosaur like me that hasn't written CSS in over a decade. Only deducted a half star because some of the responsive examples using media queries weren't accounting for the more usual use-case of needing to keep all the same elements without just removing them from the DOM. Also, would have liked some insight into how things like the grid-based gallery would work in more dynamic situations where hard-coding wouldn't be applicable. I understand these additions might be outside the scope of the course, but a quick nod to how some of those things might work would give viewers a starting point.

James

September 12, 2023

There is much to be gained from this course. Namely, the process. If you pay attention to the process that he is teaching here, and the considerations that are covered, then you will walk away with a ton of value. The pace in which the course is presented is ideal. The tone and clarity is excellent. I'm very happy with what I have learned from working through these two projects that are presented in this course.

Khurram

September 9, 2023

Was great course to explain css flexbox and css grid. I personally had exposure to both so some of the material was not new to me, I would of enjoyed seeing more css exposure in React specifically or some interactions with javascript but as a css only course I would recommend this for sure.

Chris

August 28, 2023

This course has already helped me at work. Thorough explanations without being too basic - even for someone like me who has been CSS-ing for a long time. A great skills refresh for me!

陳建中

August 27, 2023

Excellent course with lightweight content. It doesn't get too caught up in the nitty-gritty of basic techniques, but rather conveys many important concepts and thought processes through practical demonstrations. Suitable for those with some foundational knowledge of CSS.

Peter

August 20, 2023

Great course, I learned a lot. The instructor's teaching style is great. Soothing voice and there is no fluff. There is not too much or too little. It's a Goldilocks course for learning pro-CSS in the real world for 2023 at least. Highly recommend.

Matija

August 1, 2023

Great course, I highly recommend it after you finish basic (free) ByteGrad course on youtube. I would give it more than 5 stars!

Noha

June 5, 2023

I enrolled to the JavaScript course, and because it was remarkable and I saw how much experienced the instructor is, so I was curious to buy the CSS course, and yes it was really great as I expected. I learnt a lot from it although I'm already good in CSS, this course added a lot of value to me. Thanks and waiting for your courses in react, node and other subjects.

Thomas

May 11, 2023

Wesley carefully covers each item in a topic, understanding the foundational perspective necessary to build development skills.

Markg

May 8, 2023

Thanks Wesley, excellent course, two nice professional looking projects, I always struggled with grid and flexbox, especially using them together, Wesley did a great job of breaking those subjects down. Now to refresh my javascript knowledge with his javascript course. Really looking forward to his upcoming react / node / mern courses

Prasad

April 7, 2023

This is a great course if you already know a little bit of CSS. The projects touch upon multiple challenges that we face practically on the field. Most important it is to the point and very crisp! Learnt quite a bit , despite having some background ! Thanks, Prasad Nageshkar

Maximilien

March 30, 2023

I really enjoyed this course and actually learned a LOT, thank you very much Wesley! I'm really glad that I found your videos on youtube when I was searching how to modify colours in bootstrap. Already bought your JS course and looking forward to start it very soon!

Renée

March 28, 2023

Before starting this course I watched a lot of Bytegrad’s videos on YouTube. I love that he explains the rationales of why he is doing something, the pace he uses, and that everything is clear and concise. I was getting frustrated with a course I was taking and Bytegrad’s content removed that frustration and actually showed me that a) I can do this and b) it’s actually very enjoyable. That is why I decided to take his course instead and will also be enrolling in his JavaScript course once I’m done with CSS. Thank you so much, I look forward to your future content!

Jose

March 17, 2023

I have learned a lot in this project. I've already done a few courses and boot camps, I don't know if it was because they weren't just about CSS, they covered other topics as well, although some were CSS only. I feel satisfied with what I have learned so far in this course and that I have learned much more than I expected even though I have not yet finished the course. Now I'll practice, with everything covered so far, and move on to the next lesson. =)

Charts

Price

Rating

Enrollment distribution

Professional CSS 2024 (Flexbox & Grid & Animations & More) - Distribution chart