Intro to Web Dev in HTML and CSS (Student View)

Unit 1: Navigating and Designing for the Web

U1L1: Browsing Concepts

Khan Academy Video: Welcome to the Web (2:47)

Follow Along: Classroom procedures including saving and submitting files.

Discussion/Demo: What is your favorite website and how do you get there?

Class Demo and Journal Entry: Browsing Vocabulary

Worksheet: Parts of a URL

Worksheet: Domains and Hosting

U1L2: Principles of Web Design

Videos on Core Principles: Website Readability (2:45), Readability and Legibility (2:51), and Basic Website Usability (6:55)

Discussion/Journal: What is Good Web Design?

Worksheet: Principles of Design

Worksheet: Content-Driven Design

U1L3: Viewing Source Code

Khan Academy Video: HTML Basics (4:43)

Discussion/Demo: Viewing and Inspecting HTML Code

Discussion/Journal: Pages v Sites

Extension Activity: Source Control

U1 Activity: Useful URLs

Follow Along: Copy the starting code.

Follow Along: Add a Useful URL to the list.

Discussion: Which URLs do you want to add?

Independent Practice: Add 3 more Useful URLs.

Testing: With a partner, test each other's links.

Follow Along: Submit the Final Copy of your Useful URLs.

U1 Exam: Review and Assess

Review this unit's concepts with this page, including the short activities.

On the day of the exam you will receive instructions for completing it.

Unit 2: Intro to HTML

U2L1: What is HTML?

Review: Form of a Basic HTML Tag

Practice with a Partner: Write a Poem

Discussion/Journal: What is HTML?

Practice Independently: Update Useful URLs Page

Code Review: Test the Useful URLs and verify HTML nesting/indentation

U2L2: Using a Template and Tags

Khan Academy Video: Text Emphasis (2:04)

Khan Academy Challenge: Text Emphasis

Interactive Practice: Parts of HTML Tags

Follow Along: File Management with a "Templates" Folder

Re-Usable Code Sample: HTML Template File

Follow Along: Copy and Comment the HTML Template

Unit Activity: Begin Part 1 of My Web Elements Project

U2L3: Choosing Appropriate Tags

Follow Along: How to Read the W3Schools HTML Reference

Worksheet: HTML Tags

Discussion/Demo: Annotated Design

Practice With a Partner: Annotate two of these five designs | 1 | 2 | 3 | 4 | 5

Journal Entry: What is a Code Review and Why is it Useful?

Unit Activity: Begin Part 2 of My Web Elements Project

U2L4: Testing and Debugging HTML

Follow Along: Download and Fix the Kittens Project

Practice Independently: Add the Tidy Tool and Validator to Useful URLs (use them on it, too!)

Code Review: A partner will evaluate your Useful URLs with the checklist.

Unit Activity: Begin Part 3 of My Web Elements Project

U2 Activity: My Web Elements

Full Instructions: My Web Elements Instructions.

Part 1: File Management and Home Page

Part 2: More Pages

Part 3: Cleanup and Testing

U2 Exam: Review and Assess

Review this unit's concepts with this page, including the short activities.

On the day of the exam you will receive instructions for completing it.

Include answers to the following questions: What is acronym HTML? What is hypertext? What is a markup language? What does HTML look like? What does it mean to "nest" tags? What are the outermost tags of any web page? What are some other HTML tags? What is the difference between a tag and an element?

If you find a good resource that answers these questions, save the URL for later!

Unit 3: Intro to CSS

U3L1: What is CSS?

Exploration: Intro to CSS

Follow Along: How to read the W3Schools CSS Reference

Khan Academy Course: Intro to CSS

Interactive Practice: Parts of CSS

Journal Entry: What is CSS?

U3L2: Fonts and Text

Exploration: Import Fonts

Follow-Along: Need-to-Know Text and Font Properties

Worksheet: Text and Font Properties

