CEDA 332 F001
Oct 24 – Dec 12 ( Saturdays )
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
A GOOD REFERENCE: Shay Howe
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:
Class demonstrations on software and authoring techniques; discussion; exercises; final site assignment.
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.
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 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
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.
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
- 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
- Fela Kuti Advanced Selectors Exercise
Download this ZIP archive. Instructions are included. You can at this point ignore anything about icon fonts, as we haven’t covered them yet.
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
- Creating An Icon Font Using Illustrator and IcoMoon
- The A11Y Project: How To Hide Content Accessibly
Class Exercises / Homework:
- Re:Vision Blog Layout Icon Fonts
- Advanced: SVG Data CSS Exercise (don’t worry about the animation part, yet)
Session 5 — Transitions & Animation
- Transitions Syntax
- CSS Transform Syntax
- Performance Considerations
- Animation Syntax
Class Exercises / Homework :
- Transitions Menu Items Exercise
- SVG Data CSS Exercise: Return to this exercise and add the animations.
- CSS Tricks: Transitions
- CSS Tricks: Animation
- CSS Tricks: Multi-Stage Animations & Transitions
- CSS Tricks: Transforms
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
- Emmet Exercise: Syncopate
( EMAIL me for this link, or use the CONTACT FORM to ask for it. )
- SASS Concept Demo: Grid
Session 8 – FlexBox
- Homework Before this Class: Read A Visual Guide to Flexbox(link in Resources section below)
- Homework Before this Class: FlexBox Froggy
- Class Exercise: Midterm WordPress CSS/HTML MockUp
- Lynda.com: Advanced Responsive Layouts With CSS Flexbox
- CSS Tricks Guide To FlexBox
- Wes Bos: What The FlexBox Video Series
- A Visual Guide to FlexBox Properties
Midterm Exercise Explained
- Midterm Solution Part 1: Structure
- Midterm Solution Part 2: Typography
- Midterm Solution Part 3: Icon Fonts
- Midterm Solution Part 5 Transitions
- Midterm Solution Part 6: Tweaks for Browser Support