index

Simple templates for starting a small project.

> GitHub repo (all files, more resources)

basics

Here's a basic vanilla template for HTML. It has no CSS. (All other pages use Normalize.css. The Normalize file has been minified.)

Here is a simple HTML page that has simple styles applied; these styles work on any size device.

This page has a CSS file attached, with minimum styling. No Normalize.css. No viewport meta tag. It has some DIVs styled as colored boxes.

box-sizing

When things don't fit the way you expect, box-sizing can help.

> CSS box-sizing example

viewport meta tag

You'll find the viewport meta element in the head of every HTML file here. Here's why.

flexbox

> CSS flexbox example

Videos: (1) Intro to CSS flexbox (2) Use CSS flex to style a header and nav (3) Using CSS flex to scale images in a row

floats vs. grid

> CSS floats example

> CSS grid example

Learn more about CSS grid at MDN.

inline-block

> CSS inline-block compared with floats