Welcome to BSD START.

This document is intended to guide you through the

course. Your journey will begin with a few introductory videos to get you
familiar with our platform as both the teacher and the student. As you travel
through the document you will find specific details regarding the projects
including objectives, standards, and a suggested walkthrough with teaching
tips along the way.

This guide is intended to help you set the pace for this project, it is not a substitution for a
lesson planning document. To become more acquainted with the curriculum, work through
the course on the platform ahead of time to prepare for teaching.

Getting Started
Watch these quick videos to get acquainted with the BSD platform.
Teacher Experience Video
Student Experience Video
BSD Online Community Resources
Additional Teacher Resources

Course Structure
At the start of this course, students will complete a 3-question pre-test to gauge their
current knowledge of coding and digital skills. Then the student will be guided through three
projects. Upon completion of each project, students are able to open their projects in
sandbox mode. Sandbox mode unlocks all the code so students can explore and create new
versions of their projects and customize any aspect of it.. Students will then complete a
post-test to gauge their learning, not as a grade, but to celebrate learning new skills.. At the
end of the course, students will complete a capstone project where they will put their new
skills to use in making a multi-page website.

Course Projects
The People Who Inspire Me Difficulty: Level 1: Beginner Duration: 1-hour
● Students will build a web page showing the top three people who inspire them while
learning introductory skills in HTML and CSS.
● This project includes videos to guide the students and additional resources for the
teacher and students.
Trivia Game Maker Difficulty: Level 2: Intermediate Duration: 1-hour
● Build an interactive trivia game and make your own trivia questions. Along the way,
learn to start using JavaScript to make interactive web pages
● This project includes videos to guide the students and additional resources for the
teacher and students.

AI Webcam Image Classifier Difficulty: Level 4: Advanced Duration: 2-hours

● Build an AI image classifier (powered by machine learning) that uses data from your
webcam to classify objects. Train it to recognize and classify new objects!
● This project includes guided instruction, discussion questions, and additional
resources for the teacher and students.

Capstone Project Difficulty: Level 3: Intermediate Duration: 2-4 hours

● A multi-page website is the most popular type of website for businesses, brands,
organizations, or personal websites. You will have the opportunity to choose a theme
as well as the content, images, fonts, and colors.

Project Structure
These projects are designed to be led by an instructor in a virtual, hybrid or offline learning
environment, with the possibility of allowing students to complete the Guided Project
self-paced or asynchronously. Upon the completion of the Guided Project, the students will
have their own digital artifacts customized to their individual creative visions and ideas.

Following our 3-step approach to curriculum Explore, Learn & Create, learning unfolds by
exploring new concepts, learning tools, and methods needed to produce a digital artifact
and then creating the artifact in a Guided Project.

Explore: Students will be introduced to coding through two projects that allows
them to share their unique voices and interests.

Students will also explore artificial intelligence and the technology behind
modern vision recognition systems

Learn: The People Who Inspire Me and Trivia Game Maker are aided by video
tutorials that walk through each step of the coding process, allowing for an
easy transition into coding with HTML and CSS.

With the AI Webcam Image Classifier, students will design and program AI tools
using JavaScript and HTML.
 Create: At the end of the course students will have four digital artifacts that
are unique with customization. The project can be shared using a public URL or
QR code.

Teacher Resources

Multi-Page Website - Planning Document Debugging Tips

BSD Project Rubric Adding Webfonts - Google Fonts
What is Coding Hex Color Code
Introduction to HTML and CSS Search and Add Images
Introduction to JavaScript Multi-Page Website Capstone Guide
Multi-Page Website Planning Document

Pre-Test
As the teacher you are able to add or remove questions. You also have the option to shuffle
the questions and let the students see their score. This Pre-Test is not intended for assigning
a grade but rather shows learning growth.

Question 1: If you want to change the background color using hex color codes, which of the
following shows an example of "hex code"?
Answer 1: #87ceeb

Question 2: In the JavaScript code below, what does "const" mean?

Answer 2: “const” is used to declare a variable

