FREE K-12 AI LITERACY COURSES FOR THE 26-27 SY! Learn more here.

Courses for every classroom

Web Development 2

Dives deeper into HTML and CSS, allowing students to further customize their websites.

Semester course · 50 lessons · 3 units

  • HTML
  • CSS
  • JavaScript
  • Pathway Courses
  • Voyage
  • Semester
  • 9th grade
  • 10th grade
  • 11th grade
  • 12th grade

Recommended prerequisite: Web Development 1

Course Summary

This course dives deeper into web development as students discover more of what HTML and CSS can do. Students explore the possibilities of bootstrap, animations, and tables among other topics. Students polish their websites further, adding sophistication and interaction to their sites. Students will need to have completed HTML 1 and CSS 1 to understand HTML 2 & CSS 2.

Course Outline

    1. External Style Sheet External style sheets allow us to clean up our HTML files and manage all of our CSS in a separate location. Let's clean up that code!
    2. WD2 Images
    3. WD2 Videos
    4. WD2 Classes & IDs
    5. Packets and Protocols Learn how data is transferred across the internet.
    6. WD2 Pseudo Selectors
    7. Addressing Learn how addressing works in the internet.
    8. Media Queries Intro Cellphones and tablets are more popular now than ever before! Let's look at how we can adjust our site depending on the width of the screen it is viewed on.
    9. Bootstrap Intro This lesson covers the basics of adding bootstrap to your website and its usefulness.
    10. Bootstrap Classes This lesson covers Bootstrap classes, specifically the container and container-fluid classes.
    11. Bootstrap Grid Bootstrap grid defines the basic layout of your website. This lesson will cover how to use it.
    12. Twelve Column Grid The twelve column grid is how bootstrap allows you to define widths of your elements.
    13. WD2 CSS Grid
    14. CSS Flexbox
    15. Grid Review This is the grid checkpoint. Good luck!
    16. Bootstrap Jumbotron Similar to a sport arena jumbotron, Bootstrap jumbotrons create a large block to catch your users attention.
    17. Bootstrap Cards Cards are an excellent way to arrange content in small sections on your website.
    18. Bootstrap Carousels Similar to how a theme park carousel rotates in a circle, Bootstrap carousels allow you to rotate through images.
    19. Bootstrap Nav Bar Nav bars allow the user to navigate between the pages or sections of your website. This lesson gives a great overview of how to use them.
    20. Bootstrap Dropdown Learn how to add dropdown menus with Bootstrap.
    21. Components Review This is the Bootstrap component checkpoint. Review the past Bootstrap lessons and you should do great!
    22. Custom HTML Elements
    23. Facebook Plugins
    24. Shadow DOM

    1. Animations This lesson covers the basics of creating great looking animations using only CSS! The possibilities are endless.
    2. Transform Similar to the CSS Animations lesson, we can also use transform to transition smoothly between two styles.
    3. Transition The transition property allows us to change the way transformations look while the element is transforming.
    4. Transitions Review This is the transitions checkpoint! You got this.
    5. Image Overlays
    6. WD2 Forms
    7. WD2 Text Input
    8. WD2 Radio Input
    9. Form Review This is the Form Checkpoint. You got this!
    10. WD2 Positioning
    11. WD2 Tables Intro
    12. WD2 Tables Continued
    13. WD2 Table Styles

    1. JS Programming Logic and Languages
    2. JS JavaScript Intro: Variables
    3. JS JavaScript Inputs & Outputs
    4. JS Concatenation
    5. JS Math
    6. JS Functions
    7. JS Parameters
    8. Functions for Buttons Buttons are a great way to fire off a function! Let's make some buttons that use JavaScript.
    9. JS Return Statement
    10. jQuery jQuery is a useful JavaScript library that simplifies and adds to the JavaScript functionality.
    11. getElementById getElementById is a great way to get HTML elements from your HTML file.
    12. Inner HTML Extracting the HTML out of an element can allow us to change, delete or add to the current content. This lesson covers how it's done.
    13. APIs APIs are a great way to extend an application's functionality. This article goes over what an API is as well as how to use the HTML Drag and Drop API.

Standard Alignment

CSTA K-12 Computer Science Standards

  • 2-AP-11
  • 2-AP-13
  • 2-AP-15
  • 2-AP-16
  • 2-AP-17
  • 2-AP-18
  • 2-AP-19
  • 2-CS-01
  • 2-CS-02
  • 2-DA-07
  • 2-IC-20
  • 2-IC-21
  • 2-IC-22
  • 2-IC-23
  • 2-NI-05
  • 2-NI-06
  • 3A-AP-13
  • 3A-AP-15
  • 3A-AP-16
  • 3A-AP-17
  • 3A-AP-18
  • 3A-AP-19
  • 3A-AP-22
  • 3A-AP-23
  • 3A-DA-09
  • 3B-AP-10
  • 3B-AP-11
  • 3B-AP-14
  • 3B-AP-17
  • 3B-AP-19
  • 3B-AP-21
  • 3B-AP-22
  • 3B-NI-04

State standards documents

