The bulk of this unit is completed through Code.org. However, in some cases we have added additional supplemental material to a particular Code.org lesson and in other cases we will skip parts of lessons, or in some cases, entire lessons.

Use this page to help you complete your Unit on HTML.

The Chapter and Lesson names below match what you see in Code.org to make it easier to stay on track.

Chapter 1 is all about learning how to create a single web page.

Overview

Code.org: U2: L1: Exploring Web Pages

Modifications: None. Complete the levels on Code.org

Additional Notes: None

Overview

Code.org: U2: L2: Intro to HTML

Modifications: None. Complete the levels on Code.org.

Additional Notes: Additional Support materials (from the Zoom sessions) is provided below. If you didn't get this during the Zoom session, be sure to complete all the steps below:

1. Copy the Problem Solving Process information to the appropriate page in your CS Notebook (see image in the Materials and Resources section).

2. Watch the Code.org Problem Solving Process (with Zipline) video (see video in the Materials and Resources section).

Materials and Resources

NOTE: This is the lesson that Code.org introduces the concept of PAIR PROGRAMMING. PAIR PROGRAMMING is a partner activity that Code.org like to use in many of the lessons throughout this course.

Since we are currently NOT in a traditional classroom environment, we will not do any PAIR PROGRAMMING or small group activities. Therefore, every time that Code.org mentions that you should be working with a partner (or a small group) you will need to self-modify the instructions and complete all the activities yourself.

At first glance this may seem like it's going to be harder for you. Trust me, it's not. It's actually EASIER to do all the work yourself.

PAIR PROGRAMMING is not about lightening your workload. It's about teaching to and/or learning new skills from your peers. We will handle this "partner" work, in a different way, when we do our PEER EVALUATIONS for our CLASS PROJECTS.

Overview

Code.org: U2: L3: Headings.

Modifications: Complete the levels on Code.org. HOWEVER, modify all partner work and do the work independently (i.e., do all the work by yourself).

