Categories
Langara Outlines

WMDD4815 Outline (2020)

WMDD 4815 HTML / CSS 1 (Spring Term)
Credits: 3 Room: B018 (PC Lab)
Contact Info:
Kevin McMillan
Office A248
604.323.5941		 Days & Times:
Mondays: 130 – 420
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 regular langara account.

Official Outline (PDF)

SKIP to Class Content

This class will cover HTML & CSS design and development, and serve as a prerequisite for the HTML / CSS 2 and Content Management Systems courses next semester.

Like anything in life, this outline is subject to occasional changes.

Throughout the term, I will add links to additional supporting content.

Learning Outcomes

Upon successful completion of this course, students will be able to

  • Understand HTML document structure & semantics. Produce economical and validated code.
  • Build complex layouts with fluid css grids.
  • Integrate media into designs. Use code-based methods when possible to conserve bandwidth, maintain resolution, and future-proof the design.
  • Choose appropriate graphics formats.
  • Use media queries to make designs adapt to device properties and capabilities.
  • Use progressive enhancement, designing for modern devices, while ensuring successful fallback to less capable devices and browsers

Textbook / Reference Material

There is no textbook for this class. We will use primarily online sources in the course.

Required reading for some of the early classes is found in
MarkSheet.io: A Free HTML/CSS Tutorial

LinkedInLearning Videos
Other topics are well-covered by LinkedIn Learning videos.

How to login to LinkedInLearning using your Langara ID.

HTML Essential Training
CSS Essential Training
Visual Studio Code For Web Developers
Coding Faster With Emmet
Creating Optimized Web Graphics
CSS Selectors

An Excellent CSS Reference
CSS Reference.io

Another Excellent CSS Reference
Codrops CSS Reference

HTML5 Cheat Sheet
https://websitesetup.org/html5-cheat-sheet/

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 there are 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.

Assignments & Assessments
Assignment 1: Resumé Feb 17 by noon 15%
Assignment 2: Magazine Mockup Mar 30 by midnight 20%
Weekly Lab Exercises 15%
Quizzes 15%
Midterm  Feb 24 15%
Final Exam  tba 20%

Assignment Descriptions

Week 1: Jan 06 ( HTML Basics )

class photo generation procedure

HTML Semantics / Visual Studio Code Setup & Intro
h1-h6, p, ul, li, a, img
sftp
html validation

Class Files

Links

Resources

Online Component: Required Viewing

  • HTML Essential Training Ch 2 & 3

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.

Lab Exercises / Homework (Due at start of next class)

Week 2: Jan 13 ( HTML Sectioning / CSS Typography 1)

HTML Sectioning Elements / CSS Typography
Font Properties, Color, Units of Measure
The CSS Box Model
CSS Validation
Visual Studio Code Efficiencies

Lab / Class Exercises

Online Component: Required Viewing

  • HTML Essential Training Ch 4 – 7

Required Reading

Resources

Next Week: Our First Quiz

  • HTML: h1, h2, h3, h4, img, header, nav, article, a, ul, li, paths
  • CSS: how to specify fonts, css inheritance, box model, classes
  • Visual Studio selection & navigation efficiencies

Week 3: Jan 20 ( Design Principles / CSS Layout Basics )

Quiz Number 1
Graphic Design Principles: Alignment, Contrast, Proximity, Repetition, Readability
Floats, Clears,
Display Properties

Class Exercises

Resources

Homework (due at start of next class)

Online Component: Required Viewing

  • CSS Essential Training, Chapters 2 – 4

Week 4: Jan 27 ( Responsive Web Design 1 )

Four Pillars of Responsive Web Design
Mobile First
Media Queries
Font Hosting: Google Fonts
Display: Grid

Class Exercise

My apologies: the version of the GuitarMania exercise I linked to was an earlier version. That’s why it mentioned Flexbox. 

The correct one is now below:

Homework (Due at start of next class)

  • GuitarMania redone from scratch and finished

Online Components: Required

  • CSS Grid Garden Game
  • CSS Essential Training, Chapter 8, the following chapters
    Introduction to Responsive Design
    Introduction to Media Queries
    Media Queries, Widths and Breakpoints
    Testing Responsive Layouts
  • CSS Essential Training Chapter 5, the following chapters
    Introduction to CSS Grid

Week 5: Feb 03 ( Responsive Web Design 2 / CSS Positioning)

Lab Exercises

Week 6: Feb 10 (Responsive Web Design 3)

  • Quiz No 2
  • Grid & Positioning Practice Exercises

Class Exercises

Week 7: Feb 17 ( Spring Break )

  • Due Monday by midnight: Resume Assignment
    You do not need to FTP the project: IT has not yet fixed your accounts.
    Just hand it into STUDENTSHARE (on campus or via myfiles.langara.ca).
  • Midterm will take place next week

Optional Practice Exercises for Midterm

Week 8: Feb 24 (Midterm)

  • You will have approximately three hours to code a layout that I give you screenshots of.

Online Component: Required Viewing

Please do not forget that we have a quiz scheduled for next week. It will include questions about anything covered this term, including this week’s video series.

Week 9: Mar 02 ( Web Graphics & CSS Backgrounds )

  • The beauty of HSL & HSLa
  • File formats & usage
  • Background Images
  • Multiple Backgrounds
  • CSS Gradients
  • Scalable Vector Graphics (SVG)
  • Icon Fonts
  • Smart & efficient authoring
  • Graphics production workflows

Lab Exercise

Resources

Homework (Due start of class next week)

Week 10: March 09 ( Production Efficiency / Complex Selectors )

  • Emmet Workout

Lab Exercises

Week 11: March  16 (Tables, More Grid)

For this week, our first not meeting in person, I want you to try the layout we started in class last week: The Eatery.

However, there’s a little twist: I want you to do the exercise twice.

The description of the task and the files and screenshots are available on this page.

The first time you do the exercise should be in our regular class time (from the comfort of your own home, of course).

Use the index.html file that’s contained in the download. That is an almost-fully-marked up HTML page, so the emphasis here is on the CSS.

I have even made step-by-step instructions for how to complete the exercise.  (When you get to the bottom of part one, click the link to part two).

The second time you do the exercise, I want you do it using the other HTML file contained in the download: index-not-marked-up.html. The emphasis here, then, is on both HTML and CSS.

Do the exercise a few days after doing the step-by-step version—without consulting the step-by-step instructions.

Hand in the second attempt, via myfiles.langara.ca, by March 23 at 1230.

Week 12: March 23 (Media, Forms, FTP)

  • Media
  • Video / Sound

Week 12: March 30 (Work Day)

Magazine Assignment Due by Midnight.
Please review this checklist before you stop working on it.

About the Final Exam…

The exam will be like the midterm: you will be given a layout to build within a time period.