Luke Ciocca
Multi-page Website Summative Project Timeline:
Final Day to Submit Project is Thursday, December 21, 2023
Activity: Students can always move forward if they are ready
Target Date for Completion:
to do so, you don’t have to wait for the assigned day
□ Step 1: Define (packet page 1)
□ Step 2: Prepare (this will complete packet page 1)
December 12, 2023 □ Step 2: Part A ~ Design & Develop (packet page 2)
December 13, 2023 □ Step 2: Part B ~ Sketch pages
Step 2: Part C ~ Begin css styling decisions (reverse side of your
sketch sheet)
Step 2: Part D ~ Lesson 18, Code.org. Find your images, all
December 14, 2023 citation/creative commons information, & upload pictures to Lesson 18.
Step 3: Try ~ Lesson 20, Code.org. Begin Coding your content
(html)
December 14, 15, & 18 Step 3: Try ~ Lesson 20, Code.org.
12/19 & 12/20: Project
Coding & Review of Packet Final Peer Review & Changes
as a group
Final Peer Review & Changes (if you didn’t finish on 12/19)
12/21: PROJECT DUE
Submit PACKET & Code.org piece
Important Points:
You will need to be diligent about following this timeline to complete this project on time. It is
perfectly ok to work ahead of schedule.
Be sure to regularly compare you work to the Rubric & checklists provided.
Be sure that you include all the necessary HTML & CSS elements in your website.
The content on each of your web pages should not be excessive. You should plan on one day
for each of the 3 of your web pages; this means doing all the content entry and coding in 1, 45-
minute class period.
Peer Review partners will be chosen based on availability, meaning you will be paired with
another person who is ready for this step.
Keep up with it while you are doing each step of the activity.
This project will be the first grade of quarter 3.
PAGE 1
Project Guide – Multi-page Websites for a
Purpose
Step 1: Define
Your goal is to create a multi-page website that can bring awareness to a problem. What is the topic
you decided on for your website with a purpose?
Topic Choice: _Bees____________________________________________________________
Step 2, Part 1: Prepare (Research/5points)
To have a website with useful and credible information you are going to need to do some research.
Write down three questions that you will use to complete research on the internet to create your
website content:
1. What are bees’ predators?
2. How do humans effect bees?
3. Why do we need them?
Use your search skills to find sites to use for information or links on your new
website. Remember what makes a website trustworthy!!
URL = web site address
Description = what is the basic purpose of the web site that you have chosen?
Trustworthiness = based on what you learned from the video and your knowledge of internet searches, rate
the website as Low, Medium, or High. Explain why you choose that rating.
***Must use 2 sites (boxes) for researching your topic and complete these boxes***
Link & Description Trustworthiness
URL: friendsoftheearth.uk Low Medium High
Description – A donation Why?
website/information. This is not as trustworthy because they are asking for
donations.
(Full sentence)
URL: a-z-animals.com Low Medium High
Description- An informational Why?
website. This is a trustworthy website because it just shows the
information.
PAGE 2
(Full sentence)
Step 2, Part 2: Prepare (Design & Develop)
Part A: (5 points) Describe each page on your site. You must have a total of 3 pages in your site.
Page Name Description Sketch
(What are you naming
(In words, what is going to be included on this page) (Did you draw it out?
it??)
index.html Background information.
(HOME page)
**Do NOT
𝤿Yes
rename
Lists the different predators of bees.
predators.html
𝤿Yes
Explains the importance of bees.
impotance.html
𝤿Yes
Part B: Sketch Pages (7 points)
You will take the above information and create the sketch of each page of your site on the
skeleton sketch page provided after this page.
Your sketches need to show where the actual content will go. I expect to see where you are
placing all the required elements.
Part C: Required Elements (8 points)
Each sketch page has its own checklist to make sure the required elements have been used
for each page.
At this point, you need to decide if you will use 1 .css file for the entire site or if you will use
separate .css files for different pages. Regardless of what you choose, your site needs to feel
cohesive, like it fits together.
Part D: Find & Upload Your Images (Upload your images on Lesson 18, Level 1)
(10 points)
PAGE 3
Next, find all the images that you need. Rename each image and write the file name here. Be sure to write down all the
information about the image, such as the author, title, source, and license it’s covered under. Make sure everyone in your
team can access the images.
DO NOT UPLOAD IMAGES TO WEB LAB UNLESS THE “Image Information” BOX IS FILLED IN!!!!!
PAGE 4
Image File Image Information (Author, Title, Source, License, etc.)
Name
Example: Be sure to write down ALL your Creative
Commons licensing information. Include ALL
information you can find.
(file name includes the
extension) FILE NAMES MUST FOLLOWING NAMING RULES!!
Cco-1.0 deed
Racoon.jpg
Beeyellowflower.jpg CC-BY-NC 2.0 DEED Author- Mark Seton Source- Furtinity
Beepurpleflower.jpg CC0 1.0 DEED
Beehive.jpg CC0 1.0 DEED
Step 3: Try (Lesson 20 Code.org) (5 points)
In this lesson you can code your pages. Using the project guide you will put your work together into a single
site. Code.org talks about this as a group project – we are doing it as an individual project.
Level 1:
1. There will be 3 total .html pages in your final project.
2. The “home” or main page of your site is the index.html file: DO NOT CHANGE THE NAME!
3. You will click the +Add HTML button 2 times (to get a total of 3 .html files) and rename the new.html to a name
that is relatable to the content.
4. CLICK FINISH!!
Level 2:
1. This includes images & citation information.
2. Make sure to check for the required elements (look at your sketch page!!)
3. You should also add the “Navigation Bar” on this level too. The Navigation Bar is the coding that links all your web
pages together to make 1 web site. EVERY PAGE HAS THE SAME, EXACT NAVIGATION BAR AT THE TOP!!
4. Your images should have been uploaded on Lesson 18, but make sure. Also make sure that the image names
follow the proper guidelines.
5. CLICK FINISH!!
Level 3:
1. Since this not being done as a group project, CLICK FINISH!!
Level 4:
1. If you are adding additional style sheets, you should do that on this level as well by click on +Add CSS.
2. Add the CSS rule sets that you are responsible for. If you are going to do classes, you should do that on this page
as well.
3. You can have more than 1 style sheet. You decide. JUST REMEMBER: your link tag MUST use the correct file
name for the href attribute.\
4. CLICK FINISH!!
PAGE 5
Level 5:
1. Since this not being done as a group project, CLICK FINISH!!
Level 6:
1. Your site is done! Check to make sure it meets the requirements.
2. Every team member should look at EVERY page, paying particular attention to the page they coded to make sure
it looks the way it was intended.
3. Make sure the entire site has a style that works well together.
4. Make sure that EVERY link on EVERY .html page works properly.
5. Check that your site includes everything from the project guide.
6. Check that your site meets the requirements of the project in the rubric.
7. CLICK FINISH!!
Step 4: Reflect (Lesson 21 Code.org)
Part 1: (5 points)
Make sure your entire site for all required elements.
Your site MUST include the following: Check off the items you have!!!
HTML Elements:
□ (8 points) 2 different heading sizes (<h1> through <h6>) used on EACH page in your site (for a total of 8)
□ (2 points) 1 list; ordered (with <li> </li> tags) used on ANY page in your site (at least 3 items in the list)
□ (2 points) 1 list; unordered (with <li> </li> tags) used on ANY page in your site (at least 3 items in the list)
□ (4 points) At least 1 use of the paragraph tag on EACH page in your site (for a total of 4)
□ (4 points) At least 1 image on EACH page (for a total of 4)
You must use the following CSS elements SOMEWHERE on your site, not on every page!!
CSS (text elements):
CSS (non-text elements):
□ color:
□ font-size: □ background-color: (gradient or image also allowed)
□ font-family: □ border-color:
□ text-align: □ border-radius:
□ Chose at least 1 (can do more) of the following: □ border-style:
□ text-decoration □ Chose at least 1 (can do more) of the following:
□ letter-spacing □ float:
□ text-shadow □ height:
□ width:
Part 2: Find a peer review partner
Peer Review: (who is checking your work?) Anthony
Column A: Column B: Column C:
As the Peer Reviewer As the Peer Reviewer I found
Ideas for how the creator can make this part
You are looking for evidence of the item listed in
better, or what needs to be fixed
these things: column A
The website has a clear Were the pages easily to read and If NO, what should be fixed?
purpose and is easy to follow? Could you understand the
understand and click purpose?
through.
YES NO
Each page has a I tested all the hyperlinks at the top of If NO, identify which ones they are not working:
PAGE 6
navigation bar that links every web page, and they work
to other pages in the properly. Circle one
site, and they work;
meaning you can move YES NO
between the pages
easily
All the pages have the Were all the pages consistent in how If NO, what should be fixed?
same type of look to they were styled?
them. (colors, fonts, and
other styles) YES NO
Website uses both CSS Did you see at least 4 .html files and 1 What bugs did you find and where?
and HTML. There are .css file? In the file part of web lab.
very few syntax errors YES NO
and the pages display or
renders correctly in the Did you find any “bugs?”
preview window. YES NO
Both the text and the Check the .css page or pages. Any suggestions to improve CSS style
layout are styled. If there are multiple .css pages are selections?
they linked to the proper html page?
YES NO
Code is well formatted Is the code well laid out? Are you able Any suggestions?
using whitespace, and to read it easily? Are different
pages, images, and links elements on different lines?
all have names that
make sense. YES NO
All content from outside Do you see credit for content & If NO – where are they missing?
sources is cited with images?
information about the
author, title, license, and YES NO
source.
Part 3: Final Changes (5 points)
This is always room for improvement! Make sure to carefully review all the comments left after peer review!
Are you making any changes to your site based on peer review feedback?
□ NO? Why not: Everything is correct.
□ Yes? What are the changes you are making before submitting the final version?
REMINDER:
this entire packet, PLUS your sketch sheets must be turned in for grading.
Make sure that the pages are in the correct order.
Make sure that you have ALL the pages. They are numbered 1 through 8 AFTER the project
timeline.
PAGE 7
Multi-page Website Project Rubric:
Extensive Evidence Convincing Evidence Limited Evidence No Evidence
Key Concept
(5 points) (3-4 points) (1-2 points) (0 points)
Creating a Digital The website has a clear The website has a It is difficult to understand The website does not
Artifact purpose, and each page purpose, and most the purpose of the appear to have a
supports that purpose in pages support that website, or pages are not purpose, or there is only
its own way. purpose. clearly related. one page on the site.
Abstraction and All the pages use a All the pages use a Some of the pages use a The pages do not have
Modularity stylesheet to give them stylesheet to give them stylesheet to give them the same look and feel
the same type of look the same type of look the same type of look and or do not link to a
Your website and feel. Your color and feel. Your color feel. Your color stylesheet. Style
should have a very selections, font selections, font selections, font selections selections make it very
appealing and selections and other selections and other and other style choices difficult for the viewer to
cohesive look. A style choices make your style choices generally generally have the same read or engage with
“style theme.” website easy to look at have the same look and look and feel, but there content.
and easy to read feel. There are no are several elements that
elements that seem seem completely out of
completely out of place place
Total Points Earned: _________________/10
Extensive Evidence Convincing Evidence Limited Evidence No Evidence
Key Concept
(9-10 points) (6-8 points) (3-5 points) (0, 1, or 2 points)
Using Computer Website uses both CSS Website uses both Website uses both HTML The website does not
Languages and HTML. There are HTML and CSS. The and CSS. Most of the use both HTML and
very few syntax errors page renders correctly, page renders correctly, CSS. Syntax errors
and the page display but there are some but there are significant prevent the page from
correctly. syntax errors. syntax errors. being rendered
correctly.
Using Computer Your CSS and HTML Website has multiple Website has multiple There is NO evidence
Languages sheets are correctly CSS pages; most are CSS pages; some are that the student
linked to each other on linked properly. linked properly. attempted to link those
ALL pages in your pages together
website.
Using Computer ALL your web pages are ALL web pages display ALL web pages display There is NO evidence
Languages correctly linked to each evidence that the evidence that the student that the student
other. There are no student attempted to link attempted to link all attempted to link their
errors when moving all pages together to pages together to make web pages together to
between the different make one website, but one website, but there make one continuous
pages on your site. there are some errors are significant errors with site.
with the links. the links.
Clean Code, file Code is well formatted Code is generally well Code is sometimes Code is not formatted
naming, and using whitespace, and formatted using formatted to be in a readable way,
debugging pages and images all whitespace, though readable but does not makes little use of
have names that there may be some consistently use white white space. Page
make sense. parts that are difficult space to organize and image names are
to read. Pages and tags. Some pages and hard to read, break
images tend to have images have names the links, or are
names that make that make sense. unrelated to their
sense. content.
PAGE 8
Extensive Evidence Convincing Evidence Limited Evidence No Evidence
Key Concept
(9-10 points) (6-8 points) (3-5 points) (0, 1, or 2 points)
Responsible All content from Most content from Some content from Content is generally
Consumption and outside sources is outside sources is outside sources is uncited, or the
Creation of Media cited with information cited with information cited with information website uses content
about the author, title, about the author, title, about the author, title, it does not have a
Not only do pictures license, and source. license, and source. license, and source. license to use.
have to have credits
given, but if you use All images have Most images have Some images have There is very little
web sites for
licensing/creative licensing/creative licensing/creative evidence that the web
information, you need
to give credit for that commons displayed commons displayed commons displayed creator attempted to
as well. under them under them under them give any credit for
images.
Total Points Earned: _________________/50
Required 20 possible points: Total Points Earned: _________________/20
Elements: HTML (see page 5)
Required 20 possible points: Total Points Earned: _________________/20
Elements: CSS (see page 7)
Total Points Earned: _________________/100 (This is the grade for the project) = ________________________%
Total Points Earned: _________________/50 (This is the grade for packet completion) = _________________%
Note: see different packet sections for point deductions
Comments:
PAGE 9
