Students explore what the definition of a computer is and discuss what items in the room could be considered computers. They are oriented to the Skill Struck platform and learn about HTML basics.
Orient to the Platform
What is a computer
HTML Basics
HTML Heading
2-AP-11, 2-DA-07
Students examine the differeent parts and pieces of a computer and discover what each part does to contribute to the whole. They learn how to add text colors in HTML.
Computer Parts and Pieces
Text Colors
2-AP-11, 2-AP-16, 2-DA-07, 2-CS-02
Students learn how to add fonts in HTML. They design an app and map out all the hardware and software that would be needed to make their app a reality.
Fonts
App Design
2-AP-11, 2-AP-16, 2-DA-07, 2-CS-02
Students will explore the similarities between learning a spoken language and learning a computer programming language. They will learn about the basic structure of an HTML file.
Language Exploration Activity
HTML as a Language
HTML Structure
2-AP-11, 2-CS-02
Students will analyze what the term 'citizenship' means and how it might apply to digital citizenship. They will discuss how we can be good digital citizens and how to be respectful in a technology-driven society.
Citizenship Activity
Digital Citizenship
2-IC-23, 2-IC-20, 2-NI-05
Students will examine how to exercise safe practices in a digital landscape. They will learn how to add background color and an HTML title to their webpages.
Background Color
HTML Title
Digital Safety
2-CS-01, 2-CS-02, 2-NI-05, 2-NI-06, 2-DA-08, 2-AP-16, 2-IC-23
Students will give more content and meat to their website as they learn how to add paragraphs, breaks, and dividers to their HTML files.
Paragraphs
Breaks
Dividers
2-CS-01, 2-CS-02, 2-NI-05, 2-DA-07, 2-DA-08, 2-AP-11, 2-IC-23
Students will discover how the internet works through a castle construction activity. They will learn how to add ordered and unordered lists to their HTML file.
How the Internet works
Ordered Lists
Unordered Lists
2-AP-11, 2-DA-07, 2-NI-04
Students will review how the internet works through a teaching exercise. They will learn how to add text alignment and links to their HTML file.
Review How the Internet Works
Text Align
Links
2-AP-16, 2-AP-11, 2-NI-04
Students will add more dynamic functionality to their websites as tehy learn how to add buttons and images to their HTML file.
Buttons
Images
2-IC-21, 2-AP-11, 2-AP-16, 2-DA-07
Students will examine the role of computers in their everyday life and discuss what potential boundaries might be helpful in their lives. They will learn how to add background images to their website.
Computers and Your World
Background Images
2-AP-11, 2-AP-16, 2-IC-20
Students will increase engagement on their websites by learning how to add videos to their HTML files.
Videos
2-DA-07, 2-AP-11, 2-AP-13, 2-AP-16, 2-AP-17
Students will exercise their problem solving abilities through the presentation of different challenging scenarios. They will learn how to add image links to their HTML files.
Problem Solver Scenarios
Image Links
2-CS-03, 2-AP-11, 2-AP-13
Students will discover their approach to challenges through a magic carpet class task. Throughout the task, they will be able to see what their natural tendencies are and the way they interact with others to reach a goal.
Magic Carpet Task
Magic Carpet Processing
2-CS-03, 2-AP-13, 2-AP-15
Students will be presented with a challenging task to create shapes as a team while blindfolded. Throughout the task, they will have the opportunity to see their appraoch to problems and the way they utilize resources at hand. They will learn to add marquees to their HTML files.
Blind Polygon Task
Blind Polygon Processing
Marquees
2-CS-03, 2-AP-11, 2-AP-13, 2-AP-15
Students will examine the requirements for the team project and will form teams. In their teams, they will outline a plan to split up tasks to be able complete the task on time. They will have time to get started on their project.
Team Project Explanation
Team Project Planning
Team Project Time
2-CS-01, 2-CS-02, 2-DA-07, 2-AP-11, 2-AP-13, 2-AP-15, 2-AP-16, 2-AP-17, 2-AP-19, 2-AP-18, 2-IC-22
Students will work in their teams to build out their collaborative website. They will practice giving and recieiving helpful feedback through a feedback activity.
Team Project Time
HTML Project Feedback
2-CS-01, 2-CS-02, 2-DA-07, 2-AP-11, 2-AP-13, 2-AP-15, 2-AP-16, 2-AP-17, 2-AP-19, 2-AP-18, 2-IC-22
Students will have time to work on their team project. They will present their team projects for the class and share how the process of working together went.
Team Project Time
Team Project Presentations
2-CS-01, 2-CS-02, 2-DA-07, 2-AP-11, 2-AP-13, 2-AP-15, 2-AP-16, 2-AP-17, 2-AP-19, 2-AP-18, 2-IC-22
Students will be introduced to the CSS langauge and will practice connecting their CSS file to an HTML file. They will examine why programmers use external stylesheets and the benefits to organizing code in this way.
Introduction to CSS
Connecting your CSS File to an HTML File.
2-DA-07, 2-AP-11, 2-AP-14, 2-AP-16
Students will explore different careers in web development. They will think about how they feel about the different career options and explore what might be of interest to them. They will learn how to add text shadow to their webpages.
Careers in Web Development
Text Shadow
2-DA-07, 2-AP-11, 2-IC-20
Students will practice industry standards of changing an HTML project to an external style sheet. They will learn how to add rounded corners to their web pages.
Switch Styling to an External Style Sheet Activity
Rounded Corners
2-DA-07, 2-AP-11, 2-AP-16, 2-IC-20
Students will make their websites more professional with box shadows and color gradients.
Box Shadow
Color Gradients
2-NI-06, 2-AP-11, 2-AP-14, 2-AP-16, 2-AP-19
Students analyze different opinions as to what is considered appropriate communication in a digital society. They will practice what they've learned so far on an HTML project.
Communication in a Digital Society
HTML Project: Favorite Movie
2-CS-01, 2-CS-02, 2-DA-07, 2-AP-11, 2-AP-13, 2-AP-16, 2-AP-17, 2-AP-19, 2-IC-20
Students will discover how to add appropriate documentation to their code through comments and how to organize their CSS code with classes.
Comments in HTML/CSS
Classes
2-DA-07, 2-AP-11, 2-AP-13, 2-AP-14
Students will explore different ways to take a computational artifact and make it more accessible for more kinds of people. They will learn how to use the color picker tool on their web pages.
Accessible Interventions Activity
Color Picker
2-CS-01, 2-CS-02, 2-NI-06, 2-DA-07, 2-AP-11, 2-AP-16, 2-IC-20, 2-IC-21
Students will practice making things more accessible through an amusement part activity. They will learn how to add margins and padding to their web pages.
Amusement Park Accessibility
Margins
Padding
2-CS-01, 2-AP-11, 2-IC-21
Students will learn how to add more advanced design features through pseudo selectors and opacity to their web pages.
Pseudo Selectors
Opacity
2-CS-01, 2-DA-07, 2-AP-11, 2-AP-16:, 2-IC-20, 2-IC-21
Students will review what the different computer parts and pieces do and how they interact. They will learn to better organize their code through the use of div tags.
Computer Parts and Pieces Review
Div Tags
2-CS-02, 2-DA-07, 2-AP-11, 2-AP-16
Students will practice how to troubleshoot different scenarios through an interactive class activity. They will learn how to add design elements to buttons on their web pages.
Troubleshooting with Granny Activity
Button Design
2-CS-03, 2-AP-11, 2-AP-13, 2-IC-21
Students will further polish their websites by adding list styles. They will also learn how to add icons to their website, a critical element of modern websites.
List Styles
CSS Icons
2-AP-11, 2-AP-19
Students will explore the world of UI and learn different tips and tricks of design that improve a website. They will learn how to add borders to their website.
Design Tips
Borders
2-CS-01, 2-CS-03, 2-AP-11, 2-AP-13
Students will take a previous HTML project and improve it with what CSS they have learned since then.
Extreme Makeover Website Edition Activity
2-CS-01, 2-CS-03, 2-DA-07, 2-AP-11, 2-AP-13, 2-AP-16, 2-AP-17
Students will learn the basics of making their websiites responsive by adding media queries and positioning to their website.
Positioning
Media Queries
2-CS-01, 2-AP-11
Students will discover how to represent algorithms using a visual flow chart and practice building flow charts to find solutions. They will learn how to add background image styles to their websites.
Background Image Styles
Fow Charts Activity
2-CS-03, 2-AP-10, 2-AP-11, 2-AP-19
Students will practice building flow charts through an interactive life sized flow chart activity. They will pick a past challenge they have done and will build a flow chart for it.
Life Sized Flow Chart
Flow Chart for Previous Challenge Activity
2-DA-07, 2-AP-10, 2-AP-11
Students will explore the cyber security concept of encryption through a cipher activity. They will practice their CSS skills through working on one of the CSS projects.
CSS Project
Pig Pen Cipher
2-NI-06, 2-DA-07
Students will practice different methods of data representation through pie charts and bar graphs.
Pie Charts Activity
Bar Graphs Demonstration
2-DA-07, 2-DA-08, 2-IC-22
Students will analyze different advertisments and asses how well they reach their target audiences. They will practice their CSS skills through the CSS Dream Car project.
Advertisement Analysis
Dream Car Project
2-DA-07, 2-DA-08, 2-AP-11, 2-IC-20, 2-IC-22
Students will conduct their own research through sending out a google form to their classmates. They will discuss data privacy and explore how they feel about their personal data.
Market Research Activity
Data Privacy Discussion
2-CS-01, 2-DA-08, 2-AP-15, 2-IC-20, 2-IC-22, 2-IC-23
Students will explore different approaches to teamwork through an Amoeba activity. They will discuss different tips and tricks for working effectively on a team.
Amoeba Team Activity
Opinions about Working on a Team
Tips for Working on a Team
2-AP-15, 2-AP-18, 2-IC-22
Students will be introduced to their final team project for the class. They will understand what the requirements are and what is expected of them. Students will form their teams and build a plan for how to successfully complete their project on time.
Team Project Explanation
Forming Teams for the HTML/CSS Project
2-CS-01, 2-DA-07, 2-AP-11, 2-AP-13, 2-AP-14, 2-AP-15, 2-AP-16, 2-AP-17, 2-AP-18, 2-AP-19, 2-IC-22
Students will review the requirements for the team project as well as their team's plan to complete it on time. They will have time to work on their team Project.
Review Team Project Requirements
Team Project Time
2-CS-01, 2-DA-07, 2-AP-11, 2-AP-13, 2-AP-14, 2-AP-15, 2-AP-16, 2-AP-17, 2-AP-18, 2-AP-19, 2-IC-22
Students will have time to work in their teams. This gives them opportunities to collaborate with peers and problem solve as a group.
Team Project Time
2-CS-01, 2-DA-07, 2-AP-11, 2-AP-13, 2-AP-14, 2-AP-15, 2-AP-16, 2-AP-17, 2-AP-18, 2-AP-19, 2-IC-22
Students will conduct market research on their team project to practice giving and recieving feedback. They will have time to work in their teams to follow their team plans to finish on time.
Team Project Market Research
Team Project Time
2-CS-01, 2-DA-07, 2-DA-09, 2-AP-11, 2-AP-13, 2-AP-13, 2-AP-14, 2-AP-15, 2-AP-16, 2-AP-17, 2-AP-18, 2-AP-19, 2-IC-22
Students will work in their teams to figure out the best solutions that work for all team members. They will work together to build a cohesive website with consistent styling and content.
Team Project Time
2-CS-01, 2-DA-07, 2-AP-11, 2-AP-13, 2-AP-14, 2-AP-15, 2-AP-16, 2-AP-17, 2-AP-18, 2-AP-19, 2-IC-22
Teams will present their team projects for the class. They will practice reporting on how their coding went and how they were able to work as a team.
Team Project Presentations
2-CS-01, 2-DA-07, 2-AP-11, 2-AP-13, 2-AP-14, 2-AP-15, 2-AP-16, 2-AP-17, 2-AP-18, 2-AP-19, 2-IC-22
Students will review various CSS concepts and see how much students can recall from the class. They will reflect on how much they've learned through the CSS project Game On.
Concept Review Demonstration
CSS Project Game On
2-DA-07, 2-AP-11, 2-AP-16, 2-AP-17
Students will reflect on everything they've learned in this class as they look through old HTML projects. They will be able to see how much they improved. They will discuss why computer science is so important for students to learn at all ages.
Old HTML Projects Activity
Why Computer Science Matters Discussion
2-IC-20, 2-IC-21
In this course, students will complete challenges that help solidify concepts as they use skills in a variety of ways. In order to complete tasks, students will creatively apply what they've learned by using different approaches to reach a goal. This experience closely follows challenges they would face in a technical interview, allowing them to practice. Students will create a variety of websites using different web development skills.