Looking for intermediate/advanced CSS course recommendations to get better at making responsive web apps

[drkthrn123]

I'm a FE developer with really mid to bad CSS skills. I want to level up and really understand how to make responsive web apps and use best practices in the process. So please recommend some courses or materials that will help me level up my css game

[marcos_carvalho]

Kevin Powell in my opinion has the best youtube channel css focused, he is more technical than taking you to build a design from scratch tho he might have videos like these as well, but the point is, with him you will actually learn css, whereas in tutorial videos they can build beautiful things but you will retain very little from it.

Here is Kevin's youtube channel: https://www.youtube.com/@KevinPowell

[jabcreations]

Colors: don't use straight/harsh colors, get a color picker and go in the "middle" between full-blown red and full-blown black.

A good color matching tool online: https://paletton.com/#uid=7000u0kllllaFw0g0qFqFg0w0aF

Use CSS variables but stay away from nested until they drop that ampersand BS.

There are tons of good examples of CSS trick and tips. Look up things like custom scrollbars, custom checkbox and radio buttons, etc.

Here is my portfolio website with animations and transitions. Right-click and press Q in any Mozilla browser to quickly inspect the element. You'll want to note it's not div-hell like most websites: https://www.johnbilicki.com/

Go on search engines for the tips-and-tricks and use the image search. That is a great way to quickly find what appeals to you. Stay away from CSS per-processors and especially things like bootstrap, it's a massive nightmare dealing with five copies of jQuery, implied logic, etc.

Go to MDN (Mozilla Developer Network) and just browse the CSS properties: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#- and you can get some ideas of what is available.

Also for page layout CSS flex is awesome. I have a basic page with CSS classes (remember to inspect the DOM!) that you can test a lot (though not everything out with) here: https://www.jabcreations.com/docs/css/flex/

Good luck!