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
A plain vanilla HTML page with no CSS.
This page has a CSS file attached. View page.
Web pages by beginners often look horribly different in different Web browsers. Often this can be traced back to the ways in which
padding are specified in the CSS. Some web browsers interpret some aspects of
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
::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.
Beginners can get very confused about the differences among
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
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
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.
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
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
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.
Example Compares inline-block and floats.
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.
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 2: Use CSS media queries for responsiveness