Please enable JavaScript to use CodeHS

Standards Mapping

for Utah Web Development 2

69

Standards in this Framework

69

Standards Mapped

100%

Mapped to Course

Standard Lessons
WD2.1.1
Use advanced HTML5 elements to create website.
  1. 2.4 Bootstrap Components
  2. 4.5 Using Input Fields
  3. 4.12 Server-side Languages
WD2.1.1a
Add SVG images (i.e.: image map, icons, logos, etc.) (You can use original images or use a library of SVG images)
  1. 2.4 Bootstrap Components
WD2.1.1b
Code HTML forms on websites (i.e.: radio, checkbox, text field, text area, field set, dropdown lists, legend, etc.)
  1. 4.5 Using Input Fields
WD2.1.1c
Code a submit button: GET - good for non-secure data & has a limited number of characters
  1. 4.5 Using Input Fields
WD2.1.1d
Code a submit button: POST - secure and no size limitations
  1. 4.5 Using Input Fields
WD2.1.1e
Understand the action that will run on the server on the form submit button. (PHP file)
  1. 4.12 Server-side Languages
WD2.1.1f
Code frames or add the canvas element on a website
  1. 1.4 Styling Elements Using Javascript
WD2.1.1g
Incorporate in-line JavaScript on a webpage
  1. 1.2 Using the DOM
  2. 1.9 JavaScript Animations
  3. 2.2 Getting Started with Bootstrap
WD2.1.1h
Incorporate internal JavaScript on a webpage
  1. 2.2 Getting Started with Bootstrap
WD2.1.1i
Incorporate external JavaScript on a webpage
  1. 2.2 Getting Started with Bootstrap
WD2.2.1
Understand the use of various CSS selectors.
  1. 1.4 Styling Elements Using Javascript
  2. 2.2 Getting Started with Bootstrap
WD2.2.1a
Understand the cascade order for browser default, inline, internal, and external style sheet
  1. 2.2 Getting Started with Bootstrap
WD2.2.1b
Code element selections to modify HTML elements (tag, ID, & classes)
  1. 2.8 Using Bootstrap Examples to Create a Media Carousel
WD2.2.1c
Code contextual selectors to modify nested elements (i.e.: footer nav (}, header ul (}, etc.)
  1. 2.8 Using Bootstrap Examples to Create a Media Carousel
WD2.2.1d
Code pseudo class selectors (i.e.: a: link, a:visited, a:active a:hover)
  1. 1.4 Styling Elements Using Javascript
