What are the best intermediate and advanced CSS and HTML resources?

I’ve done the html and css sections on freecodecamp, “the web developer bootcamp” by Colt Steele on Udemy, and I know all about MDN and other documentation sites. However, I’m not sure where to go from here to really learn CSS and HTML to an advanced level.
The best overview I have used is actually “Dash” by General Assembly. Its the first site that actually explained and got me to use -moz- and -webkit- , something I always see when inspect element or page source for websites.

But now I really want to learn HTML and CSS well, not just moving onto Bootstrap (which i’ve been told will become a crutch, much like jQuery to Javascript). But, to the standard of being able to use and understand most, if not all, of the documentation and have a solid foundation for landing and junior web dev job.

What are your favorite/best resources to take these essential skill to the next level? (apart from the obvious answer of just coding).

Thanks.

1 Like

Once you’ve learned the basics, the best way to progress is to try to build things. When there is something that you don’t know how to do (or don’t know how to do well), you research that particular technique (for example: flex or grid).

1 Like

Beginner level course:

Advanced:

Wait until these are on sale for $10-15 USD or also google search for “Udemy coupon” to reduce the price.

1 Like

Thanks for these.

Is the advanced course mostly on CSS or on Sass?

From what I’ve been reading on these forums and elsewhere, I should focus more on CSS than its processors.

Also do I need the Beginner’s course? Does it get quite in depth for HTML and CSS?

Well, the preprocessors are a great tool to extend what you can do with your CSS, and really help get you organized, which is a big part of your CSS skills

As for "advanced " CSS properties, they are one of those very few things on which learning in a totally random order, from multiple sources is actually a good idea.
So my advice would be to just use YouTube. Search for some videos on positioning, then floats, then flexbox, and maybe grid and variables. And specially, look for CSS tricks, so you learn to hack CSS in an engaging and fun way. Things like drawing with multiple backgrounds and using multiple box-shadow as borders are great, and will inadvertently up your CSS game without even trying

Lynda.com is where I personally learned the most about HTML and CSS. I did Colt Steele’s course as well (after I used the Lynda courses, that is) and found Colt Steele’s coverage to be woefully non-comprehensive in comparison, so maybe using Lynda.com is something you might want to consider.

These are the specific courses that I’d recommend. Some of them are beginner-level and will probably be review on stuff you already know, but I’d recommend going through them anyway to ensure that your knowledge is thorough & complete (and it never hurts to run through topics again).

https://www.lynda.com/Web-Development-tutorials/HTML-Essential-Training/170427-2.html

https://www.lynda.com/HTML-tutorials/HTML5-Structure-Syntax-Semantics/182177-2.html

https://www.lynda.com/CSS-tutorials/CSS-Essential-Training-1/569190-2.html

https://www.lynda.com/CSS-tutorials/CSS-Essential-Training-2/569189-2.html

https://www.lynda.com/CSS-tutorials/CSS-Essential-Training-3/609030-2.html

https://www.lynda.com/CSS-tutorials/CSS-Fundamentals/417645-2.html

https://www.lynda.com/Web-Interactive-CSS-training/CSS-Page-Layouts/86003-2.html

You might enjoy https://flexbox.io/ - it goes quite in depth into this one specific css topic. It’s free and quite fun, I think.

I agree that building a lot of stuff is essential for retaining the information though. One project that I did is build out this layout here, trying to get it really accurate: https://dribbble.com/shots/3118180-IT-Recruitment-Dashboard/attachments/659148

There are not really any assets used, so you should be able to get pretty close. Try to make it responsive too (you’ll have to come up with your own ideas of how the design should adapt to different screen sizes).

I promise you’ll learn a ton in the process since a few parts are quite challenging.

2 Likes

The beginner course is very in depth on most fundamental things for HTML & CSS. The Advanced course cover’s too much for me to go over here. Read the description on the course and look at the course syllabus. It is very comprehensive and even goes over flexbox too which is very popular now.

Maybe I’ll pay lynda once i have enough skills to make money from web web dev. Too expensive for now.
Thanks for suggesting specific courses and not just the site though.

I think I’ve already signed up for this site. It looks great.

Did you create that project, or is that the project you based yours on?

Very nice. I thought the advanced one will cover more sass than css, but if that isn’t the case then I will definitely get the course.

If you’re in the US, you might be able to access Lynda for free. You can check with your local public library to see if they offer access to Lynda.

1 Like

I didn’t create the design, no. This is my version of the implementation: https://sweller-dribble-mock-1.herokuapp.com

W3Schools, and i read som blogs

I nearly forgot completely about w3schools. I remember being told to use it in our computing class in high school ~10 years ago.
So surprised when I when I decided to learn web dev now and I read people saying negative things about it for some reason or other.

Either way. great resource.

Seems like a good list

Jonas Schmedtmann helped me a lot, and I fully recommend his course. He explains the architecture of css, best practices, how the browser handle css… it’s just amazing.