Please enable JavaScript to use CodeHS

Outline


1. Introduction to Javascript in HTML
1.1 Diagnostic Quizzes
Notes 1.1.1 Welcome to Web Development
Unit Quiz 1.1.2 HTML/CSS Diagnostic Quiz
Unit Quiz 1.1.3 JavaScript Diagnostic Quiz
1.2 The Script Tag
Video 1.2.1 The Script Tag
Check for Understanding 1.2.2 The Script Tag Quiz
Example 1.2.3 Debugging Functions
Free Response 1.2.4 Using the Console
Exercise 1.2.5 Writing in the Console
Exercise 1.2.6 Alert Introduction
Exercise 1.2.7 Debugging with the Console
Challenge 1.2.8 Quick Trivia
1.3 Using the DOM
Video 1.3.1 getElementById
Check for Understanding 1.3.2 getElementById Quiz
Example 1.3.3 Welcome to My Site!
Exercise 1.3.4 Let's Get to Know You
Exercise 1.3.5 Simple Math
Video 1.3.6 Using the DOM
Check for Understanding 1.3.7 Using the DOM Quiz
Example 1.3.8 Multiple <p> tags
Exercise 1.3.9 Menu Opinion
Exercise 1.3.10 Longest Paragraph
1.4 Creating Elements Using the DOM
Video 1.4.1 Creating Elements Using the DOM
Check for Understanding 1.4.2 Creating Elements Using the DOM
Example 1.4.3 Make a Button
Example 1.4.4 The Whole Family
Exercise 1.4.5 Roll Call
Exercise 1.4.6 Add to Calendar
1.5 Styling Elements Using Javascript
Video 1.5.1 Styling Elements Using JavaScript
Check for Understanding 1.5.2 Styling Elements Using JavaScript
Example 1.5.3 Frankenstein Footnote
Example 1.5.4 .(attribute) vs. setAttribute
Exercise 1.5.5 Add a Link
Exercise 1.5.6 Create a Flag
Exercise 1.5.7 Checkerboard
1.6 Functions in HTML
Video 1.6.1 Functions in HTML
Check for Understanding 1.6.2 Functions in HTML
Example 1.6.3 Changing Text Color
Example 1.6.4 Change Text Color with Parameters
Exercise 1.6.5 Announcement Function
Exercise 1.6.6 Random Number Generator
Exercise 1.6.7 Add Colors!
1.7 This Keyword
Video 1.7.1 This Keyword
Check for Understanding 1.7.2 This Keyword
Example 1.7.3 Clicking Multiple Paragraphs
Example 1.7.4 Clicking with Event Listeners
Exercise 1.7.5 Click Box
Exercise 1.7.6 Cross Out
Challenge 1.7.7 Make a Quilt
1.8 Challenge: Make a Keyboard
Connection 1.8.1 Challenge Overview!
Exercise 1.8.2 Make Button
Exercise 1.8.3 Make Text
Challenge 1.8.4 Make a Keyboard
1.9 Keyboard Interactions
Video 1.9.1 Keyboard Events
Check for Understanding 1.9.2 Keyboard Events
Example 1.9.3 Coordinate Plane
Example 1.9.4 Make a Keyboard with Key Events
Exercise 1.9.5 Key Alert
Exercise 1.9.6 Light Up Squares
Exercise 1.9.7 Light Switch Squares
1.10 JavaScript Animations
Video 1.10.1 Animations in JavaScript
Check for Understanding 1.10.2 Animations in JavaScript
Example 1.10.3 Growing Square
Example 1.10.4 Changing Colors
Exercise 1.10.5 Rotating Div
Exercise 1.10.6 Lucky Lotto Number
Exercise 1.10.7 Rotating Div with Keyboard Interaction
1.11 Positioning and Animations
Video 1.11.1 Positioning and Animations
Check for Understanding 1.11.2 Positioning and Animations
Example 1.11.3 Positioning Elements
Example 1.11.4 Moving Square in Container
Exercise 1.11.5 Practice with Positions
Exercise 1.11.6 Hidden Nav Bar
Exercise 1.11.7 Moving a Square
Challenge 1.11.8 Add Div Animation
1.12 Introduction to JavaScript in HTML Quiz
Unit Quiz 1.12.1 Introduction to JavaScript in HTML Quiz
2. Using JavaScript Libraries
2.1 Introduction to jQuery
Video 2.1.1 Introduction to jQuery
Check for Understanding 2.1.2 Introduction to jQuery
Example 2.1.3 Using the Selector
Example 2.1.4 jQuery Functions
Connection 2.1.5 Exploring the jQuery Documentation
Free Response 2.1.6 Exploring the jQuery Documentation
Exercise 2.1.7 High School Info
Exercise 2.1.8 Change Paragraph Size
Exercise 2.1.9 jQuery Table
Challenge 2.1.10 Smart jQuery Table
2.2 Iterating with jQuery
Video 2.2.1 Iterating with jQuery
Check for Understanding 2.2.2 Iterating with jQuery
Example 2.2.3 Printing To Do List
Example 2.2.4 Smart Table Using Each
Exercise 2.2.5 Mark Complete
Exercise 2.2.6 Fix Width
Exercise 2.2.7 Strobe Light
2.3 Animations with jQuery
Video 2.3.1 Animations with jQuery
Check for Understanding 2.3.2 Animations with jQuery
Example 2.3.3 .animate Grow
Example 2.3.4 Animation Queue
Example 2.3.5 Toggle
Exercise 2.3.6 Bouncy Ball
Exercise 2.3.7 Extracurriculars
Exercise 2.3.8 FrankenDiv
2.4 Callback Functions and Synchronization
Video 2.4.1 Callback Functions and Synchronization
Check for Understanding 2.4.2 Callback Functions and Synchronization
Example 2.4.3 .animate Execution Delay
Example 2.4.4 .animate Per-Element Callback
Exercise 2.4.5 Grow and Shrink Counter
Exercise 2.4.6 Progress Bar
Challenge 2.4.7 The Wave
2.5 Using Multiple Files in JavaScript
Video 2.5.1 Using Multiple Files in JavaScript
Check for Understanding 2.5.2 Using Multiple Files in JavaScript
Example 2.5.3 Execution Order
Example 2.5.4 Accessibility Button
Exercise 2.5.5 Our First js File
Exercise 2.5.6 Fix Load Order
Challenge 2.5.7 The Wave with .js
2.6 Using JavaScript Libraries Quiz
Unit Quiz 2.6.1 Using JavaScript Libraries Quiz
3. Project: Build an Interactive Resume!
3.1 Creating a Resume
Connection 3.1.1 Interactive Resume Project Overview
Connection 3.1.2 What is a Resume?
Free Response 3.1.3 What is a Resume?
Free Response 3.1.4 Draft Your Resume
3.2 Layout and Web Design Theory
Video 3.2.1 Layout and Web Design Theory
Check for Understanding 3.2.2 Layout and Web Design Theory
Free Response 3.2.3 Learning More About the Z and F Layouts
Connection 3.2.4 Explore Resume Layouts
Free Response 3.2.5 Explore Resume Layouts
Free Response 3.2.6 Sample Interactive Layouts
3.3 Interactive Resume Development
Free Response 3.3.1 Draft Your Interactive Resume
Challenge 3.3.2 Online Interactive Resume Draft
Free Response 3.3.3 Evaluating an Interactive Resume
Challenge 3.3.4 Final Draft Interactive Resume
4. Storing and Collecting Data
4.1 Collecting and Storing Data
Video 4.1.1 Collecting and Storing Data
Check for Understanding 4.1.2 Collecting and Storing Data
Connection 4.1.3 How Much is Your Data Worth?
Free Response 4.1.4 How Much is Your Data Worth Responses
Example 4.1.5 Does Your Browser Have Local Storage?
Example 4.1.6 Local Storage
Connection 4.1.7 Cookies vs. Local Storage
Free Response 4.1.8 Cookies vs. Local Storage Responses
4.2 Storing Data with Local Storage
Video 4.2.1 Storing Data with Local Storage
Check for Understanding 4.2.2 Storing Data with Local Storage
Example 4.2.3 Saving Your Name
Example 4.2.4 Save Button Clicks
Exercise 4.2.5 Save Background Color
Exercise 4.2.6 How Many Times Have You Visited This Site
4.3 Storing Data Structures with Local Storage
Video 4.3.1 Storing Data Structures with Local Storage
Check for Understanding 4.3.2 Storing Data Structures with Local Storage
Example 4.3.3 Using JSON
Example 4.3.4 Last Three Backgrounds
Exercise 4.3.5 Print To Do List
Exercise 4.3.6 Tracking Scores
Challenge 4.3.7 Saving Active Divs
4.4 JavaScript Objects
Video 4.4.1 Using Objects in JavaScript
Check for Understanding 4.4.2 Using Objects in JavaScript
Example 4.4.3 Person Object
Example 4.4.4 Using Functions in Objects
Exercise 4.4.5 A Contact Object
Exercise 4.4.6 Add Contact
Exercise 4.4.7 Retrieve Contacts
Challenge 4.4.8 Print Contact List + Styling
4.5 Using Input Fields
Video 4.5.1 Using Input Fields
Check for Understanding 4.5.2 Using Input Fields
Example 4.5.3 Input Types
Example 4.5.4 Serialized Form Array
Example 4.5.5 Storing Input in Local Storage
Exercise 4.5.6 To-Do List
Exercise 4.5.7 To-Do List with Local Storage
Exercise 4.5.8 Birthday Tracker
4.6 Challenge: Create a Survey
Connection 4.6.1 Survey Challenge Overview
Free Response 4.6.2 Survey Brainstorm
Exercise 4.6.3 Create Survey Form
Challenge 4.6.4 Complete your Survey
4.7 Storing Data with Firebase
Video 4.7.1 Storing Data with Firebase
Check for Understanding 4.7.2 Storing Data with Firebase
Example 4.7.3 Storing and Collecting Data with Firebase
Exercise 4.7.4 Introduce Yourself to Firebase
Exercise 4.7.5 Storing a Book Object
Exercise 4.7.6 Retrieving a Book Object
4.8 Traversing Data with Firebase
Video 4.8.1 Traversing Data with Firebase
Check for Understanding 4.8.2 Traversing Data with Firebase
Example 4.8.3 Adding New Nodes
Example 4.8.4 Visualizing Firebase
Free Response 4.8.5 Visualizing Firebase
Exercise 4.8.6 Retrieving Authors
Exercise 4.8.7 Diary Entry
4.9 Challenge: Collecting User Clicks
Connection 4.9.1 Storing Click Data Overview
Challenge 4.9.2 Get Date and Element
Challenge 4.9.3 Storing Click Data
4.10 For/In Loops
Video 4.10.1 For/In Loops
Check for Understanding 4.10.2 For/In Loops Quiz
Example 4.10.3 Find Users with Same Name
Example 4.10.4 Nested For/In Loops
Exercise 4.10.5 Hogwarts
Exercise 4.10.6 How Many Guests?
Challenge 4.10.7 Visualizing User Clicks
4.11 Using APIs
Video 4.11.1 Using APIs
Check for Understanding 4.11.2 Using APIs
Example 4.11.3 Using an API Key
Example 4.11.4 Generate an API Key
Exercise 4.11.5 Creating a Dictionary API
Exercise 4.11.6 Using a Movie API
4.12 Storing and Collecting Data Quiz
Unit Quiz 4.12.1 Storing and Collecting Data Quiz
5. Project: Collecting Data
5.1 Define Your Product
Resource 5.1.1 Project: Collecting Data Overview
Free Response 5.1.2 Data Website Brainstorm
5.2 Develop Hypotheses
Video 5.2.1 User Personas
Check for Understanding 5.2.2 User Personas
Connection 5.2.3 User Persona Example
Free Response 5.2.4 User Persona Example Responses
Free Response 5.2.5 Create Your Own User Persona
5.3 Creating Your Data Collection Website
Free Response 5.3.1 Drafting Your Website
Free Response 5.3.2 Organizing Your Data
Challenge 5.3.3 Data Collection Site
5.4 Collecting User Data
Free Response 5.4.1 Collecting User Data
Free Response 5.4.2 User Testing 1
Free Response 5.4.3 User Testing 2
5.5 Analyzing User Data
Video 5.5.1 Analyzing User Data
Check for Understanding 5.5.2 Analyzing User Data
Free Response 5.5.3 Label your Data
Free Response 5.5.4 Analyzing your Data
5.6 Making Decisions
Free Response 5.6.1 Writing up a Data Report
6. How to Build and Maintain a Website
6.1 Choosing a Domain Name
Video 6.1.1 Choosing a Domain Name
Check for Understanding 6.1.2 Choosing a Domain Name
Connection 6.1.3 How to Choose a Domain Name
Free Response 6.1.4 How to Choose a Domain Name
Notes 6.1.5 Choosing a Domain Name
Free Response 6.1.6 Choosing a Domain Name
6.2 Hosting Your Website
Video 6.2.1 Personal Servers vs. Web Server Providers
Check for Understanding 6.2.2 Personal Servers vs. Web Server Providers
Connection 6.2.3 How to Host a Website
Free Response 6.2.4 How to Host a Website
Connection 6.2.5 Hosting a Website from Your Own Home
Free Response 6.2.6 Self-Hosted or Web Server Provider?
Free Response 6.2.7 Hosting on CodeHS!
6.3 Using a CMS
Video 6.3.1 Using a CMS
Check for Understanding 6.3.2 Using a CMS
Connection 6.3.3 How to Choose a CMS
Free Response 6.3.4 How to Choose a CMS
Connection 6.3.5 Comparing CMS Systems
Free Response 6.3.6 Comparing CMS Systems
6.4 What is Web Optimization?
Video 6.4.1 What is Web Optimization?
Check for Understanding 6.4.2 What is Web Optimization?
Connection 6.4.3 Website Folder Structure
Notes 6.4.4 File Naming Conventions
Free Response 6.4.5 Folders and Files
6.5 Optimizing Web Information
Video 6.5.1 Optimizing Web Information
Check for Understanding 6.5.2 Optimizing Web Information
Connection 6.5.3 How Search Works
Free Response 6.5.4 How Search Works
Connection 6.5.5 What is Search Engine Optimization (SEO)?
Free Response 6.5.6 SEO Definition
Connection 6.5.7 Ethical Search Optimization
Free Response 6.5.8 Ethical Search Optimization
Connection 6.5.9 Yoast Analyzer
Free Response 6.5.10 Yoast Tool Activity
6.6 How to Build and Maintain a Website Quiz
Unit Quiz 6.6.1 How to Build and Maintain a Website Quiz
7. Final Project
7.1 Project Overview
Resource 7.1.1 Final Project Overview
Connection 7.1.2 Innovative Brainstorm
Free Response 7.1.3 Innovative Brainstorm
7.2 Planning Your Site
Free Response 7.2.1 Determine your Objectives
Free Response 7.2.2 Create a Sitemap
Free Response 7.2.3 Create a Project Timeline
7.3 Creating Your Site
Free Response 7.3.1 Create your Site
7.4 Providing Feedback
Connection 7.4.1 Evaluating an Innovation
Free Response 7.4.2 Evaluating an Innovation
Free Response 7.4.3 User Testing 1
Free Response 7.4.4 User Testing 2
7.5 Presenting Your Innovation
Free Response 7.5.1 Make Changes and Update Version
Presentation 7.5.2 Present your Innovation