|WMADD 4835||HTML / CSS 2|
|Credits: 3||Rooms: B014|
|Days & Times:
(Spring term runs Jan 02-April 09)
This class will cover HTML & CSS design and development, continuing on from the HTML / CSS 1 course of last semester. It will share an assignment with WMDD4840 (Content Management Systems).
Like anything in life, this outline is subject to occasional changes.
Throughout the term, I will add links to additional supporting content.
I want to make as much of your learning task-based, so nearly every week there will be problem-solving exercises to be completed in class or in the lab. A portion of your class mark will be for completion of these exercises.
Note: the final exam will take place in the last class session—not in the exam period as officially scheduled. This will allow you to spend additional time on the final assignment, which will be due during the exam period.
- Final Exam: April 04
- Final Assignment Due Date: April 13
Upon successful completion of this course, students will be able to
- Use efficient HTML & CSS coding methods
- Use CSS transitions & animations
- Use frameworks like Bootstrap
- Use CSS Preprocessors
- Rapidly prototype designs and code
- Critique the code and designs of peers
- Respond professionally to critiques of their code and designs
- Use emerging methods of layout and interaction, while ensuring successful fallback for older devices and browsers
Textbook / Reference Material
We will use primarily online sources in the course. A few general ones are listed here. More specific ones are listed along with each week of course material.
An Excellent CSS Reference
Another Excellent CSS Reference
Codrops CSS Reference
HTML5 Cheat Sheet
The class schedule is detailed below.
Techniques learned in one assignment or exercise will always be the starting point for subsequent ones. Be assured, therefore, that no lectures that can be easily missed.
It is your responsibility to make sure that you do not miss any announcements or course materials given in any class. Any additional announcements will be made via email to your mylangara accounts.
Note, also, that dates listed are approximate: topics may take more or less time in response to class progress.
Week 1: Jan 03 ( Advanced Selectors )
- Fela Kuti Advanced Selectors Lab Exercise
- Emmet Lab Exercise
- Emmet Uber Lab Exercise
- IcoMoon.io (time permitting)
Week 2: Jan 10 ( CSS Flexbox 1)
- ATOM Efficiencies Exercise
- Flex Properties
- Basic Flex Form Exercise
- Via Flex, the so-called Holy Grail Layout
- Flex In A Nutshell
- CSS Tricks: A Complete Guide to Flexbox
- Wes Bos: What the Flexbox?! Free Video Course
Week 3: Jan 17 ( CSS Flexbox 2)
- Full layouts with Flex
- Midterm WP Theme (not midterm test…)
- Feature Queries
- WP Theme Mockup Midterm Exercise
- 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: Final Tweaks
- Lynda.com: Advanced Responsive Layouts with Flexbox
Week 4: Jan 24 ( CSS Grid Module 1)
- Grid Theory & Syntax
- Flex vs Grid / Flex & Grid
- Feature Queries / Modernizr
- Fallback Approaches
- CSS Tricks: Getting Started With CSS Grid
- CSS Tricks: One Layout, Multiple Ways
- CSS Tricks: A Complete Guide to Grid
- Rachel Andrew: Grid By Example (an excellent resource)
Week 5: Jan 31 ( CSS Grid Module 2)
- Advanced Layouts
- Lynda.com: Advanced Layouts with Grid
Week 5: Feb 07 ( Transforms, Transitions, Animation)
- Menus Galore
- JS for transitions & animation
- Maintaining Accessibility
- Shay Howe: Transitions & Animations
- CSS Tricks: Transform Properties
- CSS Tricks: Transition Properties
- CSS Tricks: Multi-Stage Transitions via Delay Property
- Marksheet.io: Advanced CSS ( gradients, transitions, animations, transforms )
Week 6: Feb 14 ( Reading Week )
- No classes this week, so you can study for next week’s midterm…
Week 7: Feb 21 ( Midterm / Responsible Responsive Design )
- Exam will be a 2 – 3 hour layout exercise.
- Second part of the class will deal with ways to deal with Image Sizes in a world of high-density screens.
Week 9: Feb 28 ( jQuery)
- Selectors-based syntax
- DOM Manipulation
Week 10: Mar 07 ( Preprocessing: SASS)
Week 11: Mar 14 ( Build Tools: Gulp)
Week 12: March 21 ( Bootstrap)
- The pros of front-end frameworks
- The cons of front-end frameworks
- Lynda.com: Bootstrap 4 Essential Training
Week 13: Mar 28 ( Exam Prep / Work Day)
Week 14: April 04 ( Final Exam, in class. )
- Exam will again be a 2 – 3 hour layout exercise.