Document Standards Grades
National
2022 Skill Struck Standards Alignment + Correlation Guide CSTA K-12 Computer Science Standards · 2022 K-2, 3-5, 6-8, 9-12
Alabama
Alabama Course of Study Digital Literacy and CS Standards + Skill Struck Alignment Alabama Course of Study Digital Literacy and CS Standards K-2, 3-5, 6-8, 9-12
Arizona
Arizona Computer Science Standards + Skill Struck Alignment Arizona Computer Science Standards K-2, 3-5, 6-8, 9-12
Arkansas
Arkansas Computer Science and Computing Standards High School Programming + Skill Struck Alignment Arkansas Computer Science and Computing Standards High School Programming · 2023 9-12
California
California K-12 CS Standards + Skill Struck Alignment California K-12 CS Standards K-2, 3-5, 6-8, 9-12
Idaho
Idaho Content Standards Computer Science + Skill Struck Alignment Idaho Content Standards Computer Science · 2023 K-2, 3-5, 6-8, 9-12
Illinois
Illinois Computer Science Standards + Skill Struck Alignment Illinois Computer Science Standards · 2022 K-2, 3-5, 6-8, 9-12
Indiana
Indiana K-12 Computer Science Standards + Skill Struck Alignment Indiana K-12 Computer Science Standards · 2023 K-2, 3-5, 6-8, 9-12
Iowa
Iowa Computer Science Standards + Skill Struck Alignment Iowa Computer Science Standards K-2, 3-5, 6-8, 9-12
Kansas
Kansas CS Standards P-12 + Skill Struck Alignment Kansas CS Standards P-12 · 2023 K-2, 3-5, 6-8, 9-12
Kentucky
Kentucky Academic Standards for Computer Science + Skill Struck Alignment Kentucky Academic Standards for Computer Science · 2023 K-2, 3-5, 6-8, 9-12
Maryland
Maryland K-12 CS Standards + Skill Struck Alignment Maryland K-12 CS Standards · 2023 K-2, 3-5, 6-8, 9-12
Massachusetts
Massachusetts Digital Literacy and Computer Science Standards + Skill Struck Alignment Massachusetts Digital Literacy and Computer Science Standards · 2023 K-2, 3-5, 6-8, 9-12
Michigan
Michigan K-12 Standards Computer Science + Skill Struck Alignment Michigan K-12 Standards Computer Science · 2023 K-2, 3-5, 6-8, 9-12
Mississippi
Mississippi College and Career Readiness standards for Computer Science + Skill Struck Alignment Mississippi College and Career Readiness standards for Computer Science · 2022 K-2, 3-5, 6-8, 9-12
Missouri
Missouri K-12 Computer Science Performance Standards + Skill Struck Alignment Missouri K-12 Computer Science Performance Standards · 2023 K-2, 3-5, 6-8, 9-12
Nebraska
Nebraska K-12 Technology Standards + Skill Struck Alignment Nebraska K-12 Technology Standards · 2023 K-2, 3-5, 6-8, 9-12
Nevada
Nevada Academic Content Standards for CS + Skill Struck Alignment Nevada Academic Content Standards for CS K-2, 3-5, 6-8, 9-12
Nevada Academic Content Standards for Integrated Technology + Skill Struck Alignment Nevada Academic Content Standards for Integrated Technology K-2, 3-5, 6-8, 9-12
Nevada Computer Science Standards + Skill Struck Alignment Nevada Computer Science Standards 9-12
New Jersey
New Jersey Computer Science and Design Thinking Standards + Skill Struck Alignment New Jersey Computer Science and Design Thinking Standards · 2020 K-2, 3-5, 6-8, 9-12
New York
New York Computer Science and Digital Fluency Learning Standards K-12 + Skill Struck Alignment New York Computer Science and Digital Fluency Learning Standards K-12 K-2, 3-5, 6-8, 9-12
North Carolina
North Carolina K-12 CS Standards + Skill Struck Alignment North Carolina K-12 CS Standards K-2, 3-5, 6-8, 9-12
Ohio
Ohio's Learning Standards Computer Science + Skill Struck Alignment Ohio's Learning Standards Computer Science · 2023 K-2, 3-5, 6-8, 9-12
Oklahoma
Oklahoma Academic Standards for Computer Science + Skill Struck Alignment Oklahoma Academic Standards for Computer Science K-2, 3-5, 6-8, 9-12
Rhode Island
Rhode Island's K-12 CS Education Standards + Skill Struck Alignment Rhode Island's K-12 CS Education Standards K-2, 3-5, 6-8, 9-12
South Carolina
South Carolina's Computer Science Standards for High School + Skill Struck Alignment South Carolina's Computer Science Standards for High School · 2023 9-12
Tennessee
Tennessee K-12 Computer Science State Standards + Skill Struck Alignment Tennessee K-12 Computer Science State Standards · 2023 K-2, 3-5, 6-8, 9-12
Texas
TEKs Skills for CTE + Skill Struck Alignment TEKs Skills for CTE 9-12
Utah
Utah 6-12 CS Standards + Skill Struck Alignment Utah 6-12 CS Standards · 2019 6-8, 9-12
Virginia
Virginia K-12 CS Standards + Skill Struck Alignment Virginia K-12 CS Standards · 2023 K-2, 3-5, 6-8, 9-12
Washington
Washington K-12 CS State Learning Standards + Skill Struck Alignment Washington K-12 CS State Learning Standards K-2, 3-5, 6-8, 9-12
Wisconsin
Wisconsin Standards for Computer Science + Skill Struck Alignment Wisconsin Standards for Computer Science · 2023 K-2, 3-5, 6-8, 9-12

Course Project

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 more advanced websites using different web development skills. Some examples of projects: Sunset, NASA Nav, Shoe Size Playing with Borders, 12 Column Chart, Forms

  • Web Development 2 student project: Sunset
    Sunset
  • Web Development 2 student project: NASA Nav
    NASA Nav
  • Web Development 2 student project: Shoe Size Playing with Borders
    Shoe Size Playing with Borders
  • Web Development 2 student project: Column Chart
    Column Chart
  • Web Development 2 student project: Forms
    Forms