Learning HTML & CSS
This section contains resources for learning HTML & CSS. The two languages are so interrelated it only makes sense to learn them in parallel.
Note this is a living document and is constantly being updated. Some things may come and go over time.
Beginner¶
A beginning HTML and CSS programmer is someone that is new to both languages and possibly programming. This set of resources spans learning what each language is, how they work together, and the basics of more front-end design oriented topics such as fluid design, responsive design, and mobile design.
HTML¶
There is no shortcut to learning HTML or CSS. The best teacher is practice and application. Make things, break things, and analyze why certain HTML tags or CSS selectors work (or don't). Make use of a live server type environment to speed up your development workflow.
Language¶
Document Meta Data¶
- The HTML Element
- HEAD - A list of everything that could go in the head of your document
Tutorials¶
Tools¶
CSS¶
Language¶
Tutorials¶
Tools¶
Intermediate¶
An intermediate HTML and CSS programmer is someone that is familiar with both languages and can build simple pages and functional websites based off mockups or wireframes.
CSS Units¶
- W3 CSS Units
- CSS values and units
- Web Style Sheets CSS tips & tricks
- Your Ultimate Guide to CSS Units – All You Need to Know
- CSS Units Best Practices
- The quick guide to CSS length units
Resets & Boilerplates¶
CSS Normalize & Resets¶
- Reboot, Resets, and Reasoning
- Normalize.css
- CSS Tools: Reset
- What is the difference between Normalize.css and Reset CSS?
Boilerplates¶
Positioning & Layout¶
Box Model¶
Positioning¶
Layouts, Grids, Flexbox¶
- A Complete Guide to Grid
- A Complete Guide to Flexbox
- CSS Grid — a simple layout design tutorial - Great intro to CSS Grid. Part of another great resource: The CSS Visual Dictionary. This gives great visual examples of CSS in use. The Author (JavaScript Teacher) of these works has tons of other useful articles on Medium.
Media Queries¶
- Using media queries
- Responsive web design
- Media Queries for Standard Devices
- Media Queries Demystified: CSS Min-Width and Max-Width
Tools¶
- CSS Media Queries - Great tool for inspecting which media queries apply to your current device
- Simple CSS Media Queries - Tool for generating media queries for devices
- Test Responsive and Device Specific Viewports in Google Chrome
Preprocessors¶
- SASS (SCSS)
- LESS - Less (aka Leaner Style Sheets) is a dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets and run on the client side or server side.
- Intro to CSS Preprocessors
Organization¶
Advanced¶
An advanced HTML and CSS programmer is someone that is an expert with both languages and can architect nearly any possible website for any possible platform.
CSS¶
CSS Specificity Hierarchy¶
- What is CSS specificity hierarchy
- W3: Calculating a selector's specificity
- CSS Specificity Calculator - Really useful!
CSS Ninja¶
- CSS Best Practices – 14 Steps to Become a CSS Ninja Pt1
- CSS Best Practices – 14 Steps to Become a CSS Ninja Pt2
CSS Methologies¶
BEM – meaning block, element, modifier – is a front-end naming methodology thought up by the guys at Yandex. It is a smart way of naming your CSS classes to give them more transparency and meaning to other developers.
- MindBEMding – getting your head ’round BEM syntax
- BEMIT: Taking the BEM Naming Convention a Step Further
Other¶
Handbooks, Guides, Interview Questions¶
- Front-End Interview Handbook
- Back-End Developer Interview Questions
- Tech Interview Handbook
- Code Guide by @mdo - A guide by the author of Bootstrap.
Front-End Frameworks¶
- Foundation
- Shoelace - Like bootstrap but smaller