“What are some good introductions to current HTML and CSS for people?”
I got asked this question, and it’s a great one! Here’s a quick list of some of the guides, resources, and tools I use at my job; which I’ve found very helpful, forward-thinking, and accessible
Intro tutorial
- Learn Web Development - MDN
- Mozilla has put together a really well-structured introduction, with entry-points for various skill levels
Documentation & Guides
- MDN web docs
- Mozilla puts out some fantastic documentation for the various parts of HTML/CSS/JS, tutorials, and other reference material. It’s a bit hard to navigate though, so I’d start with the search field if you’re looking for something specific.
- caniuse.com
- A great way to check how supported a feature is across browsers. My rule of thumb is >86% for a non-critical HTML/CSS feature is good (especially if weighed for commonly used browsers)
- CSS-Tricks
- CSS-Tricks has become a de-facto lexicon for how to use various parts of HTML & CSS, and they do a great job at updating old articles. Starting off with a quick search there is always a good idea, IMO
- GridByExample
- CSS Grid is a new way of laying out a website, and it solves SO MANY PROBLEMS. If you’re new to web development, or haven’t checked in in a while, you need to spend some time learning CSS Grid. It’ll save you a ton of time and headache. This site was developed by Rachel Andrew, who’s been instrumental in making CSS Grid a reality.
- The Ultimate CSS Flexbox Cheatsheet
- Flexbox is another huge leap forward in laying out content on the web, and I reference this cheatsheet everytime I need a quick refresher.
Tools
- Sublime Text
- My go-to editor for years. It’s supported on all major platforms, it’s fast, and it includes a ton of great features like syntax highlighting and searching across your entire project. (Want to style Sublime Text? Check out base16)
- Firefox Developer Edition
- Mozilla continues to put out a browser with fantastic developer tools, and having a dedicated browser for web development is actually a great quality-of-life change. Firefox Developer Edition is often my go-to when I’m experimenting with a new idea.
- Nanoc
- If I want to quickly build a website, Nanoc is the first tool I reach for. I’ve been using it for years, and it’s my favorite static site generator because of its ease-of-use, flexible, no-nonsense approach. (PS: It’s what I’ve built Sunday Papers with!)
- CSS Grid Generator
- A quick tool to help define a CSS grid