Khan Academy Course: CSS Text Properties (from "CSS Zen Garden" through "Blog" project)

Interactive Practice: Text and Font

Extra Readings: CSS Tricks Blog

U3L3: Borders for Block v Inline Elements

Exploration: Block v Inline Elements

Follow-Along: Need-to-Know Border Properties

Practice Independently: Download the files with instructions for Borders and Colors

Journal Entry: Choose 1 CSS Border Property

U3L4: Selecting Specific Elements

Khan Academy Course: More CSS Selectors (from "Using Multiple CSS Classes" to the "CSS Specificity" practice quiz)

Worksheet: CSS Selection

Interactive Practice: CSS Selectors

Practice Independently: Download the files with instructions for Seasonal Theme

U3L5: Designing with Color

Video Tutorial: Sampling Colors in Chrome (2:58)

Worksheet: Color Schemes

Practice Independently: Colors with Opacity

Mini-Project/Journal Entry: Improve your Journal with Color

U3 Activity: The Power of CSS

Download the files: Power of CSS

Instructions: Unzip and then open the HTML file for step-by-step instructions.

U3 Exam: Review and Assess

Review this unit's concepts with this page, including the short activities.

On the day of the exam you will receive instructions for completing it.

You'll need to know the following CSS text and font properties for this unit:

  • font-family
  • font-size
  • font-weight
  • font-style
  • font-variant
  • color
  • text-align
  • text-indent
  • text-transform
  • text-decoration
  • text-shadow
  • line-height
  • letter-spacing
  • word-spacing
  • white-space

The CSS Tricks Blog is a good resource for additional information on CSS styles and techniques. Here are some of the best articles about working with text and font in CSS.

You'll need to know the following CSS border properties for this unit:

  • border-width
  • border-style
  • border-color
  • border (shorthand property)
  • border-bottom (and other side-based shorthand properties)
  • border-radius

Write a new journal entry about CSS color codes and properties.

Add a CSS <style> tag into the <head> area of the Journal's HTML and get creative with color, text, font, and border properties.

Unit 4: Images

U4L1: Choosing Appropriate Images

Worksheet: Image Rights

Discussion/Demo: Image Formats

Worksheet: Royalty-Free Images

Practice with a Partner: The Word "Attribute" Essay

U4L2: Editing Images

Pixlr Video Tutorials: 1 (10:04), 2 (15:51), 3 (5:55), 4 (5:30), and 5 (20:38)

Practice Independently: Optimizing Images for the Web

Mini-Project: Create Header Banner

Journal Entry: Choose An Image Editing Technique

U4L3: Images for Content and Style

Khan Academy Video: HTML Images (4:43)

Khan Academy Challenge: A Picture-Perfect Trip

Discussion/Journal: Content or Style?

Interactive Review: Parts of HTML Tags

Interactive Practice: The HTML Image Tag

Practice Independently: CSS Background Images

Practice with a Partner: Thumbnailing

U4L4: Specialty Images

Practice with a Partner: Favicon Activity

Practice Independently: Animated GIFs

Practice Independently: Rollover Buttons

Discussion/Journal: Choose a Topic -- Favicon, Animated GIF, or Rollover Sprite

U4 Activity: Capstone Bibliography

Complete: Bibliography Instructions

Preview: Full Capstone Project Instructions

U4 Exam: Review and Assess

Review this unit's concepts with this page, including the short activities.

On the day of the exam you will receive instructions for completing it.

Unit 5: The CSS Box Model

U5L1: Box Model Properties

Khan Academy Video: CSS Box Model (5:55)

Khan Academy Challenge: The Boxer Model

W3Schools Tutorial: CSS Box Model (Including all 4 Exercises)

Video Demo: Box Model Diagram in Browser

Interactive Practice: Box Model Matching

Practice with a Partner: Inline-Block Navigation

U5L2: Box Sizing and Reset Styles

Worksheet: Interactive Box-Sizing

