Lesson 13: Website Review and Publish

Web Lab

Overview

After reflecting on their experience exploring digital footprints, students brainstorm a list of Personally Identifiable Information (PII) that should not be included on their websites. Once they have added the list to their Web Development Practices - Project Guide, each student will use the everything in their practices packet to review their own site to make sure it meets those standards before publishing to the world for the first time!

Purpose

This lesson marks the first time that students will be sharing out their creations publicly on the internet, and therefore places a heavy focus on scrubbing PII from student websites before publishing. In addition to filtering out private information, students will also use their Web Development Practices to review their pages.

Agenda

Warm Up (5 min)

Activity (40 min)

Wrap Up (5 min)

Extension Activities

Objectives

Students will be able to:

  • Identify the impacts of sharing specific personal information online and consider what level of sharing is appropriate
  • Review a website for personally identifiable information

Preparation

Links

For the Teacher

For the Students

Vocabulary

  • COPPA - Children’s Online Privacy Protection Act (COPPA) was designed to protect information of children under age 13 while accounting for the dynamic nature of the Internet.
  • PII - Personally Identifiable Information - any personal details that, if shared online, could allow one to be identified

Support

Report a Bug

  • How best can we teach students about COPPA, particularly in a course where some students will fall under COPPA while others won't?

Teaching Guide

Warm Up (5 min)

Finding Your Footprint

Prompt: Thinking back to yesterday's Social Sleuth activity, are there places online where you may have overshared personal details?

Discuss: Have students share. They don't need to share the specific details, but have them discuss how frequently they may have overshared online, and what we might do about it.

Remarks

The security of your personal information is so important that there's actually a national law, known as COPPA (the Children's Online Privacy Protection Act), designed to protect students under the age of 13 from having their personal information collected by websites. That's why so many websites won't allow people under 13 to sign up, because they plan on collecting information about their users that would violate COPPA!

Activity (40 min)

Think Before You Publish

Group: Place students in groups of 3-4.

Prompt: In your groups, brainstorm a list of all the personally identifying details that we saw in the social media profiles yesterday. Make sure you include both the elements that could obviously be used to identify you (such as phones numbers) and those that were less obvious, but still lead to detailed personal information (such as pictures with your address visible).

Teaching Tip

As students share back the details they came up with, make sure you call out details that are clearly a problem (such as an address or phone number) versus those that are less personally identifiable (such as the fact you have a pet, or your favorite color). Let students know that the purpose of this is not seek total anonymity online, but rather to make sure that we aren't sharing information that would allow a stranger to figure out who you are. Sometimes that line is fuzzy.

Share: Have groups share back their lists of details, keeping track of the whole class's responses on the board.

Remarks

The type of details we've listed here is known as Personally Identifiable Information. It's important that you're careful not to include details that would allow a stranger to identify your online. This doesn't mean, however, that you can't put anything personal on your websites. In fact, in this class there will be many things that you will want to share on your sites that are personally relevent, such as the projects that you will create.

Distribute: Have students take out their Web Development Practices - Project Guide and turn to page 5.

Prompt: Using the list we just created as a reference: Choose what you feel are the 10 most important PII details that you would not want to share online and add them to the list on page 4 of your Web Development Practices - Project Guide

Website Review

Teaching Tip

While the focus of this lesson is on preparing students to publish their pages, technically they've been accessible all along, we just haven't been sharing the URL with others. From this point forward students should always assume that changes they make to their websites can be seen by the world at large.

Transition: Transition students to Code Studio.

Set up: Student should still have their Web Development Practices - Project Guide out while on Code Studio.

Wrap Up (5 min)

We're Published, Now What?

Journal:

  • In reviewing your website for publishing, what did you need to change or fix?
  • What's the next step you want to take to improve your website?
  • Who would you like to see your website and give you feedback?

Extension Activities

Publish the URLs for all student websites somewhere they can all see (such as a class website or LMS) and give them an opportunity to view (and review) each others' websites. Set up a form for students to vote for their favorite sites in a variety of categories, such as:

  • Best color scheme
  • Easiest to navigate
  • Most unique layout
  • Easiest to read code
View on Code Studio

The Internet - Web Development: Lesson 13 - Website Review and Publish

Background

After reflecting on their experience exploring digital footprints, students brainstorm a list of Personally Identifiable Information (PII) that should not be included on their websites. Once they have added the list to their Web Development Practices - Project Guide, each student will use the everything in their practices packet to review their own site to make sure it meets those standards before publishing to the world for the first time!

Vocabulary

  • COPPA - Children's Online Privacy Protection Act (COPPA) was designed to protect information of children under age 13 while accounting for the dynamic nature of the Internet.
  • PII - Personally Identifiable Information - any personal details that, if shared online, could allow one to be identified

Resources

View on Code Studio

Student Instructions

High Quality Features Check

Use your Web Development Practices - Project Guide to review your website for publishing. First you will look at the list of features you said you thought made something a high quality website to make sure you are doing those things.

Do This

  • Open your Web Development Practices to page 1
  • Read through the feature list
  • Pick a couple features you might want to improve after reading the list
View on Code Studio

Student Instructions

HTML Tags Check

The next check should be for bugs or issues with your HTML.

Do This

  • Make sure you are viewing your index.html file on Web Lab
  • Open your Web Development Practices to page 2
  • Read through the list of basic HTML tags you have seen
  • Check through your page to make sure you are using the tags correctly and not missing tags
View on Code Studio

Student Instructions

Bugs Check

The next check should be for general bugs.

Do This

  • Open your Web Development Practices to page 3
  • Read through the list of bugs you have seen
  • Check through your page to make sure none of those bugs are appearing in your current website
View on Code Studio

Student Instructions

CSS Properties Check

The next check should be for styles you still want to add or fix.

Do This

  • Make sure you are viewing your style.css file on Web Lab
  • Open your Web Development Practices to page 4
  • Read through the list of basic CSS properties you have seen
  • Think about if there are styles you still want to add or improve
View on Code Studio

Student Instructions

Personally Identifiable Information Check

Earlier in this lesson you made a list of information you would not want to give away on your website. Use that list to check your site. This is the most important step before publishing your website for all to see.

Do This

  • Open your Web Development Practices to page 5
  • Read through your list of rules for protecting your PII
  • Be a sleuth on your own page and make sure people can not find out that important information you want to protect.
  • Remove the information you don't want people to know. This doesn’t have to mean stripping all of the personal importance out of your site, it can be as simple as cropping an image to remove faces or replacing your school’s name with “my school”.
View on Code Studio

Student Instructions

Publishing!

It is time to share your website!

Do This

  • Check your website one more time to make sure you are ready to share it with others
  • Notice the "Share" button has appear at the top of the screen.
  • Click the share button and copy the URL for your website.
  • Send that URL to friends and family as instructed by your teacher.

If you made changes to your home page during class make sure to take a screenshot of your home page and save it somewhere on your computer so you can find it later (Need help with how to screenshot? Check out this website .)

Standards Alignment

View full course alignment