Experimenting with HTML and CSS

The foundation of every website

Wireframes

A selection of wireframes to convert into HTML and CSS.

Special thanks to Olivia Ng for the inspiration for the Diagonal one. She has a cool CodePen with plenty more layout experiments.

  1. Classic

    Wireframe for the Classic layout.

  2. Classic offset

    Wireframe for the Classic offset layout.

  3. Side margin

    Wireframe for the Side margin layout.

  4. Hero viewport

    Wireframe for the Hero viewport layout.

  5. Boxed

    Wireframe for the Boxed layout.

  6. Shapes

    Wireframe for the Shapes layout.

  7. Diagonal

    Wireframe for the Diagonal layout.

Demo pages

Live demos of the wireframes with content. Find the home button on each page to get back here.

  1. Classic

    Screenshot of the Classic layout.

  2. Classic offset

    Screenshot of the Classic offset layout.

  3. Side margin

    Screenshot of the Side margin layout.

  4. Hero viewport

    Screenshot of the Hero viewport layout.

  5. Boxed

    Screenshot of the Boxed layout.

  6. Shapes

    Screenshot of the Shapes layout.

  7. Diagonal

    Screenshot of the Diagonal layout.

Content files

Text and images you can use for the wireframe exercises. Text is from Wikipedia, quotes from AZ Quotes and images from Unsplash.