Written Tutorials/Demos: CSS-Tricks Article and Demo, Tutorial with Rendered Example, and History of Box-Sizing Calculations

Journal Entry: CSS Box-Sizing Property

Discussion/Demo: A clean start with a CSS Reset

Re-Usable Code Sample: CSS Reset (add a reference to your HTML tepmlate, too!)

U5L3: Centering Methods

Practice Independently: Horizontal Centering

Discussion/Demo: Vertical Centering

Mini-Project: Implement This Design

Journal Entry: Choose a Centering Method

U5L4: Positioning and Layout Basics

Khan Academy Video: CSS Position (5:19)

Khan Academy Challenge: Position Planet

W3Schools Tutorial: CSS Position (Including all 5 Exercises)

Practice Independently: Fixed Positioning

Video Tutorial: Absolute Positioning with Files

Discussion/Journal: Recognizing Design Features

U5L5: Applying Icons

Discussion/Demo: Google Material Icons with List of Icons

Practice with a Partner: Icons Activity

Journal Entry: Choose 1 Icon Technique

Practice Independently: Icons Essay

U5 Activity: Develop Page from Given Design

View: Design File

Download: Image Assets

Complete: Instructions

Code Review: Work with a partner and the checklist

U5 Exam: Review and Assess

Review this unit's concepts with this page, including the short activities.

On the day of the exam you will receive instructions for completing it.

List any sites you know that appear to use vertical centering. Use the element inspector to see if you can figure out how they did it.
Look around the designs available at the CSS Zen Garden to see if you can find features you recognize. These features might include fixed navigation, absolute positioning, auto-margins to center the page, extra padding to make space for design images, etc.
Your entry can include any information you like about the CSS box-sizing property, but it must also include a code sample. Use the <code> tag to mark up your code sample, and style all <code> tags in your journal with a monospace font and a distinct color.
You must include a code sample, and you may choose from the following topics: "How to Center Inline Content", "How to Center Block Content", or "Vertical Centering"

Unit 6: Hyperlinks and Data Structures

U6L1: Intro to Hyperlinks

W3Schools Tutorials: HTML Links and File Paths

Dicsussion/Demo: Basic Link Types

Practice Independently: Adding and Styling Links

Mini Project: Refactor Journal to Multiple Pages with Code Review

U6L2: Special Hyperlinks

Follow Along: Application Schemes

Practice Independently: Bookmark Anchors

Practice With a Partner: Choose Your Own Adventure

Mini-Project: Image Map with Code Review

U6L3: Lists

W3Schools Tutorial: Lists (including all Exercises)

Practice With a Partner: Interactive Lists Tutorial (including "Coding Activities")

Practice Independently: Ten Essentials Lists

Mini-Project: Restaurant Menu with Description Lists Instructions

U6L4: Tables

W3Schools Tutorials: Tables (including all Exercises)

CSS-Tricks Article: Table Guide (test all of the CodePen samples)

Mini-Project: Recipe Page Instructions and Design

Refactor: Capstone Bibliography Page

Discussion/Journal: Types of Data

U6L5: Additional Data Structures

Practice With a Partner: Research Data Structures

Practice Independently: Data Structures Essay

Group Presentations: Extra Data Structures

Code Review: The group together reviews each member's Data Structures Essay according to the Checklist

U6 Activity: Improve My Web Elements

Full Instructions: My Web Elements Instructions.

Part 4: File Management and New Pages

Part 5: Update Navigation and Style

Part 6: Cleanup and Testing

U6 Exam: Review and Assess

Review this unit's concepts with this page, including the short activities.

On the day of the exam you will receive instructions for completing it.

A bibliography is an ideal kind of data for tables or lists, so go back to your Capstone Project bibliography page and improve your code ("refactor") to show the data in one of those structures. Once you are happy with your data structure, add 2 more resources that you may wish to use during the capstone project.
Review your activities from this lesson to analyze what kind of data is appropriate for lists v. tables. Here are some questions to consider: What makes some data good candidates for a list? What kinds of lists should be ordered or unordered? What makes some data good candidates for a table? What are good examples for using the THEAD and TFOOT areas of a table?
In the previous activities, you researched and wrote an essay on specialty data structures. You will be assigned to a group where every student had a different data structure chosen for the essay. Share your findings with the group.

