Project Name: Duration:

Integrating Computer Science Principals through Web Design 1 semester (optional: 1 year)
Driving Question:
In one semester how can middle school students master Web Design?

Final
Learning
Product(s)
Outcomes/Targets Checkpoints/Formative Instructional Strategies for All Learners
(Presentations,
knowledge, understanding Assessments provided by teacher, other staff, experts; includes scaffolds,
Performances,
& success skills needed by to check for learning and ensure materials, lessons aligned to learning outcomes and
Products
students to successfully students are on track formative assessments
and/or
complete products
Services)
Learning Outcome: The ▪ Instructor will create a ▪ Students will be able to create their CodeHS.com
student will be able to written or digital progress list accounts and link it to the main teacher account using a
create application user of students’ names (no specific class code given to them by the instructor.
accounts that are linked scores) to keep track of ▪ Students will be able to create their Schoology.com
*Schoology a to the teacher account student progress. accounts and link it to the main teacher account using a
Learning and demonstrate how to ▪ Student will communicate specific class code given to them by the instructor.
Management navigate the application with instructor when each ▪ Instructor will teach students how to maneuver through
System (LMS) menus. unit in CodeHS is completed. CodeHS and Schoology by providing articles,
(*or one of choice) Content Standards: ▪ Instructor will provide unit presentations, videos, and projects students can review
ISTE Standards for due dates in advance visible when needed.
and students: on board, progress list, ▪ Students will be able to maneuver through CodeHS and
1
1a, 1b, 1c, 1d, and 2d Schoology, and PowerSchool. Schoology to access Unit information, activities, videos,
APPLY
*CodeHS 21st Century Skills: ▪ Student will monitor daily quizzes, test, finals, and message the instructor if
an Interactive -Critical Thinking self-progress to ensure unit is needed.
Online -Problem Solving completed by due date. ▪ Students will work through each unit in CodeHS until
Learning -Communication ▪ Instructor will update board, 100% is reached. *It is beneficial for student to take
Platform -Collaboration progress list, grades, notes while watching the videos and going through each
(*or one of choice) Schoology, and PowerSchool activity.
-Time/Efficiency
daily. ▪ Students will take an end of the unit short quiz in
CodeHS.com to review the unit. The quiz can only be
completed once. Students will then take a screenshot
and submit it into Schoology to show completion of the
end of the unit.
 Learning Outcome:
Students will be able to
assess their knowledge
based on internal
evidence or external
criteria
Content Standards:
End of Unit
2 ISTE Standards for
Summative
Evaluate students:
Assessment(s)
1a, 1c, 4d, 5a, 5c,
21st Century Skills:
-Critical Thinking
-Problem Solving
-Communication
-Collaboration
-Time/Efficiency
Learning Outcome:
Students will be able to
design a new or
alternative project to
promote their website to
their intended audience
Content Standards:
ISTE Standards for
3 Additional
students:
Design Resources
1a, 1c, 1d, 2c, 3c, 3d, 4a,
4b, 4d, 5a, 5c, 6a, 6b, 6d
21st Century Skills:
-Critical Thinking
-Problem Solving
-Communication
-Collaboration
-Time/Efficiency
Learning Outcome:
4 Students will be able to
Create create a workable website
N/A
▪ Students will visit websites
they like and dislike to help
design a layout for their own
website project. Write down
pros and cons. Sign off is
required by instructor.
▪ Students will create a written
or digital basic layout of their
website. Students will mark
where they want pictures,
links, how to get to additional
pages and explain why they
chose the colors they are
using in their website. Sign off
is require by instructor.
▪ Open Source Text Editor(s):
o Brackets
o Notepad ++
▪ Students will take an end of unit final in Schoology.com
that takes questions from the videos in each activity.
▪ Instructors define assessment requirements and display
them where applicable (board, PowerSchool, etc.).
▪ Students are required to pass the final with a score
defined by instructor/admin that will provide enough
evidence of depth of knowledge (e.g. 68/75 which is an
“A-” or 91%) before they can move onto the next unit.
▪ Students are given unlimited attempts to pass the final;
no notes. Students can exit out of their active test to re-
watch videos, review notes, review past attempts, and
activities to help study.
▪ Students will communicate with instructor when student
reaches the minimum score defined or better.
▪ Instructor will update progress list and grades daily.
▪ Instructors will provide a list of resources for student to
reference back to (w3schools, Google Fonts, etc.). These
resources will provide students with HTML and CSS
information that is accessible from any device.
▪ Students will be able to bookmark resources to refer to
when designing their websites.
▪ Students will take a survey with website principles of
design to help layout their own website project. This
way they can market and promote their website to
others.
▪ Students will cite their sources (images, videos, etc.)
▪ Students can use additional resources to create the
beginning layout of their website. They can use
paper/pencil or other digital platforms, tools, extensions
that allows them to draw, makes notes, and create quick
examples.
▪ Students will open their File Explorer and create a folder
to house all their web site documents. Naming of folder
is teacher discretion.
 to promote their project
Open Source to their intended
Live Preview audience
Text Editor(s)
Content Standards:
ISTE Standards for
students:
1a, 1c, 1d, 2c, 3c, 3d, 4a,
4b, 4d, 5a, 5c, 6a, 6b, 6d
21st Century Skills:
-Critical Thinking
-Problem Solving
-Research
-Communication
-Collaboration
-Time/Efficiency
o Atom
o Visual Studio Code
o Howl
o Plus, many more!
▪ It is recommended that
instructors search and trial
different text editors before
purchase. There are trial and
FREE versions as well.
▪ Students will use said text
editor to code and create
their personal website.
▪ Students can use personal or
outside resources. *Cite
sources at the bottom of the
page or on a separate
resource page.
▪ Instructor will provide students with link to download a
live preview text editor. *Note: there are many free text
editors. Make sure the text editor you chose has a live
preview option. This allows students to visually see what
their site looks like on an unpublished window.
▪ Instructor will provide videos, articles, presentations to
expand individual learning prior to opening and starting
in said text editor.
▪ Students will open named text editor and create an
HTML file (index.com). This will be the template that
houses information on what the website is going to be
about and the audience it is intended for.
▪ Students will then create and their CSS file (style.css).
This will be the design of the entire website.
▪ Students will create additional HTML files in that will link
to the template page (index.html). Any additional HTML
files will house additional information, pictures, videos
favorite hobbies, interest, family, vacation sites, etc.
about the website and who the intended audience is for.