HTML and CSS Beginner Learning Resources


Part of my job these days is to teach the basics of HTML and CSS. I’m always looking out for resources that can help me explain concepts and help those interested to speed up and solidify their learning.

The list below contains what I consider to be the best of those resources. It includes text/code editors, learning sites and tools and utilities. On to the list…

Text/Code Editors

Sublime is incredibly popular in the front end community. It’s really slick and there’s a huge amount of plugins available to extend it’s feature set. Free to evaluate, $80 for a license.

Brackets

Brackets is an open source text editor that I use on all my training courses. It’s powerful, lightweight and has some pretty handy features like live preview. Available on both Mac and PC. Brackets is currently my code editor of choice.

Notepad ++ is just for the PC users out there. Again it’s a free, lightweight editor that does a great job. If you’re already familiar with Notepad, Notepad++ might be up your street.

Learning Resources

Codecademy is a great starting point for anyone looking to get to grips with HTML, CSS and other languages like JavaScript, Python and Ruby. The lessons here ease you in and provide you with an in browser code editor so you never need to leave the site to progress.

MarkSheet is a 50 lesson tutorial covering a wealth of HTML and CSS lessons.

Learn web development from Mozilla is a hugely comprehensive resource that covers everything you might want to learn in great detail.

Shay Howe’s Learn To Code HTML & CSS walks you through a lot of the elements of HTML and CSS and explains good and bad coding practices along the way. There’s even an advanced course for those that get through it.

Learn Layout is a simple walk through some of the more difficult CSS concepts to get to grips with, including: floats, display properties, positions, media queries and a lot more. It’s a great site to consolidate knowledge on and worth a run through to hammer things home.

CSS Cheat Sheet is handy for those that are struggling to remember how to achieve something specific with CSS

Flexbox Froggy

Flexbox Froggy is a great little game that teaches you how to use the uber useful Flex by positioning frogs on lilly pads. Everything is done in the same window and there are 28 levels to help you learn.

Taking a very similar format to Flexbox Froggy, CSS Grid Garden teaches you how to use CSS Grid – again there are 28 levels to work through which will give you a good working knowledge.

It won’t be long after you get to grips with CSS that you start wanting to play around with SASS. Getting Started with SASS is here to help. Essentially, SASS extends CSS that opens up the ability to use things like nested rules, inline imports and more. This is a great guide to getting started with SASS.

Tools & Utilities

Codepen is essentially a ready made environment for you to code in. No need to worry about any setup, just start coding. You can hook up your favourite scripts easily too. Great for experimenting with little snippets of code.

Colour Picker

HTML Color Codes has numerous ways to get colour codes using charts, colour pickers and names. All colours give the Hex, RGB and HSL values for easy implementation.

Google Fonts is a great font library to get started using web fonts. It’s easy to implement and has a solid base of fonts to choose from.

Div Table helps you to rapidly generate HTML tables for tabular data. Tables can be a real pain.

HTML Validator can help you to make sure that the code you’re writing is correct.

That should be enough to keep you going. If you know of any really useful resources that would help newcomers to coding HTML and CSS please let me know in the comments and I’ll add them to the list.

Don't be shy! Leave a comment…