Unit 7: CSS Layouts and Response

U7L1: Positioning Review with Layering

Self-Checking Review: Box Model Matching

Practice with a Partner: Explore Layering

Practice Independently: Pop-Up Modal Dialog

U7L2: Mobile-Friendly Design

Discussion/Demo: What makes a site mobile-friendly?

Practice with a Partner: Device Widths Report

Discussion/Demo: Google's Mobile-Friendly Testing Tool

Standards Update: Code Review Checklist

Journal Entry: What is Mobile-Friendly Design?

U7L3: Media Queries

Practice Independently: Responsive Header Tutorial

Discussion/Demo: Inspecting Breakpoints

Small Group Discussion: Design Breakpoints Chooser

Refactor: Make "My Web Elements" Project Responsive

U7L4: Constructing Grids with Floats

Discussion/Journal: CSS Floats

Discussion/Demo: Grid Frameworks with Sample

Re-Usable Code Sample: CSS Grid System

Practice with a Partner: Annotate Grid Designs

Practice Independently: Mobile-First Grid

U7 Activity: Implement a Site Design

Download: Project Files

Code Review: Work with a partner and the checklist

U7 Exam: Review and Assess

Review this unit's concepts with this page, including the short activities.

On the day of the exam you will receive instructions for completing it.

Explore a variety of websites to determine what features may improve the user experience on a mobile device. Here are some ideas of sites to explore:

And here are some ideas of what to look for:

  • Layout Changes
  • Header Changes
  • Simplified Content
  • Suggestion to use App
  • Font Changes
  • Touch Compatibility

Create a web page with an introduction about the variety of different devices used to view web pages. After the introduction, include a table of common device widths (good headings for the columns of this table might be Category, Example, and Width) that may be as small as phones or as large as TVs. The footer of the page should include links to any materials referenced while researching this topic.

You'll need the Unfriendly Kittens site (Here are the files).

Enter the Unfriendly Kittens URL at Google's Mobile Testing Tool.

Google provides documentation of their Usability Rules to help you understand the results.

Fix the files. If you can post them to a URL, use the tool to test again.

First, learn about the default float behavior here and here.

Then, learn about the foundations of using floats for layouts here, here, and here.

Finally, learn about using floats to construct grid layouts here.

Pro Tip: The links from learnlayout.com and aaawebdev.com use 2 different values for the overflow property. The risk with using "auto" is that you may see unexpected horizontal scrollbars for weird cases. The risk with using "hidden" is that you may have content cut off for weird cases. You'll have to do lots of testing to determine if those risks apply to your layout.

Add new requirements to your code review checklist for mobile friendliness.

Consider the class discussions, common device widths, and the Google tool when choosing the requirements.

Establish yes/no or measurable criteria. For exampe, "Does it fit small screens?" is a start, but a better metric is "Does it respond well at 400px, 800px, and 1200px widths?"

Decide if you wish to add a catch-all requirement like "Is there anything else obviously wrong with the responsiveness?"

Save your own personal copy of the Code Review Checklist so that you can always meet your own coding standards.

Unit 8: Capstone Projects

Objectives
Overview Document

View/Download

Quick Details

The Overview Document includes information about the 4 phases of the project, the grading rubric, helpful lists of CSS selectors and essay topics, suggested timeline, and more. When in doubt, look at this document for ideas on what to do next.

You will NOT be provided with step-by-step instructions. The purpose of the project is to apply knowledge and skills you have already learned throughout the course.

Your teacher may suggest additional tasks for goal-setting and time-management. These activities will depend on the level of the class, available time, and a variety of other factors.