WD2.2.1e
Code pseudo element selectors (e.g. ::after{clear:both}, p:: first-line{color: #OOFF00;})
  1. 2.3 The Bootstrap Grid System
WD2.2.2a
Format page layout with advanced CSS.
  1. 1.4 Styling Elements Using Javascript
  2. 1.10 Positioning and Animations
WD2.2.2b
Use grids, flexbox, or a combination for page layouts
  1. 2.3 The Bootstrap Grid System
WD2.2.2c
Use width, height, or auto to adjust the size of the elements
  1. 1.4 Styling Elements Using Javascript
WD2.2.2d
Code navigation bars
  1. 2.6 Navigation Bars
WD2.2.2e
Use text align, margin, and padding
  1. 2.6 Navigation Bars
  2. 2.7 Drop Down Menus
WD2.2.2f
Use float to position elements
  1. 2.3 The Bootstrap Grid System
WD2.2.3a
Build responsive websites.
  1. 2.6 Navigation Bars
WD2.2.3b
Media queries
  1. 2.8 Using Bootstrap Examples to Create a Media Carousel
WD2.2.3c
SVG & picture elements
  1. 2.4 Bootstrap Components
WD2.2.3d
Responsive text size - using rem, vh, and vw in css
  1. 2.4 Bootstrap Components
  2. 2.5 More Bootstrap Components
WD2.2.3e
Responsive navigation bar
  1. 2.6 Navigation Bars
WD2.2.3f
Introduce the concept of frameworks like: BootStrap, Query, Vue.js, Nodejs, etc.
  1. 2.1 What is Bootstrap?
  2. 2.2 Getting Started with Bootstrap
WD2.2.4
Code animation and graphics with advanced CSS.
  1. 1.4 Styling Elements Using Javascript
  2. 2.2 Getting Started with Bootstrap
  3. 2.8 Using Bootstrap Examples to Create a Media Carousel
WD2.2.4a
Code buttons. (i.e.: rounded, colored, etc.)
  1. 2.2 Getting Started with Bootstrap
WD2.2.4b
Code image overlay hover. (i.e.: Fade-in, slide-out, etc.)
  1. 1.4 Styling Elements Using Javascript
WD2.2.4c
Code image slider or carousel
  1. 2.8 Using Bootstrap Examples to Create a Media Carousel
WD2.3.1
Create a website plan and pitch for a client.
  1. 3.1 Bootstrap Project
  2. 6.1 Project Overview
  3. 6.2 Planning Your Site
WD2.3.1a
Identify basic principles of website usability, readability, and accessibility
  1. 3.1 Bootstrap Project
WD2.3.1b
Plan a website by using sketches, website hierarchy, wireframe, or a site map
  1. 6.2 Planning Your Site
WD2.3.1c
Communicate with others (such as peers and clients) about design and content plans
  1. 3.1 Bootstrap Project
WD2.3.1d
Produce website designs that work on various devices and browser versions/configurations
  1. 3.1 Bootstrap Project
WD2.3.1e
Plan, communicate, or present a client's website before, during or after website development
  1. 6.5 Presenting Your Innovation
WD2.3.2
Create content for website.
  1. 1.10 Positioning and Animations
  2. 2.8 Using Bootstrap Examples to Create a Media Carousel
WD2.3.2a
Create and prepare 2D images. gif, .png, jpg, svg
  1. 2.8 Using Bootstrap Examples to Create a Media Carousel
WD2.3.2b
Prepare rich media, such as, video, sound, or animation
  1. 1.10 Positioning and Animations
WD2.3.2c
Identify when to use various image and digital media file formats
  1. 2.8 Using Bootstrap Examples to Create a Media Carousel
WD2.3.2d
Optimize images for web content, such as resize, resolution, compress, thumbnails
  1. 2.5 More Bootstrap Components
  2. 2.8 Using Bootstrap Examples to Create a Media Carousel
WD2.3.2e
Understand the use of favicons
  1. 2.4 Bootstrap Components
WD2.3.2f
Identify how to avoid violating copyright rules
  1. 2.8 Using Bootstrap Examples to Create a Media Carousel
WD2.3.2g
Demonstrate the use of semantic elements such as: audio, video, and figure
  1. 2.8 Using Bootstrap Examples to Create a Media Carousel
WD2.3.3
Uploading and maintaining a site.
  1. 5.2 Hosting Your Website
WD2.3.3a
Understand and be able to describe the capabilities of web servers
  1. 5.2 Hosting Your Website
WD2.3.3b
Differentiate between types of IP addresses
  1. 5.2 Hosting Your Website
WD2.3.3c
Describe a static IP address
  1. 5.2 Hosting Your Website
WD2.3.3d
Describe a Dvnamic IP address
  1. 5.2 Hosting Your Website
WD2.3.3e
Differentiate between ipv4 and ipv6
  1. 5.2 Hosting Your Website
WD2.3.3f
Conduct basic technical tests such as validating the website (W3C compliant), accessibility, SEO, etc.
  1. 5.5 Optimizing Web Information
WD2.3.3g
Present webpages to others for quality assurances (QA) such as team members and clients for feedback and evaluation on technical merits and usability
  1. 6.4 Providing Feedback
WD2.3.3i
Identify methods for collecting site feedback, such as using counters, feedback forums, Google Analytics, Google Webmaster Tools
  1. 5.6 Web Site Maintenance
WD2.3.3k
Provide site maintenance using bug reports, backups, and promotion
  1. 5.6 Web Site Maintenance
WD2.3.3l
Document all aspects of website maintenance
  1. 5.6 Web Site Maintenance
WD2.3.3m
Identify internet protocols: http, https, ftp
  1. 5.2 Hosting Your Website
WD2.3.4
Work as a team to create a website.
  1. 3.1 Bootstrap Project
WD2.3.4a
Use good oral and written communication skills as a team member
  1. 3.1 Bootstrap Project
WD2.4.1a
Introduce JavaScript and how it is used in web development
  1. 1.1 The Script Tag
  2. 1.2 Using the DOM
WD2.4.1b
Include some simple JavaScript in your website.
  1. 1.2 Using the DOM
  2. 1.5 Functions in HTML
WD2.4.2a
Introduce functions
  1. 1.5 Functions in HTML
WD2.4.2b
Create custom functions - for example: function myFunction() {alert("Hello World!");}
  1. 1.5 Functions in HTML
WD2.4.3
Introduce variables and uses - for example: var name = prompt("Enter you name: "); alert("Your name is" + name);
  1. 1.4 Styling Elements Using Javascript
WD2.4.4a
Learn how to gather input from the user
  1. 1.3 Creating Elements Using the DOM
  2. 1.4 Styling Elements Using Javascript
WD2.4.4b
Store user input into a variable
  1. 1.4 Styling Elements Using Javascript
WD2.5.1
Build an interactive response website
  1. 3.1 Bootstrap Project
WD2.5.2
Participate in a CTSO, Utah Digital Media Arts Festival, or competition
  1. 7.1 Computer Science Careers