Categories
CSS HTML

ECUAD Building Responsive Design Rough Outline 2025

NOTE to Kevin: this is a quick copy of the various sections of my ECUAD course for sharing with Binazir.

Note: this outline is subject to change, during the running of the course, or before it begins.

Course Content

This course will introduce students to designing and coding responsive web sites using HTML, CSS, and JavaScript. Emphasis throughout will be placed on a mobile-first workflow and the need to create work that adapts to the wide range of devices it will invariably be viewed on. Fundamental concepts will include css grid and flexbox, media queries, web typography, accessibility, performant code, and efficient coding.

Nearly every week will have a significant exercise to complete. Most weeks will begin with discussion of the previous week’s exercise before moving on to demonstrations of new concepts and techniques.

The course starts with no assumptions of prior experience of designing or coding for the web. The best way for you to acquire the skills presented in the course is to complete the weekly exercises as the course progresses.

Course Learning Outcomes

Upon completion of the course students are expected to be able to:

  • Identify the key functional elements of web pages and apps
  • Prepare and organize proper file structures to facilitate management of site content
  • Use mobile first methodology to code effective web pages and apps
  • Demonstrate use of flexible grids, images and queries
  • Devise a fully functional, accessible and responsive site
  • Write and test code, including HTML and CSS

Evaluation Criteria

Weekly Exercises70%
Final Project30%
Total100%

Final Project

For a description of the final project, please read this. 

We will discuss the project in class about half way through the course.

The last week of the class will not have lecture: that time will be for work and consultation on your project. 

Software Used in the Course 

Our main software will be Visual Studio Code. It is free, and available for Mac, Windows, and Linux. 

Please download and install it before the first class session.

If you do not have Google Chrome installed on your computer, please install it also. We will use its Developer Tools in most classes.

We will also use the Adobe Creative Suite, specifically Photoshop and Illustrator.

Finally, we will likely also use XNConvert, which is a great free open-source graphics processing program.

Useful Visual Studio Code Extensions

  • Live Server (for Previewing your work in a browser)
  • File Utils (for features that should have been in VSC in the first place)
  • Bracket Pair Colorizer (a sanity preserver for nested code)
  • Color Highlight (a Color Picker in your css)
  • Error Lens (for Troubleshooting your HTML, CSS, and JavaScript)
  • Text Pastry
  • VSCode Random (for generating random content quickly)

Course Videos: Loom & LinkedIn Learning

Most weeks will have links to videos that you can use for review. 

Most of these videos are created using the Loom video service. You can watch Loom videos without creating an account, but I would recommend you get the free Loom education account anyway, because it will let you very easily create cloud-hosted videos that you can share with anyone.

If you are having issues with an exercise, recording a quick Loom video and sending me a link via email, will typically enable us to works issues out quickly. This takes only a couple clicks.

You can also comment on my Loom videos, at which point I will be notified and can reply.

Some other videos listed earlier in the outline, typically optional (for review or additional information), come from LinkedInLearning.

Access to LinkedIn Learning is obtained via the Library single sign-on using your Emily Carr email username and password.

You will find the link to LinkedIn Learning listed on the Library database page.

If you have questions or concerns, or are having difficulties accessing LinkedInLearning, contact the ECUAD Library at library@ecuad.ca.

Weekly Content, Homework, Solution Videos

W1: Intro To HTML
  • class background survey
  • student photo submission
  • markup & semantics, seo, and accessibility
  • headings
  • paragraphs
  • links: within site, outside site, within page
  • lists: ul, ol
  • phrase elements: strong, b, em, i
  • br
  • images
  • naming conventions
  • paths
  • html validation

Class Exercise

  • About You Site

For our first in-class exercise, we will make a basic three-page blog (on any topic) and explore how easy it is to write HTML.

Resources

Homework

W2: Semantics, Efficiency, Web Graphics
  • Paths Review
  • Efficient Selection Techniques
  • Wrap with Abbreviation
  • Custom Shortcuts
  • HTML Sectioning Tags: Header, Footer, Div, Nav, Article, Section
  • Web Graphic File Formats
  • Creating Web Graphics

Class Exercise: Paths Review

In groups of two, complete the following exercise, which is entirely based on paths. In the exercise you will see a lot of code that we have not covered yet. Your focus, however, needs to be only on making working file paths.

Once you have completed the exercise, we will review it in class.

Class Code-Along Exercise

This exercise will unfold over two weeks.

This week, we will focus on the markup. This is a big article, so we want to devise ways of marking it up without completely losing our minds. As well, we will examine ways to help search engines and screen reading software understand our content better.

Next week, we will use the same files to learn about controlling the appearance of the page with CSS.

So don’t lose them!

Class Files

Resources

Resources: Short Loom Videos

Homework

