Search form


Serve Up a Nutritious Web Site



Social Sciences
Technology & Media


3, 4, 5, 6, 7, 8

Brief Description

Students work in groups to create a Web site for an organic café while learning about the importance of food businesses promoting healthy eating choices.


Students will:

  • Learn the basics of organizing a business Web site
  • Explore creativity and multimedia skills
  • Work collaboratively as a Web design team, either in small groups or as a class
  • Organize, refine, and present information about healthy eating in different forms, including images, sounds and text


Web design, healthy eating, technology, creative

Materials Needed

  • Web design software geared for young students, such as Serif’s WebPlus. Most programs will have tutorials to get them going quickly.
  • Discuss with your IT manager the best way to make and have access to a shared drive or folder for students to store all the source files needed for the project, including text documents, digital photos, video clips, and sounds files.
  • A schedule for accessing the computers in your classroom.

Lesson Plan

With the entire class, visit other smoothie bar sites such as or to get your students thinking about the kind of features they would like their Web site to have. Using a data projector or interactive whiteboard, ask your students to take a good look at each site. Navigate the site and look at how pages are linked together. Explain the structure of Web sites and how they should make finding information easy for a visitor. Get them to make notes of which features they like or don’t like.

As you explore each site, identify site features and discuss terminology including navigation bar, buttons, links, text, headings, graphics and homepage. Talk about the illustrations, font size, amount of text, and any animations or other multimedia features.

Arrange the students into groups of four to five and explain to them that they are going to create a Web site for Smoothie World, a café business which promotes healthy eating. Alternatively, an entire class could work together to create a single, complete Web site.

Ask your students to work together to produce a site plan for the Smoothie World Web site to show the main structure of the site and how it will link together (four to six Web pages linked from the homepage should be enough). Get them to give an overview of what pages they will incorporate, for example: an ‘About us’ page, menu, contacts page, and fact sheets on the health benefits of a nutritious diet. Encourage individual group members to take responsibility for a different aspect of their page – making or finding illustrations or multimedia content, research, writing or proofreading or inputting content into templates. If working as a class, begin a brainstorming session to discuss proposed pages for the site.

Have students choose a style for the site, including color scheme, fonts and styles, logos, image maps or rollover images. Bright colors related to healthy foods, such as greens, oranges and yellows, might work best for promoting healthy eating. Ask questions to encourage students to consider how suitable their proposed designs are for their choice of theme and intended audience.

The production of the Web site will take several lessons, so make sure you give your class enough time to complete this part of their assignment. You might want to hold one or two sessions to let the class familiarize themselves with the software. Some, like Serifs WebPlus, have a wizard that can guide students through the initial site design. There are also lots of useful helpsheets and video tutorials on their Web site. Demonstrate that they can create a master page template that will replicate the color scheme and house style on all pages of the site.

Once their master template is set up, get students to write and input their page titles and text. Ask them to replace default text and images in the template with their own (there are lots of Web sites where graphics can be downloaded for free – start by searching Google). Serifs WebPlus, for example, enables students to modify most site features by double-clicking the object they want to change.

Encourage them to use a range of different component on their pages such as flash banners, rollover images, animations, video, and any other interactive content that they feel would be appropriate to the site brief. Don’t forget to make sure they include a customer feedback form, which includes a submit button to send responses to the webmaster’s email.

When their pages are complete, they need to create links and navigation bars that will allow visitors to find their way around the site and move from one page to another. Demonstrate how they can use graphical as well as text hyperlinks. Each page should have a navigation bar with buttons, which is consistently positioned in the same place on every page (so all pages can be reached from every other page without having to use the “back” button). They may also wish to use hyperlinks to external pages where visitors can find out more information about healthy eating or other related websites.

Advise students to proofread the entire site and test their Web site in an Internet browser. Get them to click every link to make sure they take visitors to where they are meant to go. Have students save text documents, artwork, or other items for their Web sites on a designated drive or folder on your class, school, or district's network. Remind them to save their work frequently.

When finished, have students visit the sites made by other students in the class and share their thoughts and suggestions. The completed sites can be published to a local folder for viewing within the school computer network or to a school Web site to showcase students' work.

Some final tips:

To extend the lesson, have students:

  • Create an animation for their Web site
  • Record a short video or audio clip
  • Add other interactive features as a hit counter, blog, poll, or shout-out box
  • Compile a list of top 10 tips for creating future Web site


Students’ grades should be based on their ability to:

  • Present accurate information and understand the subject matter
  • Find, select and organize relevant information
  • Understand the underlying basics of Web design
  • Match the content and language to their intended audience
  • Work together well in small groups to design the Web site

Lesson Plan Source

Serif Education - For more information about Serif’s award-winning range of software for classroom use, visit

Submitted By

Colin Hussey


Education World®    
Copyright © 2012 Education World