Web Page Design

This is an on-line section of an introductory course in web page design with an emphasis on html and css. During this course, students will create several web sites, increasing in complexity. Exploration and analysis of existing sites on the web will also be a focus, and source for information. Students will prove competencies by: competency based assignments and exercises.

The focus of this course is to create well designed web pages. The more comfortable you are with design and illustration, the smoother the transition will be in designing for the world wide web. Keep in mind that this technology is changing on almost a daily basis. Parts of what you learn today could be obsolete soon. Keep your ears and minds open to new ways of handling this medium. Become an internet user. The more you surf and see other sites, the more ideas and information you will have to bring to your own work.


By Weeks
(See Blackboard for more details)
  1. Course Introduction An introduction to basic Web/HTML code structure
    Goodboy Steps 1 & 2 - Adding images, links, and html 5 tags
  2. Intro to CSS (cascading style sheets)
    CSS for layout positioning (Goodboy Step 3)
    Adding fonts, color, background images
    Goodboy – JavaScript additions
    A Site of Your Own - Intro (reboot site)
  3. Style tile (reboot site)
    Create UI/UX Comp from supplied Photoshop file (reboot site)
  4. Intro to saving assets and CSS from Photoshop
    Use Goodboy architecture and add your assets to html/css
  5. Finish reboot site – upload to CAWEB server
    Positioning and Floats (Baby Animals & Madison College exercises)
  6. Portal Page (index.html)
    Create resume in html/css
  7. Continue working on resume
  8. Lucky's Responsive Template
    Working with Responsive Templates (Bootstrap)
    Submit style tile, template link and proposal for your chosen subject
  10. Using templates/bootstrap site of your choosing
  11. Work on Bootstrap template site Upload site and add link to your index
  12. Intro to Adobe XD
    Intro to Blue Water Divers site (assignment)
  13. Blue Water Divers – client brief, user persona, wireframe using Xd
  14. Intro to WIX
  15. Final Assignment – Recreate your XD UI/UX in WIX
  16. Finish final Assignment – WIX Add link to your index.html page



"Jump drives"
(flash drives, thumb drives...) - there are a variety of USB plug in type storage devices which will allow you to store work and easily share between Mac and PC environments.

Firewire drives
Although more expensive, this alternative will allow you to store the greatest amount of data. You are solely responsible for the purchase, upkeep and maintenance of any drive you use at school.

Cloud Storage
I would encourage you to have a cloud storage account for backup. You can obtain a free account through dropbox.com or a mac iCloud account.

Text Books

There are no required text books for this course, however, I highly recommend:

Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics

Jennifer Niederst Robbins & Aaron Gustafson
ISBN: 978-1449319274 ; Published: August 21, 2012; 4th Edition
Publisher: O'Reilly Media

Dreamweaver CC for Windows and Macintosh: 
            Visual QuickStart Guide

Dreamweaver CC for Windows and Macintosh: Visual QuickStart Guide
Tom Negrino, Dori Smith
ISBN: 0321929519; Published: August 31, 2014;
Publisher: Peachpit Press

Dreamweaver CC - The Missing Manual

Dreamweaver CC - The Missing Manual (Covers 2014 release)
David Sawyer McFarland & Chis Grover
ISBN: 1491947209; Published: December 6, 2014;
Publisher: O'Reilly Media

HTML5 & CSS3 Visual Quick Start

HTML5 and CSS3: Visual QuickStart Guide
Elizabeth Castro, Bruce Hyslop
ISBN: 0321719611; Published: December 31, 2011, 7th Edition;
Publisher: Peachpit Press

HTML5 For Web Designers

HTML5 For Web Designers

Jeffrey Zeldmann
ISBN: 0984442502; Published: 1ST edition (2010;
Publisher: A Book Apart

CSS3 for Web Designers

CSS3 for Web Designers

Dan Cederholm
ISBN: 0984442529; Published: Published: 1ST edition (2010;
Publisher: A Book Apart


Your final grade will be the sum of the following parts:

Web Sites
  • Several web sites will be created during this course. These sites will be a variety of single and multi-page, contain graphics, hyperlinks and other appropriate content. Criteria for grade evaluation will be supplied for each site.
Mini Exercises
  • In order to learn specific page design and layout skills, you will create several short “mini pages” or exercises. In addition, these mini pages will serve as content on your personal web page.
  • Attendance will be calculated by your posting your time and tasks under each week's assigments.

  • An incomplete grade will only be granted for extreme reasons such as severe illness, death in family...
    They will not be granted for failure to complete projects, or not completing projects to your standards.