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.



Sass & other CSS preprocessors

Start here to understand the basics of CSS preprocessors.

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.

Great, free stuff