Categories
ECUAD Outlines

Intro to Web Design

Introduction to Web Design

Course Number:       CEDA 232 S001

Instructor: Kevin  McMillan
Number of Sessions 8
Day and Time Thursdays 6-9
Start Day October 12
Room B1122

COURSE DESCRIPTION

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

https://learn.shayhowe.com/

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:

https://www.vpl.ca/extDB/login.remoteDB_Ly?LyndaDotCom

Lynda.com is the web’s most widely-known excellent video instruction site. There are tons of videos on all aspects of web design: HTML, CSS, WordPress, JavaScript, etc.

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.

COURSE METHOD

Class demonstrations on software and authoring techniques; weekly assignments + a term project (individual student websites).

COURSE CONTENT

Presentation of issues with supporting examples on a particular theme introducing key techniques and concerns.

REQUIREMENTS

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.

Resources

A Basic Summary of What We Do On Day One:
TutsPlus: Beginner’s Guide to Web Design, Pt 1

A really good overview of HTML & CSS

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.

Resources

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

Class Exercises:

Homework Exercise:
Captain Beefheart Layout Exercise | Annotated Solution

Resources

Useful Bookmarklet Utility

Session 4: Horizontal Menus, CSS Backgrounds

  • Google Font Hosting
  • List-based Menus
  • Containing Floats
  • CSS Background Images
  • CSS Gradients

Class Exercises:

Resources

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

Class Exercise:

Resources

Additional Exercises

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.

Resources

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.