Introduction to Web Design
Course Number: CEDA 232 S001
|Number of Sessions||8|
|Day and Time||Thursdays 6-9|
|Start Day||October 12|
This course explores the many facets of website design and development, as well as some of the ways that the Internet is being used by artists and designers for self-promotion.
You will learn the basics of web page creation, user-centered design principles, and design techniques for interactivity. You learn through exercises, projects, demonstrations and discussions.
Projects focus on the technical and aesthetic issues of developing a web site for your or your clients’ work.
Note: this course is run as an eight-week or a four-week course, depending on the term. This outline is presented as eight discreet sessions. If the course runs over four weeks, we will cover two sessions per meeting day.
A GOOD REFERENCE: Shay Howe
Chicago designer/developer Shay Howe has a very detailed teaching site loaded with useful information.
A GREAT REFERENCE: Lynda.com
If you are a Langara student, or an ECUAD regular studies student, you can access Lynda.com. If you aren’t, hopefully you have a Vancouver Public Library card, because you can access Lynda.com that way, too, via the link below:
COURSE LEARNING OUTCOMES + OBJECTIVES
By the end of the sessions students will be able to demonstrate:
- A basic understanding of user-centered design principles and their application to website design.
- The ability to create and use images in standard web formats and contexts.
- The ability to create and manage an entire website with multiple HTML documents and images.
Class demonstrations on software and authoring techniques; weekly assignments + a term project (individual student websites).
Presentation of issues with supporting examples on a particular theme introducing key techniques and concerns.
To successfully complete the course, students are expected to complete all assignments to the instructor’s stated requirements, attend at least 85% of the classes and participate actively in discussions and critiques.
Each week’s supervised work session begins with the discussion and/or presentation of each week’s homework assignment. The instructor will be available for individual assistance and support. The period allows students to immediately begin to fold in material from class presentations. Assessment will include: attendance and participation, assignment completion and creativity.
SCHEDULE OF INSTRUCTIONAL DELIVERY
Session 1: Intro to HTML
- Deconstructing a website: what is HTML and CSS and how do they interact?
- Document Structure
- File Naming Conventions
- Using the W3C HTML Validator
- Basic HTML Tags: html, head, title, body, h1, h2, h3, p, a, ul, li
Assignment 1: Make a three page website on any topic and bring it to class next week.
A Basic Summary of What We Do On Day One:
TutsPlus: Beginner’s Guide to Web Design, Pt 1
Session 2: Intro to CSS
- Separation of Content & Presentation via CSS
- Using the W3C CSS Validator
- The CSS Box Model: margin, padding
- CSS Type Basics: family, size, weight, line-height
- Using images on a web page
- Image alignment using the CSS float property
- Preparing images for the web using Photoshop and/or Illustrator
Assignment 2: Using CSS, style the website you made for Assignment 1. Bring the styled site to class.
Session 3: Basic Layout via Floats
- Two-column or three column layout via CSS float property
- Sectioning Elements: Header, Footer, Nav, Article
- Class Styles
- Paths in HTML & CSS
- Understanding the DIV Tag
- Tags, Classes, IDs
- Descendent Selectors
- Web Graphic File Formats
- List-Based Menus Via CSS
- The Clearfix Hack
- Float Property Files
Useful Bookmarklet Utility
Session 4: Horizontal Menus, CSS Backgrounds
- Google Font Hosting
- List-based Menus
- Containing Floats
- CSS Background Images
- CSS Gradients
- Beefheart Exercise Review
- Gibson Gallery | Annotated Solution
- Making the Gibson Gallery Responsive
- Background Images, Colors, Gradients
- Web Graphics Class Example Files 1
- Web Graphics Class Example Files 2 (ultra-detailed)
- List Based Horizontal Menus
- The Clearfix Hack
- CSS Tricks: Background Shorthand
- CSS Tricks: Gradient Syntax ( in authoritative detail )
- Mozilla Developer Network: Using CSS Gradients
Final Project: Start working on final project, if you plan to do one. Content is up to you, but all copyright must reside with you (a small percentage can be open source). I want to see a usable, extensible, and elegant site whose purpose is obvious to the viewer.
Sessions 5 & 6: Responsive Design / Mobile First
- Guitarmania design revisions
- Berlin Photo Gallery
- And a bunch more exercises if you want to practice
Session 7: Domains, Hosting, FTP, Forms
- Domains & Hosting
- Using FTP to upload your website to the web
- Anatomy of a URL
- Sample uploads.
- A simple contact form
We may also require time today to finish either of the exercises from last week.
Session 8: Review / A Look To Other Topics
- Introduction to Content Management Systems such as WordPress
- Introduction to Advanced Web Design class topics
- Class Review Session
- Consultation on your own sites
- Class Evaluation
Publish Final Project, if you’re doing one.