Category Archives: Week 1

Week 1 Links

Here are some helpful links that we’ll look at today

Wireframe Examples


HTML as Content, CSS as the Style

 

Introduction to CSS Syntax and Styles

 

Cheat Sheets

 

Validation

Posted in Week 1 | Tagged | Leave a comment

Week 1 Class Plan

Today’s class, we’ll cover the following topics:

  • Introductions
  • Key Points on the Syllabus
  • Process
  • Wireframes
  • HTML vs CSS
  • Basic CSS Syntax
  • Cheat Sheets
  • Validation

Homeworks

Wireframes

In your journal, create 10 wireframes that copy the layout structure of pre-existing websites. You could sketch the Yahoo! homepage, or the Google News page, the Facebook Group page, or the My Little Pony’s site. The purpose of this exercise is to understand their structure and layout. If you use color, be sure it is minimal, only demarking important areas, or links, for example.

Label each wireframe with the name of the site and the URL that you are sketching.

DO NOT REPEAT SITES.

 

Week 1 Homework 1: One Page Bio

Plug in your own information and image into the HTML Bio Page we used in class. Then, using the CSS3 cheatsheet that I pointed you to in class, play with the styles of the page. Try to explore different styles and what you can do. You should spend at least two hours playing the CSS of this page to create a different look and feel.

Required Information:

  • name
  • contact
  • brief bio describing your background in web design, why you elected to take this class, and what you hope to achieve by the end of the term
  • a picture of yourself
  • 3 or more websites you deem as having excellent design
  • 3 or more websites you frequent regularly
  • a favourite quote or saying

*Remember to validate your code, include your name at the top of each document, and label your folder like so: /lastname_firstname_wdim161_wi12_wk1_hw1/

 

Downloadable Files

wk 1 handouts

Posted in Week 1 | Tagged , | Leave a comment