Please enable JavaScript to use CodeHS

Utah Web Development 2

View Syllabus Overview
Introduction to Javascript in HTML
Description

In this lesson, students learn how to incorporate JavaScript into their HTML pages using the script tag.

Objective

Students will be able to:

  • Incorporate JavaScript into their HTML pages
  • Use the console to debug scripts
Description

In this lesson, students learn how to modify HTML tags on a webpage using the DOM. The DOM, or Document Object Model, translates HTML files into accessible objects that can be manipulated or added to a webpage.

Objective

Students will be able to:

  • Modify existing elements on a web page using document.getElementById
  • Modify existing elements on a web page using document.getElemenyByTagName
  • Explain the purpose of the DOM, and how it is used to manipulate HTML files
Description

In this lesson, students will learn how to create elements using the Document Object Model.

Objective

Students will be able to:

  • Create elements using document.createElement
  • Add created elements to an existing webpage
Description

In this lesson, students learn how to style elements in HTML using JavaScript and the Document Object Model.

Objective

Students will be able to:

  • Utilize setAttribute appropriately to style elements in JavaScript
  • Distinguish between .attribute and setAttribute notation and determine the advantages and disadvantages of both
Description

In this lesson, students learn how to use functions to make their webpages more dynamic.

Objective

Students will be able to:

  • Articulate the difference between dynamic and static websites
  • Create buttons with onclick events
  • Use functions to create working, dynamic buttons
Description

In this lesson, students learn how to use the keyword this to pass elements as parameters in their click events.

Objective

Students will be able to:

  • Appropriately use the keyword this
  • Explain the difference between how this is used with onclick and with eventListeners
Description

In this lesson, students will implement the skills they’ve learned from the previous lessons to create a working, clickable keyboard.

Objective

Students will be able to:

  • Create a working, clickable keyboard using only JavaScript
Description

In this lesson, students learn about another event listener - keyboard interactions. Students learn how to listen for a keyboard press, and how to access information about each keyboard stroke.

Objective

Students will be able to:

  • Use keydown and keyup events to read keyboard information
  • Distinguish between key.code and key.key, and when it’s appropriate to use each
Description

In this lesson, students learn how to animate web page elements using timers.

Objective

Students will be able to:

  • Describe what animation is, and how it works
  • Use timers to successfully animate web page elements and terminate animations
Description

In this lesson, students learn how to use the position style in CSS to improve animations.

Objective

Students will be able to:

  • Explain the difference between all the position attributes
  • Use position to animate elements
Description

In this lesson, students test their knowledge of concepts from this module with a unit quiz.

Objective

Students will be able to:

  • Prove their knowledge of JavaScript in HTML through a multiple choice quiz
Bootstrap
Description

In this lesson, students will be introduced to Bootstrap, including who uses Bootstrap and why people would want to use Bootstrap.

Objective

Students will be able to:

  • Explain what Bootstrap is
  • Explain why a web developer would want to use Bootstrap
  • Compare and contrast responsive vs. unresponsive sites
Description

In this lesson, students will learn how to add Bootstrap to a webpage and create the basic structure using Bootstrap’s container classes.

Objective

Students will be able to:

  • Enable Bootstrap on a webpage
  • Create a basic Bootstrap page using container to gather the pieces of the site
  • Explain the difference between container and container-fluid
Description

In this lesson, students will learn how to use Bootstrap’s grid system to create the layout of their webpages.

Objective

Students will be able to:

  • Use Bootstrap’s grid system to structure their webpages
  • Explain the parts of Bootstrap’s grid system
  • Explain how the grid system enables Bootstrap sites to be responsive
Description

In this lesson, students are introduced to page headers, buttons, and icons. They will use different typographies to style the header and sub-header of their webpages. They will use and style buttons to increase interactivity on their webpage.

Objective

Students will be able to:

  • Add title to their webpages by creating page headers
  • Use icons to add widely recognized icons to their webpages to improve usability
  • Create and style buttons
Description

In this lesson, students will learn how easy it is to create beautiful and interactive tables using Bootstrap classes. Students will create galleries of images and links using Bootstrap’s thumbnail class.

Objective

Students will be able to:

  • Create professional looking tables using Bootstrap’s CSS rules for tables
  • Create a gallery of thumbnail images
Description

In this lesson, students will learn how to add a navbar (navigation bar) to their websites.

Objective

Students will be able to:

  • Create a navbar that sits at the top of a webpage
  • Add links to a navbar
Description

In this lesson, students will learn how to make dropdown menus. They will apply dropdown menus to navbars as well as a way of choosing an option elsewhere on the page.

Objective

Students will be able to:

  • Create dropdown menus in a navbar
  • Create dropdown menus as part of the website to redirect to another part of the same page
Description

In this lesson, students will explore the official Bootstrap templates. They will modify an existing webpage to create their own webpage.

Objective

Students will be able to:

  • Use a Bootstrap template and modify the page content
  • Use a Bootstrap template and modify the styles
  • Understand how to properly size images and another media for use on a website
Description

In this lesson, students complete a summative assessment of the unit’s learning objectives.

Objective

Students will be able to:

  • Prove their knowledge of Bootstrap through a multiple choice quiz
Bootstrap Project
Description

This project enables students to unleash their creativity to design and implement a responsive website using Bootstrap. Students should go BIG on this project, using what they’ve learned throughout the last lesson to make a responsive and beautiful website. They should be encouraged to explore out new elements, using documentation to help them. They should be encouraged to use templates and examples to get them started.

Objective

This project enables students to unleash their creativity to design and implement a responsive website using Bootstrap.

Storing and Collecting Data
Description

In this lesson, students learn about the pros and cons of data collection and the different ways that data can be stored.

Objective