Additional Notes: TBD (These will post after we review this lesson in our live session.

TBD

Overview

Code.org: Complete U2: L4: Mini-Project: HTML Web Page

Modifications: TBD

Notes: You will need to add the information from the Project Guide to your notebook.

SKIP THIS CODE.ORG LESSON.

Code.org: U2: L5: Digital Footprint

Modifications: Skip this lesson entirely.

Notes: You do not need to do anything for this activity.

Overview

Code.org: U2: L5: Styling Text with CSS

Modifications: TBD

Notes: Additional Support materials (from the Zoom sessions) is provided below. If you didn't get this during the Zoom session, be sure to complete all the steps below:

TBD

Code.org: Complete U2: L7: Mini-Project: Your Personal Style

Modifications: TBD

Notes: You will need to add the information from the Project Guide to your notebook.

CHECKLIST:

• Did you complete all the levels in this Code.org lesson?

• Did you put the project prep work in your notebook?

SKIP THIS CODE.ORG LESSON.

Code.org: U2: L8: Intellectual Property

Modifications: Skip all parts of this Code.org lesson.

Notes: The work from this lesson will be incorporated into the Digital Citizenship unit.

TBD

Code.org: Complete U2: L10: Websites for Expression

Modifications: TBD

Notes:

• You will need to add the information from the Project Guide to your notebook.

Here's a sample of what your STYLE TABLE should look like in your notebook:

Here's a sample of what your IMAGE TABLE should look like in your notebook:

TBD

CHECKLIST:

• Did you complete all the levels in this Code.org lesson?

• Did you put the project prep work in your notebook?

TBD

Overview

Code.org: U2: L12: Your Web Page - Prepare

Modifications: (Read the NOTES section)

Notes:

• You will need to add the "prep" work from the Project Guide to your notebook. You should have the following three things:

  1. A sketch of your webpage. This sketch should be of what you expect your final version to look like.

  2. An Element Style Table (see example from the L10 notes above)

  3. An Image Table (see example from the L10 notes above)

• You can find a copy of the Code.org project guide on level 1 of Lesson 12.

Checklist

• Do you have the following in your notebook?

  1. A sketch of your webpage. This sketch should be of what you expect your final version to look like.

  2. An Element Style Table (see example from the L10 notes above)

  3. An Image Table (see example from the L10 notes above)

Overview

Code.org: U2: L13: Personal Web Page Project

Modifications: Do NOT complete any activities that are listed as PEER REVIEW activities for this lesson. We will conduct a more formal peer review when we do our first class project.

Notes:

• See Modifications above.

• The Publishing your Website video is included below in case you have any trouble accessing the video through the Code.org environment.

Checklist

By the end of this lesson you should have a completed webpage that includes HTML, CSS, and at least one properly captioned image.

Chapter 2 is all about creating multi-page websites.

The Code.org curriculum wants you to do this as a group project. We are NOT doing this as a group project. Ignore all references to working with partners/group. You will do all the work yourself (it's actually easier and faster this way . . . we'll focus on some group projects later in the course).

TBD

SKIP THIS CODE.ORG LESSON.

SKIP THIS CODE.ORG LESSON.

We will cover this subject is a different way in another lesson.

Code.org: Complete U2: L17: CSS Classes

Modifications: TBD

Notes: TBD

TBD

Code.org: Complete U2: L18: Planning a Multi-page Website

Modifications: TBD

Notes:

• You will need to do the prep work for this activity in your notebook. You can find the planning guide for this Code.org project in Level 1 of this lesson

TBD

CHECKLIST:

• Did you complete all the levels in this Code.org lesson?

• Did you put the project prep work in your notebook?

Code.org: Complete U2: L19: Linking Pages

Modifications: TBD

Notes:

• Here is a re-creation of the very first web page hosted at CERN. It was created by Tim Berners-Lee circa 1990. This page was the birth of the World Wide Web.

CHECKLIST:

• Did you complete all the levels in this Code.org lesson?

Code.org: Complete U2: L20: Project Website for a Purpose

Modifications: TBD

Notes: TBD

CHECKLIST:

• Did you complete all the levels in this Code.org lesson?

SKIP THIS CODE.ORG LESSON.

Code.org: Complete U2: Post-Project Test

Modifications: TBD

Notes:

• This test is a practice test

• The test is only unlocked for one day. Details will be posted in the class announcements.

Now that you have finished the Code.org curriculum, it's time to complete our class project.

Unit 2 Class Project: Task

You are to design and build a simple multi-page website that we will use for the rest of the school year. This website will host all your other programming projects. If will be our programming portfolio. However, instead of just making this site about you are your projects, you are going to create a fictional software company. As we go through the year, you other programming projects will be "produced" and "distributed" by your company.

Here are some of the specifics for your multi-page website:

• You must come up with an original company name. You can't use anything that already exists.

• Your multi-page website will have a minimum of three screens:

  • A home page (the landing page for your website)

  • At least one page for your programming projects.

  • An "About" page that describes this project.

• Your website should have a clear theme and consistency across all pages.

• Your website should be easy and intuitive to navigate

On the coding side you should have the following:

• You should have well formatted code. Appropriate use of whitespace and indenting.

• All your styling should be handled through an external CSS document.

• If you use any outside media or sources, you should identify how/why you have permission to use that content as well as proper attribution for all the borrowed material.

• Your final version should be bug/error free. Everything should work perfectly.

We'll talk more this list during one of our live sessions.

Before you do anything, with this project, you need to create your company name. There are very few requirements for your company name. Mainly these:

• Must be school appropriate

• The name can't already be used in the "real world" for another company.

Be as creative as you want. When you think you have a name, get on the internet and conduct a search for that name. If it's already being used, you can't use it for your project. If you can't find any other companies using that name, and your company name is school appropriate, you should be good to go.

If you are unsure about your name, it's best to check with your teacher BEFORE you start working on your project. Otherwise, you might have to go back and redo all the prep work.

HINTS: It's hard to come up with a name that hasn't already been used somewhere in the world. Many students find that if they use some combination of their initials along with their company name they are more successful creating a name that hasn't been used before. For example, I could come up with a generic name like "Digital Design Solutions." If I do a search for that name, I come up with lots of hits. However, if I take my first initial (J) and write my last name backwards (ssorc) and can combine them and get this: JSSORC Digital Design. If search for this, I get nothing. These are just ideas to get you started.

Don't dwell too long on making a name. It's not a real company. It's just a school project. Pick something and move forward with it.

Once you have your name, you need to design a logo.

Again, don't make this more difficult than it needs to be. Pick something and move on. This is not a design class. However, it is also a chance to show off your artistic skills if you choose to do so.

Use can use whatever program you like as long as you have a digital logo. Most students just create something simple in Google Drawing.

NOTE: The logo also meets the requirements for having an image on your website.

In your notebook, create detailed sketches of all your project pages. The sketches should represent what you think your final version will look like and should include the following:

• Any pictures you plan to use (including your logo) and where you plan to place them in your layout.

• The location of your main navigation

• Any main headings and/or sub-headings

• Where you plan to place any of your project content

• The general layout options (are you going to use columns, simple paragraphs, etc.)

If you are having trouble trying to figure out what kinds of things to put on your pages (besides what is mentioned in the TASK section) take a look at some sample websites to give you inspiration.

Step 4: Create an element and class STYLE TABLE

In your notebook, sketch out an Element and Class STYLE TABLE. It should be formatted like the table in Step 2 of the U2 - Exemplar - Project Guide - Company Web Page - Prepare (2020) (Cross Copy).

In your notebook, sketch out a Media/Outside Content table. It should be formatted like the table in Step 3 of the U2 - Exemplar - Project Guide - Company Web Page - Prepare (2020) (Cross Copy).

Step 6: Complete the Document Planning Guide

1. Make a copy of the Unit 2 Project: Company Website: Digital Planning Document.

2. Complete all parts of the document.

3. Save this digital document. You will be sharing this document with the entire class when we get ready for the Peer Evaluation.

After you complete your planning/prep, you need to start working on your first build (draft) of this program.

Step 1: Create a New WebLab Project

1. Login to Code.org and go to your Dashboard.

2. On the top main menu click on the PROJECTS tab.

3. On the PROJECTS page. Scroll down and find the section that says, "START A NEW PROJECT." You will see four choices (Sprite Lab, Artist, AppLab, and GameLab).

4. Underneath GameLab, select the VIEW FULL LIST option.

5. Scroll down the the BEYOND BASICS section and select WebLab.

6. On the top menu bar, click on the RENAME option and rename your file using the following naming convention:

Step 2: Name Your New Project

ProjectName Version Semester LastName, First Name

Here are the details for this project:

• ProjectName = CompanyWebsite

• Version = V.0.1.0

• Semester = F20 (for Fall 2020)

• LastName = [yourlastname]

• FirstName = [yourfirstname]

If I was naming this project for myself, it would look like this:

CompanyWebsite V.0.1.0 F20 Cross, John

Your name should look exactly like mine except it should have YOUR name at the end (not my name).

Now you are ready to start your first build.

Step 2: Complete Your First Build

There is no one right way to accomplish this. There are lots of options you can take to be successful. Follow your planning documents and try to create a working HTNL version of your build.

Let me say that again: YOU ARE ONLY CREATING AN HTML VERSION OF YOUR BUILD IN THIS STEP. Do NOT include any CSS at this stage.

While you do NOT need to build your pages in any specific order, if you are having trouble getting started, I'd advise you to follow these steps:

1. Build your home screen first. Then build out your other pages.

2. Make sure that your main navigation works so you easily get around the site.

3. Review your code. Double-check to make sure you have used proper indentation and whitespace in the coding of your pages so that it is easy to ready by other humans . . . because other humans ARE going to read your code when we get to the Peer Evaluation step.

Save this HTML only version. You will be submitting this project (along with your HTML+CSS version ) when we get ready for the next step.

After you complete the HTML build, you need to start working on your HTML+CSS build of your site.

Step 1: REMIX your current HTML Build

1. Open your HTML Build / WebLab project.

2. There are three buttons at the top of your WebLab project window: RENAME, SHARE, and REMIX.

3. Select the REMIX button. This will make a new copy of your project. If this was my project, I would see the name change to:

REMIX: CompanyWebsite V.0.1.0 F20 Cross, John

Step 2: RENAME your project

1. Select the RENAME button at the top of your new WebLab project.

2. Remove the word REMIX from the beginning of the new filename.

3. Also change the "1" in the version number (V.0.1.0) to a "2" (V.0.2.0). Now you name should look like this (except that YOUR NAME should be at the end of the filename and not mine).

CompanyWebsite V.0.2.0 F20 Cross, John

While we haven't gone into much detail about the yet, you are getting an introduction into the versioning system we will use in class. We use the number 2 for our middle number because this is the second iteration of this project. (NOTE: We will talk about how the first and third numbers work at a later date. For now, we just need to worry about the middle number).

Your are now ready to continue working on this project. As the name implies, you should be working on adding style (CSS) to your site in this step.

Be sure you know your due dates and submit your HTML+CSS project on time. Due dates are always posted in the Daily Class Announcements.

Follow the steps below to complete the peer evaluation for this project.

Understanding the Peer Evaluation Process

If this is your first peer evaluation, go to the Peer Evaluations page on our class website. Read through the material and complete the practice problems. Then come back and complete the rest of these steps.

If you have already completed a Peer Evaluation with this class, you still may want to review the steps on the Peer Evaluations page before you begin.

When you are ready, move to STEP 0.

Step 0: Prep for Peer Evaluation

In order to get ready for the Peer Evaluation, you need to submit your planning documents, your HTML Build, and your HTML+CSS build to the Web Development: Company Website Project: Peer Evaluation Prep Submission Form. Use the FORM link below to submit your document and then use the SPREADSHEET link to make sure your information was submitted correctly.

• Submission From

• Submission Spreadsheet

(NOTE: All students will have access to all submitted work)

Step 1: Review of Work

Step 2: Statements of Meaning

Step 3: Artist as Questioner

Step 4: Process Questions

Step 5: Opinion Time (optional)

TBD

TBD

Now it's time to take the feedback you received from your peer and complete your final build. Follow the directions below.

Before you start building your final version, you need to REMIX and RENAME your final build. We want to make sure finish with three distinct saved files in your PROJECTS folder in Code.org:

• Your HTML only build

• Your initial HTML + CSS build

• Your final project submission.

Step 1: REMIX your current HTML Build

1. Open your HTML + CSS Build (V0.2.0) project.

2. There are three buttons at the top of your WebLab project window: RENAME, SHARE, and REMIX.

3. Select the REMIX button. This will make a new copy of your project. If this was my project, I would see the name change to:

REMIX: CompanyWebsite V.0.2.0 F20 Cross, John

Step 2: RENAME your project

1. Select the RENAME button at the top of your new WebLab project.

2. Remove the word REMIX from the beginning of the new filename.

3. Also change the "2" in the version number (V.0.2.0) to a "3" (V.0.3.0). Now your name should look like this (except that YOUR NAME should be at the end of the filename and not mine).

CompanyWebsite V.0.3.0 F20 Cross, John

Step 3: Complete your updates

Now use the information you received from the peer evaluations to make any necessary improvements to your project.

Step 4: Submit your work

Make sure you are aware of a DUE DATES and DEADLINES for your final submission. All DUE DATE and DEADLINE information will be posted in the Daily Class Announcements.

Use the submission form below to submit your final project. Use the spreadsheet link to make certain your submission went through correctly:

• Company Web Project: Submission Form

• Company Web Project: Submission Spreadsheet

TBD