Categories
ECUAD Outlines

Intro to Web Design (2018)

Introduction to Web Design

Course Number:       CEDA 232 S001

Instructor: Kevin  McMillan
Number of Sessions 8
Day and Time Sundays 930-1230
Duration Oct 14 – Dec 09
No class Nov 11
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 COUPLE GOOD REFERENCES

MarkSheet.io
A very concise and well-written introduction to most of what’s important in HTML and CSS.

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:

VPL: Lynda.com Login

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.

COURSE SOFTWARE

Atom Text Editor
Useful Atom Packages
(suggested packages to install: Emmet, Open In Browser, MiniMap, Pigments, Atom-Wrap-In-Tag)

Useful Atom Keyboard Shortcuts

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
  • Tags & Attributes
  • Basic HTML Tags: html, head, title, body, h1, h2, h3, p, a, ul, li, img

Assignment 1: Make a three page website on any topic and bring it to class next week.

Readings / Review

For review of this week’s content, please read Marksheet.io chapters 2 & 3. In section three, skip the parts about tables and forms for now. Some content might not have been covered in the first class: just focus on the main ideas.

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

Readings / Review

Marksheet Chapters 4 – 6

Session 3: Basic Layout

  • 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

Session 4: Horizontal Menus, CSS Backgrounds

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

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
  • Class Review Session
  • Consultation on your own sites
  • Class Evaluation

Publish Final Project, if you’re doing one.