Make Your First Webpage | Working with a Grid

CC-BY-SA by Mozilla

45 minutes

Discover how HTML and CSS can work together to help you design a webpage and its structure content learning code, design, evaluate, revise, and synthesize.

Remix this lesson in Thimble!

Web Literacy Skills

21st Century Skills

21st Century Skills

Problem Solving

Web Literacy Competencies

Code Design Evaluate Revise Synthesize

Learning Objectives

  • Understand how to position and size elements within a grid using HTML and CSS.
  • Evaluate and code different grid designs for webpage layout.


  • 13+
  • Beginner web user


  • Projected instructor computer
  • Internet-connected computers
  • Thimble accounts
  • Markers
  • Paper
  • Scissors
  • Glue
  • Craft supplies
  • Today’s project
  • Webpage grid template, graph paper, or another kind of gridded paper for paper-prototyping