Question 3: If you wanted to insert an image file "pizza-on-plate.jpg" what would be the
correct HTML syntax?
Answer 3: <img src=”/resources/pizza-on-plate
 The People Who Inspire Me

Project Overview
This introductory project allows students to use code as a way to share what is important or
interesting to them. This project provides a way for students to either follow along in the
lesson or create their own unique project, all while learning to program in HTML, CSS, and
JavaScript. Students are guided through the experience with video tutorials, live coding, and
access to the BSD code glossary. The People Who Inspire Me is also a great resource as a
primer for educators to learn the basics of HTML, CSS, and JavaScript that will prepare
them for teaching with other BSD courses.

Learning Objectives
The BSD The People Who Inspire Me project aims for students to:
● Develop a fundamental understanding of HTML and CSS.
● Build digital artifacts using HTML and CSS.
● Expand their knowledge and understanding of the real-world application of
technology tools across different industries
● Exercise the fundamental principles and processes of computational thinking, design
thinking, and user experience design

Project Standards Alignment

BSD Education’s curriculum is aligned with the International Society for Technology in Education and
Computer Science Teachers Association Standards. These standards are for your reference and
exploration, and may not directly apply to your school/country.
 The People Who Inspire Me

ISTE 1a, 2c, 4a, 5d, 6b, 6d

CSTA 1A-AP-08, 1A-AP-13, 1A-AP-14, 1B-AP-14, 1B-AP-15, 1B-IC-21, 2-DA-07, 3A-AP-16, 3A-AP-18

ISTE: the International Society for Technology in Education

“The ISTE Standards provide the competencies for learning, teaching and leading in the
digital age, providing a comprehensive roadmap for the effective use of technology in
schools worldwide. The standards have been adopted in all 50 U.S. states and many
countries throughout the world.“ Click HERE to find out more about ISTE.

CSTA - Computer Science Teachers Association

“These Standards are designed to provide clear guidance around effective and equitable CS
instruction in support of rigorous CS education for all K-12 students around the world.”
Click HERE to find out more about CSTA.

Project Vocabulary
All vocabulary definitions are located in the glossary, which contains definitions, syntax,
examples and interactive steps.

HTML CSS syntax

tags forward slash / <hr/>
angle brackets element <p>
start tag/open tag <h1> <img src>
end tag/closed tag <h2> selector
color text-align width
px

Guided Project Instructions

1. Video: 4:09
a. The students will be introduced to:
i. How websites work
ii. Coding languages (HTML, CSS)
iii. Vocabulary
1. HTML, CSS, syntax, tags, angle brackets, start tag/open tag,
end tag/closed tag, forward-slash (/), element)
💡 Teaching Tip: Watch the videos as a whole group. This allows for both the
teacher and students to explore and learn together.

2. The students will be introduced to the project, “The People Who Inspire Me”.
3. Video: 3:07
a. During this video, students will be introduced to the platform.
i. Leftside: instructions, glossary cards, and objective(s)
ii. Middle: code panel/input
iii. Rightside: output
b. Students will also watch a demonstration of Step #4
i. Vocabulary
1. <h1>
4. Students will create a heading for the website by using an <h1> element.
5. Video: 3:42
a. The students take a closer look at CSS.
i. Vocabulary
1. Selector, property, value, curly braces {}, (:) colon after
property, (;) semicolon after value, color, text-align

💡 Teaching Tip: Common error for students: forgetting to add the semi-colon (;) at the end
of a line of code in style.css.

6. In this step, students will add CSS by switching to the style.css file.
a. Students will change the heading's color using the color property and align
it to the center of the page using the text-align property.
i. Vocabulary
1. style.css, color, text-align
7. Video: :52
a. Students are provided with additional details regarding their projects.
i. 3 people, names, images of those people, short description
8. Next, students will create a subheading to show the first person's name using the
<h2> element.
9. Students will now go to the style.css file to change the color of the person's name
using the color property as they did for step #6.

💡 Teaching Tip: In this step, students are asked to type in #873600 which is a Hex Color
Code. Use this Hex Code PDF document to take a deeper dive into what Hex
Colors are.

10. Video: 2:21

 a. Students are introduced to adding images to their projects.
