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.

HTML

‘Getting Started’ tutorials and books

• HTML & CSS, by Jon Duckett
• Little tutorials on HTML, CSS, JavaScript
• Learn to Code HTML & CSS, online tutorial
• HTMLDog guides and tutorials on learning HTML and CSS.

Great resources and cheatsheets

• HTML5 geolocation: getting the user’s location from their browser.
• HTML5Rocks HTML5, CSS tutorials
• Understanding the HTML head
• HTML tags list
• Mozilla’s HTML reference
• OverAPI HTML cheatsheet
• HTML validations
• Charsets

CSS

Documentation

• Visual guide to border, margin, padding, width and height, and generally the box model.
• General visual reference to CSS
• OverAPI CSS Cheatsheet
• Mozilla’s CSS documentation: excellent tutorials, documentation, and demos.
• Sitepoint CSS reference
• W3Schools CSS Reference

Articles and tutorials

• CSS Specificity
• Box-Sizing: Border Box: an explanation of this really important and helpful concept.
• Basics: understanding cascading and inheritance in CSS, an essential set of concepts.
• The lowdown on absolute vs relative positioning: particularly good once you’ve been messing around with HTML&CSS for a while.
• Learn CSS Layout with detailed breakdowns, visuals, and code excerpts.
• CSS Debugging tips

Flexbox

• Flexbox Froggy: a light-hearted game that introduces you to basic Flexbox properties.
• Flexbox Cheat Sheet: flexbox is an awesome overtaker in the painful area of element positioning. No more float: left! Flexbox really is magical.
• A great flexbox guide, very much in depth.
• Finally making a sticky footer with flexbox
• An animated guide to learning flexbox

CSS for different sized screens

• The 100% Correct Way to do CSS Breakpoints: writing code for a variety of screen sizes.
• Understanding media queries, an essential part of building web pages that respond to changing screen sizes.

Sass & other CSS preprocessors

Start here to understand the basics of CSS preprocessors.

• Sass reference and getting started
• Nested selectors in SCSS/Sass

CSS Frameworks

Skeleton

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

Bootstrap

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.

• Bootstrap forms
• Free Bootstrap themes
• Material Bootstrap design: lots of great UI pieces to use, a good library to know.
• Bootsnip: free Bootstrap code snippets.

Materialize

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.

• Google’s Material design resources
• Gorgeous material design UI kit

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.

• OverAPI HTML-DOM cheatsheet:
• MDN DOM docs
• W3Schools’ DOM docs
• tutsplus DOM tutorial

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.

• “SEO Secrets: Reverse-engineering Google’s Algorithm”

Great, free stuff

• Getting an actual sticky footer with just a bit of HTML, CSS, and flexbox.
• Cute speech bubble maker
• Amazing icons that are even able to animate into other icons!
• Serve raw files from Github for use in your projects: serves raw files directly from GitHub with proper Content-Type headers. Meaning you can use this to link directly to files in Github repositories.