Swipe
Project 09
Custom properties, grid, flexbox, a WebGL canvas
The last project of the course: a landing page for a payments company, modelled on Stripe's, with an animated gradient in the hero and a mobile menu.
Work
Course projects, newest first. Click any of them to open the real page.
HTML & CSS
9 projects
From Colt Steele’s HTML & CSS bootcamp.
Grid Portfolio
Project 08
CSS grid, template areas, keyframe animation, JavaScript
A portfolio page whose grid rearranges at two breakpoints. The hamburger menu opens with a few lines of JavaScript.
Cost Estimator
Project 07
Flexbox, positioning, transforms, gradients
A pricing panel with plan tabs, a toggle, a slider and two billing cards. The controls are static. The exercise was drawing them with CSS alone.
Hazel CV
Project 06
Flexbox, three breakpoints
A one-page CV for a fictional scientist, with a nav bar and two-column sections.
Blog Post
Project 05
Typography, font pairing, px, em and rem
A long article about web typography, styled with the techniques it describes. Bitter for the headings, Mukta for the text.
Artist Portfolio
Project 04
inline-block layout, object-fit, media queries
A gallery page for a ceramics shop. Two columns of cards that drop to one on narrow screens.
Ski Resort
Project 03
The box model
A notice card centred on a dark page: a fixed width, padding, auto margins and rounded corners.
Cantilever
Project 02
Web fonts, text-shadow, media queries
A poster page for a made-up conference. The word "artists" gets a stack of coloured text shadows, and the type shrinks on smaller screens.
Fresh Pasta Dough
Project 01
HTML, no CSS
A recipe page with no stylesheet at all: headings, two lists, a photo, and a link that jumps to the notes at the bottom.
HTML & CSS exercises
5 pieces
Hover states, transform
The Artist Portfolio layout again, with coffee. Cards grow a little on hover.
box-shadow, transitions
The same layout a third time, with card shadows and an extra breakpoint for small phones.
Pseudo-elements, transitions
Buttons that fill with pink from the left on hover. The fill is a ::before element sliding in behind the text.