i. Vocabulary
1. img src, self-closing tag, image URL, image address.

💡 Teaching Tip: This is a perfect time to discuss copyrights and creative commons. Which
images am I allowed to use? How do I give credit to the owner of the
image?

11. Students will now add an image of the first person that inspires them.
12. Video: :59
a. Students are introduced to resizing images in style.css
b. Vocabulary
i. img, width, px
13. Students will resize their images.
14. Students will write a brief description of the person that inspires them.
a. Vocabulary
i. <p>
15. Before the student adds the information for their second person, they will be
instructed to create an <hr/> element to separate the content between each
person.
a. Vocabulary
i. <hr/>
16. Video: 1:25
a. In this video, students are reminded of how they added the first person to
their website so they can continue with persons #2 and #3.

💡 Teaching Tip: Remind students that they can use the glossary cards if they get stuck or
they can rewatch any video.

17. Students will now add the code for the second person.
a. Steps 8, 11, and 14 are being repeated
b. Vocabulary
i. <h2>, <img scr>, <p>
18. Students will now add the code for the third person.
19. Video: 2:49
a. In the last video, students will review
i. What they have learned.
ii. How to export their project.
iii. How to continue in sandbox.
iv. How to customize their project.
20. The last step of the project is a verbal description of what the student learned
Follow-up Questions
1. What did you make today?
2. What coding language did you learn today?
3. Was there anything that was challenging that you had to overcome?
4. By bringing this project into sandbox mode, you can change any of the code. What will
you make next?

Sandbox
● Students can open their projects into sandbox mode for further customization.

Core Subject Integration

● Social Studies: People that Made History, Periods of Time
● ELA: Authors, Poets, Book Review
● Science: Inventions, Scientists
● Math: Architecture that demonstrates geometry, mathematicians

Peer sharing/evaluation
Set the student devices up, with their project loaded as if the students were attending a
museum. The students will go from device to device to observe each person's project. At
each desk, you will also have a comment sheet for each of your visitors.
 Trivia Game Maker

Project Overview
This introductory project allows students to use code as a way to share what is important or
interesting to them. This project provides a way for students to either follow along in the
lesson or create their own unique project, all while learning to program in HTML, CSS, and
JavaScript. Students are guided through the experience with video tutorials, live coding, and
access to the BSD code glossary. Trivia Game Maker is also a great resource as a primer for
educators to learn the basics of HTML, CSS, and JavaScript that will prepare them for
teaching with other BSD courses.

Learning Objectives
The BSD Trivia Game Maker project aims for students to:
● Develop a fundamental understanding of HTML and JS.
● Build digital artifacts using HTML and JS..
● Expand their knowledge and understanding of the real-world application of
technology tools across different industries.
● Exercise the fundamental principles and processes of computational thinking, design
thinking, and user experience design

Project Standards Alignment

BSD Education’s curriculum is aligned with the International Society for Technology in Education and
Computer Science Teachers Association Standards. These standards are for your reference and
exploration, and may not directly apply to your school/country.
 Trivia Game Maker

ISTE 1a, 2c, 4a, 5d, 6b, 6d

CSTA 1A-AP-08, 1A-AP-10, 1A-AP-11, 1A-AP-14, 1B-AP-09, 1B-AP-10, 1B-AP-15, 2-AP-11, 2-AP-13,
3A-AP-16, 3A-AP-18

ISTE: the International Society for Technology in Education

“The ISTE Standards provide the competencies for learning, teaching and leading in the
digital age, providing a comprehensive roadmap for the effective use of technology in
schools worldwide. The standards have been adopted in all 50 U.S. states and many
countries throughout the world.“ Click HERE to find out more about ISTE.

CSTA - Computer Science Teachers Association

“These Standards are designed to provide clear guidance around effective and equitable CS
instruction in support of rigorous CS education for all K-12 students around the world.”
Click HERE to find out more about CSTA.

Project Vocabulary
All vocabulary definitions are located in the glossary, which contains definitions, syntax,
examples, and interactive step

<h1> Prompt
<p> Conditional statement
<button> If statement
Onclick Else statement
Function Variable
Alert Arithmetic operator

