HTML and CSS templates

Extremely simple templates for starting a small project.

Below is an overview of the terms. Open the similarly named HTML file and its CSS to see it in action.

Videos (2018): Intro to Web Apps

basic

A plain vanilla HTML page with no CSS.

Example page

File: basic.html

simple

This page has a CSS file attached. View page.

File: simple2.html

box-sizing

Web pages by beginners often look horribly different in different Web browsers. Often this can be traced back to the ways in which margin and padding are specified in the CSS. Some web browsers interpret some aspects of margin and padding differently from other browsers.

Resource 1: box-sizing

Resource 2: Inheriting box-sizing Probably Slightly Better Best-Practice — this is what I do now (except the ::before and ::after parts), but it might be overkill for beginners

Video: How box-sizing fixes a width problem (demo) Margin, padding, and how to center elements with margin: auto are discussed.

Example page

flexbox

Beginners can get very confused about the differences among flex, float, grid, and inline-block (all covered below). Think of flex as the modern solution to solving challenges with a set of small items (or boxes) on a page. However, for a full-page layout solution, look to grid instead.

Browser support for CSS flexbox is very good.

Resource 1: Using CSS Flexible Boxes

Resource 2: A Complete Guide to Flexbox

Resource 3 (video): Flexbox Tutorial: Real Layout Examples

Example page

floats

In CSS, float declarations are commonly used to place elements (such as images, or sidebars) on a page. They pose challenges for beginners, in large part because usually they must be "cleared" after use.

Problems with floats also arise because of the box-sizing issue (see above): when there is not enough space for a floated item, elements "fall down" below instead of floating side by side, as you intended. The error with insufficient space can be caused by the width of margins and padding — the sum of all the widths is greater than you calculated. This can also occur as part of inheritance (the "cascade" of Cascading Style Sheets).

Resource 1: float (a great reference at Mozilla Developer Network)

Resource 2: CSS Floats 101

Video: Clearing floats

Video: Comparing floats with positioning (demo) Relative, absolute, and fixed position are discussed after floats.

grid

The CSS grid has revolutionized grid-style page layouts, making floats and inline-block styles unnecessary in many cases (but not all). Good planning is required before you can implement the grid effectively. See also flexbox above.

Browser support for CSS grid is pretty good but not yet universal.

Resource 1: Basic concepts of grid layout

Resource 2 (video): CSS Grid Changes EVERYTHING

Resource 3: Building Production-Ready CSS Grid Layouts Today — by the guy in the video

Resource 4: Layout Land — great videos by Jen Simmons, Mozilla Designer and Developer Advocate

Resource 5: Grid by Example — super-short videos that each show how to do just one thing, by Rachel Andrew (check out her website too)

inline-block

It's possible to replace the float techniques with display: inline-block. Each method has issues, and each method requires that we use box-sizing to make it work properly. Beginners must understand that they cannot use the two together; it's an either/or choice.

Resource: What’s the Deal With Display: Inline-Block?

Example Compares inline-block and floats.

Normalize.css

This stylesheet is widely used throughout the web design community to smooth out all the differences among browsers. Load this first, then load your own CSS file. All the HTML files here (except basic.html) use Normalize.

Resource: Normalize.css

universal selector

The web design community expresses various opinions about use of the universal selector (*) in CSS. It should not be overused. I use it for box-sizing in most of my CSS stylesheets.

Resource: Universal selectors (MDN)

viewport / responsive pages

All the pages here use the viewport meta tag in the HTML head element. It helps to make your pages look good on small screens, i.e. mobile. However, just slapping the tag on your page does not instantly fix everything.

Resource 1: Stop using the viewport meta tag (until you know how to use it)

Resource 2: Use CSS media queries for responsiveness