Make Your First Webpage | Revise a Business Page

• 1. Preparation

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

  Tailor this activity for your audience. For example, you might edit the business page template to reflect a particular interest shared by your participants or to reflect a type of business with which they’re all familiar.

• 2. Introduction

  5 minutes

  Welcome your learners and explain:

  Today we’ll be using the HTML skills we’ve learned so far to remix a business page.

  We’ll need to come up with some ideas for business models, names, and mottoes, as well as decide on the best kinds of business contact information to include online. Once we’ve come up with those ideas, we’ll use them to create our own business pages from a template written in Thimble.

• 3. Offline 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.

  This is a simplified open canvas adapted from the Open Canvas template used by the Mozilla Science Lab and Mozilla’s Open Leadership Training Series. Pass out copies of the template. Then go over the template with your learners and then ask them to use it to generate business plans they can use in their online remixes later in the activity.

  You can use a “canvas,” or planning document, to come up with ideas for your own businesses. We’re going to go over this template and use it to help us write the business plans we need for our remix activity later in the day.

  Here are the parts of the template we need to complete. Listen as I list and explain them. Be sure to ask questions as we go or at the end of my explanation so we can all move ahead together.

  • What problem does your business want to solve? Tell us about the design problem you want to tackle. This should be a human- and user-centered problem - something real people need solved. You should try to plan a business that serves a lot of people’s needs (or serves some people’s needs extremely well) to be successful.
  • What product or service will you sell to solve that problem? Tell us about what your business will make or offer customers. A product is something your customer can buy and take with them. A service is something you do for the customer.
  • Who will use your product or service? What kinds of people will be most interested in it? You don’t need to name names, but try to imagine and describe real people who need your business. By thinking of real use-cases - of examples of how people might use your product or service - you’ll help yourself design a solution that works for others, not just for you.
  • Why will they choose your business over another? Tell us about your special sauce. How do you plan to beat the competition?
  • What are the best ways to reach those people online and off? Tell us about the channels you’ll use to reach your customers. Do you need a mobile site? An Instagram account? Where will you be online so that people can discover your business? Think about where the people you described look for information.

  Once you’ve gone over each part of the template and answered any questions, ask learners to develop their own ideas and to complete the template before moving on to the next part of the activity. Take about 10 minutes for the brainstorm.

  You may also have learners work in small groups to develop shared business plans or you could even have the whole-group come up with a common business plan together. You could work in a small group with participants who struggle to complete the canvas to come up with a plan they all can share. The big idea is to make sure everyone has some content to work with during the online remix part of the activity.

• 4. Online 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.

  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.

  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/2bUy2D8.

  This is the template for a basic business front page. We’ll each revise a copy of the page to look a business we’d like to run. As we make our revisions, though, it’s important not to share too much personal information. For now, only revise what the tutorial asks you to revise. If you’re an adult and want to add more information later, that’s fine. If you’re not an adult, get help from a parent or guardian to think through privacy issues before adding anything else to the page.

  We’re going to use the business page to practice what we’re already learned about composing and styling webpages with HTML. We might also use CSS - or cascading stylesheets - to style some parts of the page to go beyond bold, italic, and underline.

  Hit Remix to go into Thimble.

  At this point, be clear about what your learners should make. Is each learner making their own business page? Are all of your learners making a page about the same business - one you assigned or one the whole group created? Are small groups of learners each making pages based on business ideas they came up with in their groups? Make sure learners know how to process before you begin demoing tutorial.

  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 take a look at how business page is put together and then use the tutorial to begin making our changes.

  Follow along as we change our business name, motto, description, and contact info. You do not need to update or share any information that you don’t feel comfortable sharing, and I’ll remind you of this as we work through the tutorial.

  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 decisions about what kinds of information to include where. 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 explain why it might be good to have a business page on the web?
  • What do you think a business page on the web should do? How should it be set up? What kind of information or features should it have to make it useful for business owners and their customers?
  • What other features would you add to this webpage for your business? How would you start to learn how to do that?
  • In your own words, can you summarize the kinds of changes you made to the page and how you learned to make them? How have your web literacy skills developed so far?
  • In your own words, how would you describe the benefits and challenges of working with something like a canvas to create a business plan or to plan a project?

  Up Next --> Working with a Grid

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