Guided Project Instructions

💡 Teaching Tip: Watch the videos as a whole group. This allows for both the
teacher and students to explore and learn together.

1. Video: 1:26
a. The students will be introduced to:
i. The next project titled Trivia Game Maker
ii. Introduction to the third coding language called JavaScript
iii. Vocabulary
1. JS (JavaScript)
 2. Students will have the opportunity to test a sample trivia game.
3. Students will add an <h1> (heading 1) element in HTML.
4. Students will add a <p> (paragraph) element in HTML.
5. Video: :57
a. The students will learn how to create a button in HTML first.
i. First, the button will be added to HTML using the start and end tags
(<button>)
ii. To make the button work, you need to add JavaScript, which will be
done later.

💡 Teaching Tip: When working in JavaScript, you have to first create in HTML and then add
the “action” in JavaScript.

6. Students will create a button element in HTML.

7. Video: 1:44
a. The students will learn about the onclick attribute.
i. To link our <button> and JavaScript code together, the students will
add an onclick attribute and call it quiz().
ii. To make the button work, you need to add JavaScript, which will be
done later.
8. Students will create an onclick attribute.
9. Video: 2:21
a. The students will be introduced to a JavaScript function.
i. A specified block of code that only runs when you call it.
1. To run or execute a function is known as calling a function.
2. Once you write the code and name it, the next time you need
to use that same code you can call the function by its name.
10. Students will now make their button work by linking their HTML element to the JS
Function.
a. Click on script.JS file and create a function.
b. In HTML, you created an onclick and called it quiz(). That means our
function also needs to be called quiz()!
11. Video: 2:32
a. The students will create a popup box in JavaScript called an alert.
b. What we want the alert to say will be added in between the quotation
marks. This is called a string.
12. Students will now create a popup box to welcome their players.
13. Video: 6:11
a. The students will learn how to add the trivia questions.
i. Create a prompt box to display a question with a text field for the
participant to respond in.
 ii. Create or declare a variable for q1.
14. The students will create or declare a variable and prompt for each of their
questions.

💡 Teaching Tip: Remind students that they can use the glossary cards if they get stuck or
they can rewatch any video.

15. Video: 4:15

a. The students will learn how to use JavaScript to see if the player answered
correctly.
i. Create a conditional statement or an if-statement.
ii. Create an else statement.
16. The students will create a conditional statement for each answer.
17. The student will create an alert notifying the player of a correct or incorrect
answer.
18. Video: 1:32
a. The students will learn how to create a scoring system.
i. Create a score variable to store the number of correct answers.
ii. Create a totalQuestions variable to store the number of questions
we will ask.
19. The students will create a core variable and a totalQuestions variable.
20. Video: 1:36
a. The students will learn how to increase the score for every correct answer
using arithmetic operators.
i. Increase the score variable by 1 for every correct answer.
21. The students will create a +1 to the score variable for each of the 3 questions.
22. Video: 2:20
a. The students will learn how to join strings and variables (concatenation)
23. The students will create an alert to tell the player what their total score was.
24. The last step reviews all concepts learned during the project.

Follow-up questions
1. What did you make today?
2. What coding language did you learn today?
3. Was there anything that was challenging that you had to overcome?
4. By bringing this project into sandbox mode, you can change any of the code. What will
you make next?
Sandbox
● Students can open their projects into sandbox mode for further customization.

Core Subject Integration

Change from trivia questions to review questions for your core subject area.

Peer sharing/evaluation
Set the student devices up, with their project loaded, as if the students were attending a museum.
The students will go from device to device to observe each person's project. At each desk, you
will also have a comment sheet for each of your visitors.

AI Webcam Image Classifier