W3: Intro to Cascading Style Sheets (CSS)
  • Separation of Content & Presentation via CSS
  • The CSS Box Model: margin, padding, border
  • CSS Typography: family, size, weight, line-height
  • CSS Units of Measure: px, percent, rem, etc
  • CSS Color Models (hex, rgb, name)
  • Display Block, Inline, Inline-Block
  • CSS Validation
  • Responsive Images

Class Exercise

Here, we will again use the file marked up last week, as a base for our introduction to Cascading Style Sheets (CSS)

Fela Kuti Markup Exercise Videos

A series of Loom videos that explains everything we did in the Fela Kuti markup exercise and possibly a couple more things as well.

There are ten of these videos, but they’re generally short. 

You can access them here.

Watch them in the order implied by the numbers in their titles.  Loom doesn’t sort the videos except by time of recording, so I name them with numbers to show the intended sequence.

Additional Review Videos (Optional)

If you wish to review further the topics covered in class this week, the following videos will cover that content and more.

Homework Exercise:

Gibson Gallery (2024 Revision) Code-Along Video Series

W4: Mobile First & Responsive Design
  • responsive images
  • media queries
  • display property applications
  • introduction to display: grid
  • html sectioning tags (Nav, Article, Main, Section)

Class Exercise

Loom Videos: Fender Vs Gibson (Introduction to Grid)

Homework Exercise: 

For this week’s homework, please redo the Fender Vs Gibson exercise that we did in class this week.

If you wish, you may use the Loom video series in this week’s part of the course to go through the steps and make the complete layout.

For a bigger challenge, try making the layout without first consulting the videos.

The link to the files (and the videos) is in the class details for this week.

W5: CSS Grid 1
  • Code Troubleshooting Techniques
  • More Media Queries & Mobile First
  • The HSL Color Model
  • Google Fonts

Class Exercises

Loom Videos

The troubleshooting techniques link Loom videos are short, but they show you a number of troubleshooting techniques such as HTML & CSS validation and using the browser inspector, so they are worth reviewing.

The jazzicons css layout video series goes a complex layout. As such, it covers a lot of css grid, as well as efficient html markup techniques.

Resources

Homework

W6: CSS Grid 2
  • Icon Fonts & Accessibly Hiding Text
  • More Grid
  • Additional Grid Properties for Alignment & Justification

Class Activity

Loom Videos

If you’re unsure about the differences between tags like div, main, article, nav, header, footer, and aside, the video on HTML Sectioning Tags addresses that topic (10 minutes).

The optional video series on Emmet Basics illustrates ways to use simple equations to write code quickly.

Homework

W7: CSS Positioning & Advanced Selectors
  • Relative Positioning
  • Absolute Positioning
  • Advanced Selectors (time permitting)

Class Content

  • Review of Cooking With Ken exercise
  • Positioning Demo: Get 2 Emmet equations from Loom Video 1 below.
  • Fela Kuti Advanced Selectors Exercise

Loom Videos

  • All About CSS Positioning
    These videos replicate the demo we will do in class, presenting the different kinds of CSS Positioning. In the first and the last videos of the above series, there are Emmet equations underneath that will give you the initial HTML starter content you need. 

Class Work / Homework

Do not start the World Beats exercise. We will cover CSS positioning next week, which is a significant part of that exercise.

W8: CSS Positioning 2
  • Relative Positioning in CSS
  • Absolute Positioning in CSS
  • The Basics of Emmet for Fast Coding

Class Activities

An Introduction to CSS Positioning: Link to Demo File

An Introduction to Emmet: Emmet shortcuts allow us to great big chunks of HTML with simple equations: these equations leverage what you already know about HTML structure and CSS Selectors.

Optional Exercises: Emmet Practice

If you want to practice your Emmet skills, these exercises give you some emmet cardio.

Resources

Homework

W9: Transitions & JavaScript

This week’s exercise is another “code along” series. It is in the Homework section, like always.

I have also included optional exercises this week and last week for those that are interested (and, of course, have the time).

Class Exercise

Resources

Optional Exercise

Homework

W10: Flexbox
  • Flex Direction
  • Flex Wrap
  • Justify-Content
  • Align-Items
  • Order
  • Flex-Grow
  • Flex-Shrink
  • Flex-Basis
  • Flex Shorthand Property

Class Activities

Resources

Homework

W11: Tables & Forms
  • HTML Tables
  • CSS Table Properties
  • Responsive Tables
  • Background Images 1: images
  • Background Images 2: gradients
  • Background Properties
  • Object-Fit
  • Basic HTML Forms

Class Files

Resources

W12: Work on Final Project

This is a week for you to work on your project. I will be in class for any consultation or troubleshooting.

Final Project

For the final project, which is worth 30% of the final grade in this course, you will design and code a five-page magazine mockup. You will the last week of class time to work on the project (and probably half of the second-to-last class, too).

Details are available here.

Of course, if you would like to pitch a different project for your assignment, I am happy to hear your proposal.

The project itself is due on by the end of the Monday after the last class.