HTML, CSS, DOM
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.
- HTML & CSS, by Jon Duckett
- Learn to Code HTML & CSS, online tutorial
- 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
- Skillcrush HTML tag cheatsheet
- OverAPI HTML cheatsheet
- HTML validations
- Visual reference to CSS
- Codepen: visually see what CSS elements do, specifically margin, padding, and borders.
- OverAPI CSS Cheatsheet
- Mozilla’s CSS documentation: excellent tutorials, documentation, and demos.
- W3Schools’ CSS Reference
- CSS Specificity
- Box-Sizing: Border Box: an explanation of this really important and helpful concept.
- Flexbox Cheat Sheet: Flex box 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.
- Basics: understanding cascading and inheritance in CSS, an essential set of concepts.
- Sitepoint CSS reference
- The lowdown on
relativepositioning: particularly good once you’ve been messing around with HTML&CSS for a while.
- 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.
- Learn CSS Layout with detailed breakdowns, visuals, and code excerpts.
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.
- OverAPI HTML-DOM cheatsheet:
- MDN DOM docs
- W3Schools’ DOM docs
- tutsplus DOM tutorial
- HTML view any page’s tree layout