HTML, CSS, and the DOM

Start here

By far, your most important front-end tool is the Chrome developer tools that come built-in with the Chrome browser. Absolutely explore and learn these tools as you will need complete fluency in order to build HTML, CSS, and JavaScript code.

Start with this great roadmap: “From Zero to Front-end Hero, Part 1”. (Part 2 is for JavaScript.)

Mozilla Developer Network generally puts out spectacular content for understanding front-end technologies. For example, check out their HTML introduction.

Check out these 101 tips for front-end, a really great collection of suggestions for improving your front-end code.

Try out JSFiddle, a free online tool allowing you to run HTML, CSS, and JavaScript together to see output.


‘Getting Started’ tutorials and books

Great resources and cheatsheets



Articles and tutorials


CSS for different sized screens

Sass & other CSS preprocessors

Start here to understand the basics of CSS preprocessors.

CSS Frameworks


A lovely, tiny library imparting a starting CSS framework to use in your site.


Bootstrap is a super important front-end CSS & JS library developed and used by Twitter. Stylistically it brings you the look and feel of a professional product, and tons of people use it. Luckily, their documentation is really excellent.


Material design is a concept developed by Google, which then developed into Materialize, a CSS & JS library, currently gaining hugely in popularity and competing with Bootstrap. The documentation is almost as good as Bootstrap’s.

Understanding the DOM

Without understanding the DOM–that is, Domain Object Model–you will not understand how code affects other code in a client’s browser.

Search Engine Optimization: or, How to Get Your Site Noticed Online

You can’t work online without understanding and caring about at least the rudimentary aspects of SEO.

Great, free stuff