WebD2+Students

Web Design and Development 1 (Version 2)

Make a Google Folder and share it with me, hand in your work through this shared folder.

Student Check List - make a copy of this checklist using Google, in the document title change the "student" to your name. This is to help you and I keep track of where you are and where you are going.

Web Design V2 - Student - Direct link to the resource provided by the University of Washington.

>>
 *  [|Unit One] : Designing and Planning Web Page
 *  [|Unit Two] : Creating Web Pages with HTML
 * 
 *  [|Unit Three] : Formatting Web Pages with Style Sheets
 *  [|Unit Four] : Graphics
 *  [|Unit Five] : Scripting
 *  [|Unit Six] : Quality Control
 *  [|Unit Seven] : Website Management and Authoring Tools
 *  [|Unit Eight] : Client Website

=Student Assignment Checklist = In supporting browsers, this page should automatically print with page breaks between units, and column headings repeated at the top of each page. For best results, print this page in landscape.
 * ~ Unit ||~ Module ||~ Lesson ||~ Assignment ||~ Date Completed ||~ Instructor's Initials ||
 * ~ 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: 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 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 <span class="GINGER_SOFTWARE_mark">portfolio s site; Add a comment to top of <span class="GINGER_SOFTWARE_mark">CSS file with color codes defining site's color scheme; implement; Apply color scheme to <span class="GINGER_SOFTWARE_mark">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 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 <span class="GINGER_SOFTWARE_mark">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 <span class="GINGER_SOFTWARE_mark">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 <span class="GINGER_SOFTWARE_mark">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 <span class="GINGER_SOFTWARE_mark">site ||   ||   ||
 * ^  ||~ 5: Reflections || 1: [|Reflections] || Add Reflections content to index.html ||   ||   ||
 * ~ 5: Scripting ||~ 1: Overview of Scripting <span class="GINGER_SOFTWARE_mark">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: <span class="GINGER_SOFTWARE_mark">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 <span class="GINGER_SOFTWARE_mark">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 <span class="GINGER_SOFTWARE_mark">sitewide tests run, reports generated ||   ||   ||
 * ^  ||~ 2: Publishing on the Web || 1: [|Website Hosting Services] || Create <span class="GINGER_SOFTWARE_mark">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 <span class="GINGER_SOFTWARE_mark">client website ||   ||   ||
 * ^  ||^   || 3: [|Quality Control of the Client Website] || Validate website; test accessibility; <span class="GINGER_SOFTWARE_mark">deliver site <span class="GINGER_SOFTWARE_mark">to client ||   ||   ||
 * ^  ||~ 2: Reflections || 1: [|Reflections] || Add Reflections content to index.html ||   ||   ||