HTML, CSS, and the 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.
‘Getting Started’ tutorials and books
- HTML & CSS, by Jon Duckett
- 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
- Skillcrush HTML tag cheatsheet
- OverAPI HTML cheatsheet
- HTML validations
- Visual guide to
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
relativepositioning: 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 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.
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.
- 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.
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.
- OverAPI HTML-DOM cheatsheet:
- MDN DOM docs
- W3Schools’ DOM docs
- tutsplus DOM tutorial
- HTML view any page’s tree layout
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
- 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.