Project Overview
In this project, we will explore an Artificial Intelligence(AI) Image Recognition tool and learn how
AI sees images, makes predictions, and how we can make sure that those predictions are
accurate and free of bias. Inside the field of AI, there is a specific set of neural networks and
algorithms that we call Machine Learning. In this project, we will use a Machine Learning
algorithm that is helpful in making predictions.
Learning Objectives
The BSD AI Webcam Image Classifier project aims for students to:
● Gain an understanding of how Machine Learning works.
● Explore AI concepts like prediction and classification.
● Understand the importance of clean and bias-free training data for Machine Learning.
● Explore how to make Machine Learning algorithms more accurate
● Explore and learn about types of pre-trained neural networks used for AI.
● Build digital artifacts using HTML, CSS, and JavaScript
● Expand knowledge and understanding of the real-world application of technology tools
across different industries
● Exercise more advanced principles and processes of computational thinking, design
thinking, and user experience design

Project Standards Alignment

BSD Education’s curriculum is aligned with the International Society for Technology in Education and
Computer Science Teachers Association Standards. These standards are for your reference and
exploration, and may not directly apply to your school/country.

AI Webcam Image Classifier

ISTE 1a, 3d, 4a, 4b, 4c, 5a, 5b, 6b

CSTA 1A-DA-07, 1A-AP-08, 1A-AP-09, 1A-AP-14, 1B-DA-06, 1B-DA-07, 1B-AP-08, 1B-AP-09,

1B-AP-10, 1B-AP-11, 1B-AP-12, 1B-AP-15, 2-AP-11, 2-AP-13, 2-AP-14, 2-AP-17, 2-IC-21,
3A-AP-17, 3A-AP-18, 3A-AP-21, 3A-AP-23, 3A-IC-24

ISTE: the International Society for Technology in Education

“The ISTE Standards provide the competencies for learning, teaching and leading in the digital
age, providing a comprehensive roadmap for the effective use of technology in schools
worldwide. The standards have been adopted in all 50 U.S. states and many countries throughout
the world.“ Click HERE to find out more about ISTE.

CSTA - Computer Science Teachers Association

“These Standards are designed to provide clear guidance around effective and equitable CS
instruction in support of rigorous CS education for all K-12 students around the world.”
Click HERE to find out more about CSTA.

Project Vocabulary
All vocabulary definitions are located in the glossary, which contains definitions, syntax,
examples and interactive steps.
Artificial Intelligence id <p>
pixel (PX) <button> KNN Classifier
<script> function onclick
Ml5.js variable obj3.1
<div> style

Guided Project Instructions

1. Teachers and students will be introduced to the Artificial Intelligence (AI) Image
Recognition tool.

2. Discussion: A webcam can be used to see, but how does a computer recognize
something?

3. Pixels and pixel values

a. A computer can use a program to analyze an image by breaking it down

into smaller parts. The smallest part of an image is called a pixel, and each
pixel can have a value between 0-255. Computers are best at using
numerical values and cannot see images the way we do.

4. Discussion: Why do you think AI has a difficult time making predictions?

a. AI may seem very intelligent, but it can still make mistakes. Sometimes
those mistakes are silly, but they could also have negative consequences
too. If images or other data are too similar, AI may have trouble
distinguishing between the small differences.

5. Students begin learning about predictions

6. How does AI become good at predictions?

a. To be consistent at predicting, an AI needs to see lots of examples —

sometimes thousands!

7. Students are given directions on how to explore the Artificial Intelligence (AI) Image
Recognition tool.

a. Add 10 images to “class one”

b. Add 10 other images to “class two”

c. Click on “Training & Predict”

8. Students will explore the AI Image Recognition tool.

9. Discussion: How well did AI recognize your data? What could you do to make
better predictions?

10. Bias in training data: The AI or machine learning tool will only ever be as good as
the provided training data. Poor training data will result in poor predictions.

11. Types of data bias - Lack of data: If you are training an image recognition tool to
recognize apples and bananas and only provide 2-3 training images, then the tool
won’t be able to predict the many different shades of red and yellow found in the
fruits.

12. Types of data bias - Data is not diverse: If you are training an image recognition
tool to recognize apples and bananas, and only provide training images of the
exact same apple and banana each time, then the tool will only be able to predict
that one type.

13. Types of data bias - Data is not clear: If you are training an image recognition tool
to recognize apples and bananas and all of the images are low quality, then the
machine learning tool won’t correctly predict high-quality images.

14. Students will begin coding

15. Students will import the ml5.js library into their project using the <script> element.

