| Pre-Unit: Getting Started
| 1: Getting the Necessary Stuff Done
(This module is all on one page.)
| Computer Use |
Let's Agree About the Agreement |
|
|
| Folder Organization |
Folder Organization |
|
|
| Online Classroom |
Eureka |
|
|
| Forums |
Your First Post |
|
|
| 1: Designing and Planning Web Pages
| 1: Basic Site Evaluation and Rubric Creation
| 1: Surveying the
Possibilities |
Create table with evaluations of one good and one bad site |
|
|
| 2: Developing a Website
Evaluation Tool |
Develop a website evaluation tool (group activity) |
|
|
| 2: Color Theory
| 1: Color Theory in Web
Design |
Answer 5 Reading Check questions |
|
|
| 3: Web Standards & Accessible Design
| 1: Web Standards |
Participate in group activity |
|
|
| 2: How People with Disabilities
Access the Web |
Participate in various activities |
|
|
| 4: Planning a Website
| 1: Organizing a Website |
Answer 3 Reading Check questions; organize set of cards |
|
|
| 2: Creating Pages with HTML
| 1: Pre-Coding
| 1: Pre-coding |
Sketch home page and folder structure |
|
|
| 2: Basic HTML Markup
| 1: HTML Syntax |
Answer 5 questions |
|
|
| 2: Essential Tags |
Create six "bare bones" pages |
|
|
| 3: Common Tags |
Add common HTML tags to index.html |
|
|
| 3: HTML Lists
| 1: Lists |
Add two unordered lists to index.html |
|
|
| 2: Creating a Navigation
Menu |
Add a navigation menu (unordered list) to index.html |
|
|
| 4: Creating Links
| 1: Linking to External Internet
Sites |
Add a working external link to index.html |
|
|
| 2: Linking to Pages Within Your
Website |
Add a set of working links to the navigation menu in index.html |
|
|
| 3: Special Types of
Links |
Add "Skip to main content" and email links to index.html |
|
|
|
5: Creating a Data Table
| 1: Creating a Data Table |
Add a data table to accessibility.html |
|
|
| 6:HTML Video
| 1:Adding Video to Web Pages |
Add a Code.org video to your portfolio. |
|
|
| 2:Adding Captions to Videos |
Add a captions track to the video. |
|
|
| 7: Reflections
| 1: Reflections |
Add Reflections content to index.html |
|
|
| 3: Formatting Web Pages with Style Sheets
| 1: Introduction to Cascading Style Sheets
| 1: Anatomy of a Style |
Add <style> section to index.html containing basic CSS |
|
|
| 2: Applying Styles |
Add more CSS styles to index.html |
|
|
| 3: Linking to an External Style
Sheet |
Moved CSS to an external file; add a link element to index.html; copy
various tags to all HTML files |
|
|
| 2: Color in CSS
| 1: Understanding Color in
CSS |
Select a color scheme for a fictitious site |
|
|
| 2: Applying Color in CSS |
Select a color scheme for portfolio s site; Add a comment to top of
CSS file with color codes defining site's color scheme; implement;
Apply color scheme to site |
|
|
| 3: Typography in CSS
| 1: Understanding Typography in
CSS |
Create a list of good and bad sites based on their typography |
|
|
| 2: Applying Typography in
CSS |
Create two tables listing preferred body and heading fonts; apply
these fonts to site CSS |
|
|
| 4: The Box Model in CSS
| 1: Understanding The Box Model
in CSS |
Nothing to hand in, but... Understand the box model! |
|
|
| 2: Applying The Box Model in
CSS |
Add new styles to CSS file; add a <style> section to
accessibility.html with styles for the data table |
|
|
| 5: The Role of ID and Class in CSS
| 1: Understanding ID and Class in
CSS |
Add class and id attributes to various elements in index.html |
|
|
| 2: Applying ID and Class in
CSS |
Add styles to CSS file that change the appearance of various elements
based on their id and class |
|
|
| 3: Pseudo-class Selectors in
CSS |
Add pseudo-class selectors to CSS file |
|
|
| 6: Page Layout Techniques
| 1: Page Layout with CSS |
Add styles to CSS file that control the position of various
elements |
|
|
| 2: Stylizing a Navigation Menu
with CSS |
Add styles to CSS file to make navigation menu look like a menu |
|
|
| 7: Reflections
| 1: Reflections |
Add Reflections content to index.html |
|
|
| 4: Graphics
| 1: Introduction to Web Graphics
| 1: Introduction to Web
Graphics |
Add new section to graphics.html containing answers to 2 questions on
graphics.html |
|
|
| 2: Copyright Law and Graphics on
the Web |
Participate in group activity |
|
|
| 2: Creating a Web Photo Album
| 1: Understanding Web
Graphics |
Add new section to graphics.html containing answers to 5
questions |
|
|
| 2: Acquiring Images for Web
Graphics |
Acquire 3 images |
|
|
| 3: Cropping and Resizing |
Produce 6 images in 2 different sizes |
|
|
| 4: Adding Images to Your Web
Page |
Added photo album to graphics.html |
|
|
| 3: Creating a Button
| 1: Basic Shapes and
Colors |
Create a basic button shape |
|
|
| 2: Working With Layers |
Add email and camera icons to buttons |
|
|
| 3: Optimizing GIF Images |
Export email and camera buttons and add them both to index.html and
graphics.html |
|
|
| 4: Creating a Favicon |
Create a favicon and add it to site |
|
|
| 4: Creating a Web Page Banner
| 1: Selection Tools |
Create a practice image by extracting objects from an original source
image |
|
|
| 2: Layer Effects and
Blending |
Create a banner; add it to site |
|
|
| 3: Background Images |
Add a background image to site |
|
|
| 5: Reflections
| 1: Reflections |
Add Reflections content to index.html |
|
|
| 5: Scripting
| 1: Overview of Scripting on the Web
| 1: Client-side vs Server-side
Scripting |
Participate in group activity; create a list of 3 websites |
|
|
| 2: JavaScript
| 1: Using JavaScript to Show an
Alert |
Add code to javascript.html that shows an alert |
|
|
| 2: JavaScript Errors and
Debugging |
Find the bugs in the 3 buggy examples |
|
|
| 3: Building a JavaScript Clock
Part 1 |
Add code to javascript.html that displays a clock |
|
|
| 4: Building a JavaScript Clock
Part 2 |
Enhance clock by adding features (with JavaScript) and style (with
CSS) |
|
|
| 5: Using Javascript to Hide and
Show Content |
Add code to javascript.html that allows users to show or hide the
clock |
|
|
| 3: Reflections
| 1: Reflections |
Add Reflections content to index.html |
|
|
| 6: Quality Control
| 1: Validating Websites
| 1: Validating Your HTML |
HTML validation errors fixed in example page; portfolio site passes
HTML validation |
|
|
| 2: Validating Your CSS |
CSS validation errors fixed in example page; portfolio site passes
CSS validation |
|
|
| 3: Validating Your
Accessibility |
Add an accessibility review of your school's home page to
accessibility.html |
|
|
| 2: Testing Usability
| 1: Conducting a Usability
Test |
Participate in group activity; add a usability report to
usability.html |
|
|
| 3: Reflections
| 1: Reflections |
Add Reflections content to index.html |
|
|
| 7: Website Management and Authoring Tools
| 1: Web Authoring Software
| 1: Basic Features of Web
Authoring Software |
Add conent to a copy of tools.html using web authoring software |
|
|
| 2: Content, Structure,
Presentation, and Behavior |
Modify styles within copy of tools.html |
|
|
| 3: Site Management
Features |
Three or more sitewide tests run, reports generated |
|
|
| 2: Publishing on the Web
| 1: Website Hosting
Services |
Create ranked list of 3 top and 3 bottom choices of web service
providers; participate in group activity |
|
|
| 2: Website Publishing
Tools |
No assignment. |
|
|
| 3: Reflections
| 1: Reflections |
Add Reflections content to index.html |
|
|
| 8: Client Website
| 1: Client Website
| 1: Planning the Client
Website |
Complete Market Analysis worksheet; Organize site; sketch home
page |
|
|
| 2: Constructing the Client
Website |
Develop client website |
|
|
| 3: Quality Control of the Client
Website |
Validate website; test accessibility; deliver site to client |
|
|
| 2: Reflections
| 1: Reflections |
Add Reflections content to index.html |
|
|