Please enable JavaScript to use CodeHS

Outline


1. What is the Web?
1.1 Welcome
Video 1.1.1 Welcome to Web Design
Check for Understanding 1.1.2 Welcome to Web Design Quiz
Free Response 1.1.3 Websites in Your Life
Free Response 1.1.4 What is Web Design?
Connection 1.1.5 Meet a Web Developer
Free Response 1.1.6 Course Goals
1.2 The Internet
Video 1.2.1 What is The Internet?
Check for Understanding 1.2.2 What is the Internet? Quiz
Free Response 1.2.3 A Day Without the Internet
Video 1.2.4 The Impact of the Internet: Crowdsourcing
Free Response 1.2.5 Exploring Crowdsourcing
1.3 Viewing Websites
Video 1.3.1 Viewing Websites
Check for Understanding 1.3.2 Viewing Websites Quiz
Free Response 1.3.3 Free Response: Explaining a URL
Connection 1.3.4 What is a Browser?
Connection 1.3.5 Your Browser
Free Response 1.3.6 Explaining a Browser
Connection 1.3.7 Viewing Websites In Different Browsers
Free Response 1.3.8 Reflection: Using Different Browsers
1.4 Digital Footprint and Reputation
Video 1.4.1 Digital Footprint and Reputation
Check for Understanding 1.4.2 Digital Footprint and Reputation
Example 1.4.3 Social Media Clean-up
Free Response 1.4.4 Building a Positive Digital Footprint
Connection 1.4.5 Right to be Forgotten?
Free Response 1.4.6 Right to be Forgotten
Free Response 1.4.7 What is your Digital Footprint?
1.5 Getting Started - What is the Web? Quiz
Unit Quiz 1.5.1 Getting Started - What is the Web? Quiz
Badge 1.5.2 Getting Started Badge
2. HTML - Structuring Websites
2.1 Introduction to HTML
Video 2.1.1 Introduction to HTML
Check for Understanding 2.1.2 Introduction to HTML Quiz
Example 2.1.3 Our First HTML Page
Exercise 2.1.4 Creating Your First Webpage
Example 2.1.5 Your Second Tag
Exercise 2.1.6 Dear Diary
2.2 Structure of an HTML Page
Video 2.2.1 Structure of an HTML Page
Check for Understanding 2.2.2 Structure of an HTML Page Quiz
Example 2.2.3 HTML Template
Example 2.2.4 Hello World Page
Example 2.2.5 Using Comments
Exercise 2.2.6 Working Within the Page Structure
Exercise 2.2.7 Introduce Yourself
2.3 Formatting Text
Video 2.3.1 Formatting Text
Check for Understanding 2.3.2 Formatting Text Quiz
Example 2.3.3 Dictionary Entry
Exercise 2.3.4 Online Recipe
Exercise 2.3.5 Class Schedule
Exercise 2.3.6 Reading List
2.4 Creating Links
Video 2.4.1 Links
Check for Understanding 2.4.2 Links Quiz
Example 2.4.3 The <a> Tag
Exercise 2.4.4 Search Engine Links
Exercise 2.4.5 Linkbran.ch
Exercise 2.4.6 Wiki Page
2.5 Incorporating Images
Video 2.5.1 Images
Check for Understanding 2.5.2 Images Quiz
Example 2.5.3 The <img> Tag
Example 2.5.4 Using an Image as a Link
Exercise 2.5.5 Images of Space
Exercise 2.5.6 Your Favorite Image
Exercise 2.5.7 Gallery Layout
2.6 Using Lists
Video 2.6.1 HTML Lists
Check for Understanding 2.6.2 HTML Lists Quiz
Example 2.6.3 Grocery Shopping
Exercise 2.6.4 Chores
Exercise 2.6.5 Favorites
Exercise 2.6.6 Adding to Your Favorites
2.7 HTML Tables
Video 2.7.1 HTML Tables
Check for Understanding 2.7.2 HTML Tables Quiz
Example 2.7.3 Address Book
Exercise 2.7.4 State Flowers
Exercise 2.7.5 Report Card
2.8 Copyright
Video 2.8.1 Copyright
Check for Understanding 2.8.2 Copyright Quiz
Example 2.8.3 Citing Sources Example
Connection 2.8.4 Exploring Creative Commons
Free Response 2.8.5 Response: Creative Commons
Free Response 2.8.6 Finding Images
Exercise 2.8.7 Image Squares
Free Response 2.8.8 Why Copyright is Important
2.9 Applying Styling
Video 2.9.1 HTML Styling
Check for Understanding 2.9.2 HTML Styling Quiz
Example 2.9.3 Styling the Grocery List
Exercise 2.9.4 Styling an Article
Exercise 2.9.5 Does Taylor Swift Lack Style?
2.10 HTML Colors
Video 2.10.1 HTML Colors
Check for Understanding 2.10.2 HTML Colors Quiz
Example 2.10.3 HTML Colors Examples
Exercise 2.10.4 Shoelaces
Exercise 2.10.5 Rainbow
Connection 2.10.6 Color Wheel
Exercise 2.10.7 All About You
2.11 Quiz: Exploring Web Design
Quiz 2.11.1 Exploring Web Design
3. Project - Create a Basic homepage
3.1 Homepage: Your First Website
Example 3.1.1 Example Homepage
Connection 3.1.2 Real World Homepage
Challenge 3.1.3 Set Up Your codehs.me Website
Challenge 3.1.4 Create Your Homepage
Badge 3.1.5 Create Your Homepage Badge
4. CSS - Styling Websites
4.1 Introduction to CSS Styling
Video 4.1.1 Introduction to CSS Styling
Check for Understanding 4.1.2 Introduction to CSS Quiz
Example 4.1.3 Styling with CSS
Exercise 4.1.4 Styling a List
Exercise 4.1.5 Adding CSS Styling
Exercise 4.1.6 Global Trip Skeleton
4.2 CSS Select by Tag
Video 4.2.1 CSS Select by Tag
Check for Understanding 4.2.2 CSS Select by Tag Quiz
Example 4.2.3 Rainbow
Example 4.2.4 Puppy Styling
Exercise 4.2.5 Today's Top Videos
Exercise 4.2.6 World Heritage Sites
Exercise 4.2.7 Global Trip: Style Headers
4.3 CSS Select by Class
Video 4.3.1 CSS Select by Class
Check for Understanding 4.3.2 CSS Select by Class Quiz
Example 4.3.3 Simple Checkerboard
Exercise 4.3.4 Football Divisons
Exercise 4.3.5 Favorite Navigation
Exercise 4.3.6 Global Trip: Emphasize with Styles
4.4 CSS Select by ID
Video 4.4.1 CSS Select by ID
Check for Understanding 4.4.2 CSS Select by ID Quiz
Example 4.4.3 Logo
Exercise 4.4.4 Water Cycle
Exercise 4.4.5 Aquarium Features
Exercise 4.4.6 Global Trip: Add Photos
Badge 4.4.7 Selector Badge
4.5 The Cascade
Video 4.5.1 The Cascade
Check for Understanding 4.5.2 The Cascade Quiz
Example 4.5.3 Using Importance
Example 4.5.4 Order of Precedence
Exercise 4.5.5 Planning for the Weekend
Exercise 4.5.6 Highlight to Remember
Exercise 4.5.7 Top Theme Parks
4.6 Add CSS Styling to your Homepage
Challenge 4.6.1 Add Styling to Homepage
4.7 CSS - Styling Websites Quiz
Unit Quiz 4.7.1 CSS - Styling Websites Quiz
Badge 4.7.2 CSS Badge
5. Advanced HTML and CSS
5.1 Getting Started - Advanced HTML and CSS
Video 5.1.1 Getting Started
Example 5.1.2 Example: Image Filters
Example 5.1.3 Example: Animations
Example 5.1.4 Example: Interactions
5.2 Multi-file Websites
Video 5.2.1 Splitting Your Site into Files
Check for Understanding 5.2.2 Splitting Your Site into Files Quiz
Example 5.2.3 Multipage Site Example
Exercise 5.2.4 Farmer's Market
Exercise 5.2.5 Bakery Stand
Exercise 5.2.6 More About Bakeries
5.3 Divs
Video 5.3.1 Divs
Check for Understanding 5.3.2 Divs Quiz
Example 5.3.3 Divvying up the Site
Exercise 5.3.4 Email
Exercise 5.3.5 Navigation Bar
Exercise 5.3.6 Volcanoes
Badge 5.3.7 Div Badge
5.4 Spans
Video 5.4.1 Spans
Check for Understanding 5.4.2 Spans Quiz
Example 5.4.3 Span Formatting
Exercise 5.4.4 Butterfly Lifecycles
Exercise 5.4.5 Caterpillar Webs
Exercise 5.4.6 Party Invitation
5.5 Combining CSS Selectors
Video 5.5.1 Combining CSS Selectors
Check for Understanding 5.5.2 Combining CSS Selectors Quiz
Example 5.5.3 More Specific Styling
Exercise 5.5.4 Daily Agenda
Exercise 5.5.5 Captions
Exercise 5.5.6 Restaurant Info
5.6 Special Selectors
Video 5.6.1 Special Selectors
Check for Understanding 5.6.2 Special Selectors Quiz
Example 5.6.3 Vote For Me
Example 5.6.4 Vote For Me Pt 2
Exercise 5.6.5 Voting Strategies
Exercise 5.6.6 Emphasize Your Options
Exercise 5.6.7 Club Membership
Badge 5.6.8 Special Selectors Badge
5.7 Visibility
Video 5.7.1 Visibility
Check for Understanding 5.7.2 Visibility Quiz
Example 5.7.3 Display Example
Example 5.7.4 Fading Text
Exercise 5.7.5 In a Jam
Exercise 5.7.6 Planets and Moons
Exercise 5.7.7 Parody
5.8 Reading Documentation
Video 5.8.1 Reading Documentation
Check for Understanding 5.8.2 Reading Documentation Quiz
Example 5.8.3 Using Docs: Float
Example 5.8.4 Using Docs: <blockquote> Tag
Exercise 5.8.5 Finding Color Names
Exercise 5.8.6 Mathematical Formulas
Exercise 5.8.7 Help Karel's Code
5.9 Image Manipulation
Video 5.9.1 Image Manipulation
Check for Understanding 5.9.2 Image Manipulation Quiz
Example 5.9.3 Grayscale Filter
Example 5.9.4 Blur Filter
Example 5.9.5 Hue Rotation
Exercise 5.9.6 The Brightness Filter
Exercise 5.9.7 Filter Settings
Exercise 5.9.8 Choose a Filter
5.10 Animation
Video 5.10.1 Animation
Check for Understanding 5.10.2 Animation Quiz
Example 5.10.3 Animated Image Filter
Exercise 5.10.4 Animate Your Image
Exercise 5.10.5 Animate Text Color
Exercise 5.10.6 Add Animation to Your Homepage
5.11 Interaction
Video 5.11.1 Interaction
Check for Understanding 5.11.2 Interaction Quiz
Example 5.11.3 Interactive Image Filter
Example 5.11.4 Smooth Interactive Image Filter
Example 5.11.5 Smooth Change on Click
Exercise 5.11.6 Identify the Image
Exercise 5.11.7 A Button
Exercise 5.11.8 Film Strip
Connection 5.11.9 CSS Tricks
5.12 Advanced HTML and CSS Quiz
Unit Quiz 5.12.1 Advanced HTML and CSS Quiz
Badge 5.12.2 Advanced HTML and CSS Badge
6. Final Project
6.1 Final Project
Free Response 6.1.1 Gathering Ideas
Challenge 6.1.2 Community Website
Badge 6.1.3 Final Project Badge
Badge 6.1.4 Web Design Completed