Lesson 2: Website Design

Unplugged

Overview

In this lesson students will design a sketch of a first draft of a personal home page. Creating a sketch reinforces the problem solving process. Students will first define what is included in a personal home page is. Then students will begin to prepare for creating their own page by sketching out a home page.

Purpose

Students get a chance to flex their creative muscles in this lesson. Having just looked at what can make a website achieve its purpose, students now get the chance to start thinking about how they would put some of those ideas into practice. They are also introduced to the idea of personal website. This lesson is the start of students work on their personal portfolio website. They will be working towards this final project in almost every lesson through out the unit. Each step builds on the previous so is important that students complete each step. As a guide below are the lessons and the activities students do in each connected to the project:

Personal Portfolio Project Process

  • Lesson 2 - Design your Home page on paper
  • Lesson 4 - Start your Hobbies and Recipe pages
  • Lesson 5 - Start your About Me page
  • Lesson 6 - Fix bugs in your website
  • Lesson 7 - Add style to your About Me page
  • Lesson 8 - Add more styling to your About Me page
  • Lesson 9 - Create your home page on the computer AND Bring together your Hobbies, Recipe, About Me and Home pages into one website
  • Lesson 10 - Add special styling to website using classes
  • Lesson 11 - Receive feedback from peers to help improve your website
  • Lesson 13 - Review your website and publish it for the first time!
  • Lesson 14 - Optimize your website for search engines
  • Lesson 15 - Add a Cause page and make sure to give credit to any work you used that is not your own
  • Lesson 16 - Finalize your website!

Agenda

Warm Up (5 minutes)

Activity (35 minutes)

Wrap Up (10 minutes)

Extension Activities

Objectives

Students will be able to:

  • Identify common elements that appear on a personal website home page.
  • Identify reasons that people create websites.

Preparation

  • Make sure students bring their Web Development Practices - Project Guide
  • Journals
  • A blank piece of paper for each student
  • Pencils
  • Colored pencils, colored thin-point markers, colored thick-point markers, or something to add color to drawings etc.
  • (optional) Class set of straight edges (rulers, edge of a book, etc)

Links

For the Students

Vocabulary

  • Web Designer - A Web designer is someone who prepares content for the Web. This role is mainly related to the styling and layout of pages with content, including text and images.
  • Website Home Page - A home page is the initial or main web page of a website.

Support

Report a Bug

Teaching Guide

Warm Up (5 minutes)

Journal: Why make a website?

Discussion Goal

Ideas that might come up in the discussion:

  • To promote a cause they care about (non-profits)
  • To help run a business (online store)
  • To share information about themselves (blog, personal website)
  • To create a place for people with similar interests to get together (forum)
  • To share your knowledge with others

Goal: Last class students looked at what makes a website good or bad. Before getting more into design of websites, have students think about why people make websites.

Set Up: Students take out their journals.

Have students answer the prompt individually in their journal.

Prompt: When in your life might you want to make a website? Why?

Discuss: Once students have answered the prompt in their journal, have students share out to the class their ideas for why they might want to make a website. Consider keeping a list of reasons people might want to make websites.

Activity (35 minutes)

Define: Personal Website Examples

Prepare: Designing Your Personal Home Page

Goal: Students will be able to design and to sketch a first draft of the landing page for personal website according to their individual high-quality feature list and essential elements list that they produced in the warm-up.

Set up: Set students up with all the drawing materials for creating their sketches (pencil, straight edge, coloring devices). Make sure each student has a blank piece of paper to design their home page on.

Remarks

Good web designers follow the problem solving process and plan before making a website on the computer. Today we are going to plan for creating our own home pages. The home page is just the first page you see when you go to a website. The designs you make today will just be sketches and many things may change once we get on the computer. That is okay. This is just the ideas phase.

Have students begin creating sketches! Give students lots of time to do something creative.

Wrap Up (10 minutes)

Goal: Students see what their classmates have created in designing the home page of their websites.

Setup: Once students have a draft of their Personal Home Page, have students hang their website sketches around the room.

Once all the drafts are hanging have students walk around with their journal and write down new ideas for their home page.

Collect: Collect the students worksheets to keep for later in the unit. They will come back to this design in future lessons.

Extension Activities

If you have time you could have students edit their designs and make further improvements to them based on feedback.

View on Code Studio

The Internet - Web Development: Lesson 2 - Website Design

Background

In this lesson students will design a sketch of a first draft of a personal home page. Creating a sketch reinforces the problem solving process. Students will first define what is included in a personal home page. Then students will begin to prepare for creating their own page by sketching out a home page.

Vocabulary

  • Web Designer - A Web designer is someone who prepares content for the Web. This role is mainly related to the styling and layout of pages with content, including text and images.
  • Website Home Page - A home page is the initial or main web page of a website.

Resources

View on Code Studio

Identifying Essential Elements of a Personal Website

Goal: Students will look at several examples of personal websites to identify common essential elements of personal websites.

Distribute: Make sure students have their journals out.

Setup: Students should have out their Quality Website Features list (in Web Development Practices - Project Guide).

Say

In this Unit you are going to make websites to share information and projects you create in this class. This is called a personal website. Today you're going to be web designers and start thinking about designing your website.  You're going to be sketching a design on paper for the home page of your personal website first we will be looking at some pre-existing personal websites.

Transition: Move students to Code Studio Bubble 2 of Lesson 2.

Students will answer the following prompt in their journal:

Prompt: Explore the 4 websites and answer the following questions:

  • What new features do you notice that could be added to Quality Website Features list from last class?
  • What common elements do you notice across all the websites? For example does every page have a title?

Discuss: Have students share the features they noticed especially any new observations. Have students add any newly found features to their list in Web Development Practices - Project Guide.

Display: Display a copy of the Quality Website Features list that was created in Lesson 1 and update it.

The list of common elements should include things such as:

* Title
* Name
* Navigation Bar
* Image
* Small text areas
* Areas which are boxed and bordered

Discuss: In addition have students share common elements. Create a list.

Display: Create a list of suggested elements of a personal website where the whole class can see it for the following activity.

View on Code Studio

Personal Home Page Examples

Prompt

Explore the following 4 websites and answer the following questions in your journal.

  • What new content and style features do you notice that could be added to high quality feature list from last class?
  • What common elements do you notice across all the websites? For example does every page have a title?
  1. Personal Website 1
  2. Personal Website 2
  3. Personal Website 3
  4. Personal Website 4

Standards Alignment

View full course alignment