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

• HTML (Mozilla)
• Google Web Fundamentals
• Why Use Semantic HTML? - Important read about which elements are considered essential for writing semantic HTML.

Document Meta Data

• The HTML Element
• HEAD - A list of everything that could go in the head of your document

Tutorials

• HTML Tutorial
• HTMLDog - HTML Beginner Tutorial
• HTMLDog - HTML Intermediate Tutorial
• freeCodeCamp learn - A great set of tutorials for covering all aspects of web development from beginner to pro.

Tools

• HTML Validator

CSS

Language

• CSS (Mozilla)
• CSS Intro
• CSS-Tricks
• CSS Basics

Tutorials

• CSS Tutorial
• HTMLDog - CSS Beginner Tutorial
• HTMLDog - CSS Intermediate Tutorial

Tools

• CSS Validator

---

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
  • Treehouse Quick Tips: Applying Normalize.css Browser Reset CSS
  • About normalize.css
• CSS Tools: Reset
• What is the difference between Normalize.css and Reset CSS?

Boilerplates

• HTML5 Boilerplate

Positioning & Layout

Box Model

• The box model
• Introduction to the CSS basic box model
• Box model recap
• CSS Box Model Sandbox

Positioning

• CSS Positioning in Ten Steps
• CSS Positioning 101

Layouts, Grids, Flexbox

• Relationship of grid layout to other layout methods
• A simple question to ask yourself when deciding between grid or flexbox is:
  • do I only need to control the layout by row or column – use a flexbox
  • do I need to control the layout by row and column – use a grid

Grid Layout

• MDN: Basic Concepts of grid layout
• A Complete Guide to Grid
  • Interactive Grid Cheat Sheet
• 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.

Flexbox Layout

• MDN: Basic concepts of flexbox
• A Complete Guide to Flexbox
  • Interactive Flex Cheat Sheet

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

• Methods to Organize CSS
• Accessibility — Make the web usable by everyone
• Accessible Rich Internet Applications (ARIA)

---

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