Students will be able to:

  • Explain the pros and cons of data collection
  • Define browser and server storage
  • Explain the pros and cons of browser storage
  • Determine if their current browser supports local storage
Description

In this lesson, students learn how to store data using localStorage.

Objective

Students will be able to:

  • Store data using localStorage and setItem
  • Retrieve data using localStorage and getItem
Description

In this lesson, students learn how to store objects and data structures in local storage using JSON.

Objective

Students will be able to:

  • Store objects and data structures in local storage using JSON.stringify
  • Retrieve objects and data structures from local storage using JSON.parse
  • Describe the use and purpose of JSON
Description

In this lesson, students will learn how to store data using objects.

Objective

Students will be able to:

  • Create a JavaScript object
  • Store and access data from a JavaScript object
  • Explain the importance of using objects
Description

In this lesson, students learn how to use forms to collect data from users.

Objective

Students will be able to:

  • Use the form tag
  • Successfully retrieve data from a form
  • Use a variety of input tags to request data from users
Description

In this lesson, students will implement the skills they’ve learned from the previous lessons to create an online survey.

Objective

Students will be able to:

  • Create an online survey
Description

In this lesson, students learn how to store and retrieve data using Firebase. Firebase is a cloud data storage system that enables programmers to save and retrieve data using only JavaScript.

Objective

Students will be able to:

  • Explain what Firebase is
  • Store and retrieve data using Firebase
Description

In this lesson, students learn how to navigate through data nodes in Firebase using ref().

Objective

Students will be able to:

  • Use ref() to navigate data nodes
  • Access data nodes using the appropriate pathway
Description

In this lesson, students will implement the skills they’ve learned from the previous lessons to create a program that tracks the number of times elements are clicked.

Objective

Students will be able to:

  • Track click events
  • Appropriately implement the Date object class
Description

In this lesson, students learn how to iterate through objects using the for/in loop.

Objective

Students will be able to:

  • Iterate through objects using for/in
  • Iterate through Firebase objects using for/in
Description

In this lesson, students learn how to request API data from a URL, and how to access that data using getJSON.

Objective

Students will be able to:

  • Explain the purpose of an API key and request one
  • Request a URL from an API database
  • Access and navigate data from a URL request using getJSON
Description

In this lesson, students will learn about web development stacks and create basic server-side programs.

Objective

Students will be able to:

  • Identify essential components of a web stack
  • Identify different web development stacks
  • Use a server-side language to create a program
Description

In this lesson, students test their knowledge of concepts from this module with a unit quiz.

Objective

Students will be able to:

  • Prove their knowledge of data collection through a multiple choice quiz
How to Build and Maintain a Website
Description

In this lesson, students will learn how to choose a meaningful and appropriate domain name for their website.

Objective

Students will be able to:

  • Register a domain name
  • Describe the components of an effective domain name
  • Evaluate the quality of a domain name
Description

In this lesson, students will learn the different steps needed to host a website, either online or using a home computer.

Objective

Students will be able to:

  • Explain what it means to host a website.
  • Describe what is needed to host a website, either online or using a home computer
  • Identify the advantages and disadvantages of hosting a website online or on a home computer
Description

In this lesson, students will learn about web CMS providers, the different benefits each offer, and how to choose the best fit for their website.

Objective

Students will be able to:

  • Understand the pros and cons of choosing a web CMS provider vs. building from scratch with HTML/CSS
  • Identify popular web CMS providers
  • Evaluate the features and offerings of different CMS providers
Description

In this lesson, students will learn what web optimization and web conversion rate are why they are important and useful.

Objective

Students will be able to:

  • Explain what web optimization is and why it is important in web communications. They will also be able to explain and determine a web conversion rate.
Description

In this lesson, students will learn how to optimize a web site, understand how a search engine works, and use their understanding of F-pattern reading, SEO, and the Yoast tool to further optimize a site.

Objective

Students will be able to:

  • Explain the basics of optimizing a web site and make their own adjustments to their sites, when needed, to optimize for the web.
Description

In this lesson, students will research what tasks need to be done and how to monitor them in order to maintain a website.

Objective

Students will be able to:

  • Explain what tasks need to be done to maintain a website
  • Explain how to track website maintenance issues
Description

In this lesson, students will look at what it means to make a website accessible for different users with different needs.

Objective

Students will be able to:

  • Identify common web accessibility issues.
  • Use basic WCAG measures to remedy common web accessibility issues.
  • Describe the impact of web accessibility issues on users with disabilities.
Description

In this lesson, students test their knowledge of concepts from this module with a unit quiz.

Objective

Students will be able to:

  • Prove their knowledge of website hosting through a multiple choice quiz
Final Project
Description

In this lesson, students are introduced to the final project, and work to brainstorm ideas for their final project innovation.

Objective

Students will be able to:

  • Describe the requirements of the final project
  • Effectively brainstorm using a mind-map
Description

In this lesson, students will plan their website using a project timeline and sitemap.

Objective

Students will be able to:

  • Create a project timeline using Gantt Charts
  • Create a sitemap
  • Determine the purpose of their final project
Description

In this lesson, students will draft and complete their final project innovation.

Objective

Students will be able to:

  • Create an innovative website that uniquely improves their community
Description

In this lesson, students will provide feedback to classmates on the quality of their final project innovation.

Objective

Students will be able to:

  • Provide constructive feedback to classmates
Description

In this lesson, students prepare a presentation to share their innovation and how it’s changed over time.

Objective

Students will be able to:

  • Articulate how their website has changed over time
  • Make changes to their site based on feedback
Computer Science Careers
Description

In this lesson, students will explore careers available in computer science and student organizations to prepare them for various technological careers. They’ll also learn how bias can affect computer programs.

Objective

Students will be able to:
- Explore different computer science careers and opportunities
- Learn how bias can affect computer programs