| WMDD 4835 | HTML / CSS 2 |
| Credits: 3 | Rooms: B014 |
| Contact Info: Kevin McMillan Office A248 604.323.5941 |
Days & Times: Spring 2020 Tuesday 1230-320 Spring Break: Feb 17-22 Exam Period: April 04-20 |
| find my office | Office Hours Thursday 2-5 |
| WMDD 4840 | Content Management Systems |
| Credits: 3 | Room: B014 (Mac Lab) |
| Contact Info: Kevin McMillan Office A248 604.323.5941 |
Days & Times: Spring 2020 Mondays: 930 – 1230 Spring Break: Feb 17 – 22 Exam Period: April 04 – 20 |
| find my office | Office Hours Thursday 2-5 |
NOTE: because of the need for social distancing in response to the coronavirus crisis, this class will not meet in person for the rest of the term.
Instead, you will work on your exercises and final assignment, to be handed in via myFiles.langara.ca on the dates specified in this outline.
Messages and updates will be sent to you via your mylangara accounts.
To get in touch with me, please email via my langara account.
IMPORTANT NEW DATES
Term Projects: April 07
Combined Exam (4835/40):
April 14, 930am – 130pm
( this is an extra hour if you need it )
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.
Learning Outcomes
Upon successful completion of this course, students will be able to
- Use efficient HTML & CSS coding methods
- Use CSS transitions & animations
- Use modern JavaScript techniques
- 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 will be listed along with each week of course material.
An Excellent CSS Reference
CSS Reference.io
Another Excellent CSS Reference
Codrops CSS Reference
HTML5 Cheat Sheet
https://websitesetup.org/html5-cheat-sheet/
LinkedIn Learning Videos
Responsive Layout
SASS Essential Training
Course Structure
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.
| Main Assignment | 30% | |
| Quizzes | 10% | |
| Lab Exercises | 20% | |
| Midterm | 20% | |
| Final Exam | 20% |
Note, also, that dates listed are approximate: topics may take more or less time in response to class progress.
Week 1 (Jan 07) Advanced Selectors
Links
- TutsPlus: 30 CSS Selectors You Must Memorize
Due by beginning of next class:
- Fela Kuti: Advanced Selectors
- GuitarMania
Week 2 (Jan 14) Mobile First Review / Grid Review
Resources
Homework (Due start of next class)
Week 3 (Jan 21) Positioning / FlexBox
- Flexbox Froggy
- Class Files: DTN Mag Layout
Homework (Due Start of Next Class)
- Pure Flex Layout: “Light”: Photo Blog
Week 4 (Jan 28) Transforms, Transitions & Animation
- Transition Basics
- Animation Basics
- Transform Property
- Working with JS for Transitions
Resources
Homework / Lab Exercise (Due at the Start of Feb 11 class)
Week 5 (Feb 04) Transforms, Transition & Animation 2 / Form Styling
- Animation in Forms
- Styling while maintaining Accessibility
- CSS Blend Modes
- Basic Transitions Exercise
NOTE: homework for this week is the Basic Transitions Exercise from Week 4. This is due at the start of class Feb 11
Week 6 (Feb 11) SASS
- SASS: variables, partials, mixins
Homework / Lab Exercise (Due Feb 18 by 130)
Homework for the Rest of Spring Break
- LinkedIn Learning: SASS Essential Training
Chapters 1.1, 2.1, 2.2, 2.3, 2.4, 2.6, 3.1, 3.2, 3.3
Week 7 (Feb 18) Spring Break
- College closed Monday.
- No classes all week.
Week 8 (Feb 25) Midterm
- You will have three hours to produce a layout from a mockup screenshot.
Week 9 (Mar 03) Responsible Responsive Design
- Emerging Image Practices
- Bulk Image Processing
- WebP / SVG
- Lazy Loading
Lab Exercises
- Responsible Responsive Design: SRCSET 2020
- Responsible Responsive Design: SRSET with SIZES 2020
- Responsible Responsible Design (of the future?) WebP Image Format 2020
- Download: Files For These Three Exercises
- Responsible Responsive Design Demo Files (Heavily Annotated)
Week 10 (March 10) Canvas
- Drawing With JavaScript