Learning HTML and CSS can feel like a bit of an uphill struggle, especially because there's almost too much information out there. Where do you even start?
- 10 best HTML5 template designs (opens in new tab)
To help you out, we've gathered together a selection of resources that will tell you what you need to know, help you when you're stuck, and get you expanding your skills in no time.
01. HTML Cheat Sheet (opens in new tab)
This incredibly helpful HTML cheat sheet includes a full list of all HTML elements, along with descriptions, code examples and live previews. You can organise the tags alphabetically or by category, and even download it as a PDF to refer to later.
Read our full post about it: Nail you HTML with this cheat sheet
02. CSS Cheat Sheet (opens in new tab)
If you're just starting out with CSS, merely remembering all the many tags and technical terms can be hugely intimidating. Don't let that put you off, though; keep this helpful cheat sheet bookmarked, or just print it out, to quickly find the elements you need.
03. CSS-Tricks (opens in new tab)
When it launched in 2007, this site was all about CSS. Now it's expanded quite a bit, but there's still plenty of helpful information and tutorials about CSS and HTML for you to get stuck into. It's definitely worth a visit.
04. CSS Wizardry (opens in new tab)
CSS is easy to learn but difficult to master. Harry Roberts' CSS Wizardry has some of the best articles on the nitty-gritty of writing scalable and maintainable CSS, like the BEM methodology and refactoring (which are among the hardest parts).
05. CodePen's Yearly Top Pens (opens in new tab)
One of the best ways to learn HTML/CSS is to dissect cool demos you discover, and CodePen's yearly Top Pens are great for that. The demos range from cool to 'I didn't even know that was possible'. CodePen's integrated UI for diving into the code is also convenient. In a similar vein, you might also like to check out our 8 CodePen features you didn't know about post.
06. Web Design Weekly (opens in new tab)
HTML and CSS are both constantly evolving. To stay up to date with the latest methodologies and features, we recommend this email newsletter. It comes once a week, which is just often enough that you'll actually read it.
07. Responsive Design Weekly (opens in new tab)
Responsive is a vital part of the web designer's toolkit these days, and to help you keep up to date, Justin Avery spends hours every week curating the best responsive web design content and interviewing industry leaders, and sends it out as a newsletter every Friday (You might also like our post on 10 really useful responsive web design tutorials.)
08. Create non-rectangular layouts with CSS shapes (opens in new tab)
Sara Soueidan (opens in new tab) is known for her clear and thorough teaching style. Here she perfectly explains how to use CSS shapes as well as addressing some of the challenges that you might face. It comes with examples to look through on GitHub. A must-read!
09. Jen Simmons Lab (opens in new tab)
In her experimental layout lab, Jen Simmons presents the latest CSS properties and uses them in practical ways. Take a look to see what's possible if you get creative with CSS.
Related articles:
