ECUAD Outlines

Advanced Web Design

 

CEDA 332 F001
Oct 24 – Dec 12 ( Saturdays )
930-1230
Room 121

COURSE DESCRIPTION

Following on from Introduction to Web Design, this course delves deeply into the skills needed by the modern web designer. Topics include Responsive Web Design, Advanced CSS Selectors, JavaScript libraries, CSS preprocessors, prototyping frameworks, strategies for high-resolution (aka Retina) displays, and emerging CSS3 modules fast on their way to the mainstream.

COURSE LEARNING OUTCOMES + OBJECTIVES

By the end of the sessions students should be able to demonstrate:

  • A good understanding of Grid Systems
  • A good understanding of all CSS Selector types
  • A good understanding of approaches to high resolution screens
  • The ability to quickly make sophisticated site prototypes
  • The ability to incorporate JavaScript- and CSS-based interactivity

A GOOD REFERENCE: Shay Howe

http://learn.shayhowe.com/

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 METHOD

Class demonstrations on software and authoring techniques; discussion; exercises; final site assignment.

COURSE CONTENT

A presentation of issues with supporting examples introducing key content and technical concerns involved in advanced web design and development. Topics, listed on the next page, may change slightly in response to class progress, interest, and requests.

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.

PLEASE DO NOT COME TO CLASS ILL

I will be quite understanding if you are not able to attend class due to illness. You will be doing yourself and your classmates a great favour by staying away from class. I’m happy to fill you in on any missed materials.

ASSESSMENT METHODS

Assessment will include: attendance and participation, weekly home assignment completion and final site.

SCHEDULE OF INSTRUCTIONAL DELIVERY

Session 1 – Grid Systems & Responsive Design Review

  • Mobile First
  • Guitar Mania Extended Play Exercise

Class Exercises

Depending on class composition (ie if most of the class didn’t take the Introduction to Web Design class), we might start with the GuitarMania exercise. Otherwise, we will start with the GuitarMania Revised Layout.

Homework:

  • GibsonVsFender-2015
    This will download a zip archive. Unpack it and follow the instructions in the Instructions file.
    In this exercise, you need to make your own grid, so it’s definitely an important exercise. 

Session 2 – RWD 2 / Emmet

  • Review GibsonVsFender2015 Exercise
  • Emmet: The Ultimate HTML/CSS Macro

Class Exercise:

Reference:

Homework:

  • DTN Magazine Exercise
    Clicking this link will download a ZIP file with instructions on the layout to build. In this exercise, make your own grid (don’t download a prebuilt one).Use Emmet as much as you can to make the coding far less tedious.

Session 3 – Advanced Selectors

  • Attribute Selectors
  • First-child, last-child
  • Nth-of-type & Expressions
  • Pseudo Classes, Pseudo Elements, Generated Content
  • CanIUse.com

Class Exercise:

References:

Homework (Optional)

  • PedalMania
    Download zip, instructions included. If you are comfortable with grids and responsive design, consider this exercise optional.

Session 4 – “High Resolution” Design

  • The challenge of retina screens
  • Icon Fonts: FontAwesome, icoMoon
  • SVG Review & Fallbacks
  • Self-hosted Fonts

References:

Class Exercises / Homework:

Session 5 — Transitions & Animation

  • Transitions Syntax
  • CSS Transform Syntax
  • Performance Considerations
  • Animation Syntax

Class Exercises / Homework :

References

Session 6 – jQuery I

  • Hooking jQuery up
  • jQuery Basics for Designers
  • Common Plugins

Homework (to be done week 5, in advance of this class):

Session 7 – CSS Preprocessors

  • Making CSS Programmatic & Modular
  • SASS: Variables, Operators, Nesting, Partials & Import, Mixins, Extends

Reference:

Class Exercise:

  • Emmet Exercise: Syncopate
    ( EMAIL me for this link, or use the CONTACT FORM to ask for it. )
  • SASS Concept Demo: Grid

Session 8  – FlexBox

Class Exercises:

Resources

Midterm Exercise Explained

 

Standard