Make Your First Webpage | Working with a Grid

• 1. Preparation

  15 minutes

  Try the offline and online activities before you teach the lesson. You can find the online activity here.

• 2. Introduction

  5 minutes

  Welcome your learners and congratulate them of working through so many web literacy skills like code and remix on their way to creating their own webpages.

  Explain:

  Today we’ll be learning how to use HTML and CSS together to make a grid that makes it easy to mess around with the layout of a webpage.

  To begin, we’re going to brush up on our fractions!

• 3. Offline Activity

  15 minutes

  Use the scripted bits in pink and steps below to help learners follow your instructions and learn about the differences between block and inline elements. Pause to answer questions, rephrase instructions, and improvise new explanations as needed.

  Let’s begin by plotting some possible webpages together using templates as paper prototypes, or experiments in design.

  I’m going to hand-out a webpage design template to each of you. It will have one row that is the entire width of our paper prototype webpage. The column in that row will be our fraction 1/1, or 1 whole unit, or 100%.

  The next row will have two columns that each take up half the page. Those columns in the second row will each represent the fraction ½, or 50%.

  The last row will have 4 columns that each take up 25% of the page, or ¼.

  Your job is to sketch, sticker, collage, write, or otherwise put some content in each box, like the name of your webpage, a stick-figure sketch of something that might be on your webpage, or a paragraph about you or something you like and want to talk about online. Really, each column is a container for your content.

  We’ll take about 10 minutes to finish our paper prototype webpages, and then we’ll cut out each column.

  Next, we’ll trade columns with the people in our groups until everyone has a whole page again - a 100% piece, 2 of the 50% pieces, and 4 of the 25% pieces.

  Finally, we’ll paste together new webpages from all the columns we collect and then share them back with the group to see what kinds of cool combinations we discover.

  Any questions?

  Let’s start! I’ll pass out scissors and let us know when it’s time to trade. Then I’ll pass out glue and paper for cutting and pasting.

  Make sure every student has the help they need to put content on their templates, to cut them up, and to paste together their new paper prototypes. Be sure to adapt the activity to help those who experience difficulty with any of the manual parts of the work.

  Ask group members to share their remixed paper webpages with one another before you move on to the next step in the activity.

  If time allows, invite learners to take a gallery walk or to otherwise move between groups to see what other participants have made around the room.

• 4. Online Activity

  20 minutes

  Use the scripted bits in pink and steps below to help learners follow your instructions and learn about the differences between block and inline elements. Pause to answer questions, rephrase instructions, and improvise new explanations as needed.

  You can do this activity on paper if you’re in a lo-fi or no-fi setting without access to the internet or computers. Print copies of the business page project from Thimble for participants to use as templates. Then they can write and illustrate their own business pages using markup techniques from HTML to structure and organize the information on their paper prototypes.

  Now let’s move from paper to the web. We’re going to use the same kinds of fractional pieces of a webpage to play around with layout and design today.

  Take your learners into Thimble.

  First, let’s visit today’s project in Thimble. Here is the URL.

  Post an easily readable shortened link to today’s activity like http://bit.ly/2cijIqR.

  This is a project that uses a simple CSS grid to manage the layout of an HTML webpage. We’ll each play around with the grid in the project to create a layout we might like to use for our own webpage later on in the module.

  The grid will help us show off what we’ve learned about code, revise, and remix during our work with HTML and CSS.

  Hit Remix to go into Thimble.

  Once you’re on the remix screen, sign in to Thimble. If you haven’t created an account yet, you need an email address to do so. Does anyone need help getting an account or signing in to Thimble?

  Help students create accounts, sign in, or use a class account.

  Is everyone ready to begin? Let’s figure out how the grid is put together and then use the tutorial to begin customizing it for our own webpages.

  Follow along as we experiment with different column sizes, colors, and content on the webpage.

  Take your learners through the Thimble tutorial. You can also use it to guide them through a paper-based version of this activity.

  Take the next 15 minutes for participants to revise the page and make editorial decisions about its layout and where to put different kinds of content. If you have time left over at the end of this part of the activity, invite learners to take a quick ‘gallery walk’ around the room to look at their peers’ work.

• 5. Reflection

  5 minutes

  End the activity with a brief reflective discussion of how webpages are structured. You can collect and assess learners’ responses in other ways, as well, but be mindful to do so in ways that are fair to all of your learners and allow them each individually the greatest amount of expression possible.

  • In your own words, how would you summarize the way HTML and CSS work together to use grids for layout?
  • How does a grid help with composing and designing webpages?
  • What observations would you make about connections between math and design or layout?
  • Why do you think a 3-column design for the main content of a webpage became popular? Why would people use it?
  • When wouldn’t you use a grid? How might you break a grid or break the “rules” of design if you wanted a really unique or striking webpage?

  Up Next --> Make Your First Webpage

  Questions? Comments? Suggestions for improvement? Email Chad Sansing, curriculum developer at the Mozilla Foundation.