16. Students will create two "containers" using <div> elements — one for "Class One",
and another for "Class Two".

17. Students will add a <button> and a <div> to the "classOne" <div> element.

18. Students will add a <button> and a <div> to the "classTwo" <div> element.

19. Students will add a training and predict button.

20. Students will create a <div> element for the video container and a <p> element for
the output panel.

21. Students will go into JavaScript to enable the webcam.

22. Students will create a variable called featureExtractor. Then they will load the
pre-trained model using the ml5.featureExtractor function.

23. Students will create a new variable called knnClassifier. They will use knnClassifier
to train the computer to classify the given features from featureExtractor.

24. Students will switch back to HTML to add an onclick event to both the class
buttons. Then, when buttons are clicked, they will call the addToClass function and
send the number 1 or 2 as an argument based on the class number. Then they will
switch back to the script.js file to declare a variable that will extract the key
 features from the webcam video:

25. After the key features have been extracted from the webcam, students will store
the features and the class label to an object.

26. Students will add an onclick event to the "Training & Predict" button, which they
have stored to a variable named trainingBtn. When this button is clicked, it'll call
the training function. In the training function, we'll call the
knnClassifier.clearAllLabels() function to clear all the previous labels, and then add
the new examples to knnClassifier.

27. Finally, students will call the goClassify function when the training model is ready.
Then in the goClassify function, we'll extract the key features from the webcam
and call the knnClassifier.classify function to predict the result from the webcam
video.

28. The last step reviews all concepts learned during the project.

💡 Teaching Tip: Each image should have a different object, and if possible, try to use
images with transparent backgrounds.

💡 Teaching Tip: Now that students have some experience with artificial intelligence,
consider exploring the ethics of AI. How does digital citizenship play a role in
artificial intelligence?

Follow-up Questions
1. What did you make today?
2. What coding language did you learn today?
3. Was there anything that was challenging that you had to overcome?
4. By bringing this project into sandbox mode, you can change any of the code. What will
you make next?

Sandbox
● Students can open their projects into sandbox mode to train a new series of objects. For
example, students could create a facial recognition tool.

Peer sharing/evaluation
Set the student devices up, with their project loaded, as if the students were attending a museum.
The students will go from device to device to observe each person's project. At each desk, you
will also have a comment sheet for each of your visitors.

Post-Test
As the teacher you are able to add or remove questions. You also have the option to shuffle the
questions and let the students see their score. This Pre-Test is not intended for assigning a grade
but rather shows learning growth.

Question 1: In the JavaScript code below, what is the name of the variable?
Answer 1: const

Question 2: Which line of CSS code defines the size of the text of the <h1> element?
Answer 2: font-size: 46px;

Question 3: The code below shows a CSS rule for styling an <h3> element. How is the value of
the color property defined?
Answer 3: HTML color code

Capstone Project
The Capstone Project allows students to show what they have learned so far. In sandbox
mode, there are no guided steps, which means they can edit anything in the code that they
would like to.

1. Review the Multi-Page Website Capstone Guide with the students

2. Have the students use the planning document to guide their design.
a. Students will use the planning document to complete a final copy of their layout
and design.
b. The planning document is broken down into sections for each page.
c. The headings at the top of each section can be modified based on the purpose
of the student’s website.
■ Science: Human Anatomy - Epidemiology
■ Career/College/Goals: All About Me, digital portfolio
■ Social Studies/History: Timelines, Eras, Wars
■ ELA: author/book reviews
■ Digital Citizenship: Create a fake website, Public Service Announcement
■ Personal Interests: sports, music, block building
■ Community involvement
3. Have the students refer to the Coding Resources if they get stuck.
○ What is Coding
○ Introduction to HTML and CSS
 ○ Introduction to JavaScript
○ Debugging Tips
○ Adding Webfonts - Google Fonts
○ Hex Color Code
○ Search and Add Images
4. They can also use the Glossary to help with coding syntax examples.
5. Review the expectations of the project.
a. Use the provided BSD’s Project Rubric for evaluation.
6. When students complete their website, have students view, evaluate and comment on
each other’s final project.