Critical Path - Web Design & Development

Week # 1

Tues. Sept. 2

COURSE INTRODUCTION / ORIENTATION

Review BlackBoard
Course Resourses
Critical Path
Intro to coding
Download a Code Editor

N / A

Week # 2

Tues. Sept. 9

MODULE 1

WHAT IS HTML ?

Code Editors
Web Page Structure
Block level elements / Inline elements
HTML Elements and Attributes
Hyperlinks relative links, absolute links

In Class Exercise 1.1
- HTML basics

Construct a simple HTML page using basic HTML elements <h1>, <h2>, <h3>, <p> and <a> elements
3 %

Exercise # 1.1 - DUE SAME DAY

Week # 3

Tues. Sept. 16

MODULE 1

HTML COMPONENTS

Title, Meta, links
Special Characters
Ordered and Unordered List
Tables

Lab / Exercise 1.2
- "fixme.html"

Complete the exercise correcting all the errors in the file named "fixme.html"
10 %

Week # 4

Tues. Sept. 23

MODULE 1

Semantic Mark-up

The "style" attribute and "style" element
Inline, Internal, & External Styling
The "link" element

Tutorial / Demonstration

End of Module 1 - Quiz 1 -- 5 %

Exercise # 1.2 - DUE before the start of class

Week # 5

Tues. Sept. 30

MODULE 2

CASCADING STYLE SHEETS (CSS)

Selectors, Properties and Values
Classes & IDs
Specificity & the cascade

Tutorial / Demonstration
Project 1 — Biography Page
— show an example of inline, internal, and external styling
— show an example of absolut and relative hyperlink
— show an example of the <img> element and "alt" attribute
— show an example of semantic structure

START Project 1
— Biography Page

Week # 6

Tues. Oct. 7

MODULE 2

THE BOX MODEL

CSS Specificity Review
Content box, Borders, Padding & margin (Box Model)

Tutorial / Demonstration
Continue with Project 1 — Biography Page

In Class Exercise 2.1

Show examples of CSS Specificity and the Box Model
3 %

Exercise # 2.1 - DUE SAME DAY

Week # 7

Tues. Oct. 14

MODULE 2

CSS POSITIONING

Relative, Fixed, & Absolute positioning
Floats
z-index
Fluid & Constant widths

Tutorial / Demonstration
Continue with Project 1 — Biography Page

End of Module 2 - Quiz 2 -- 5 %

Project 1 — DUE
20 %

Week # 9

Tues. Oct. 28

MIDTERM GRADES DUE THIS WEEK

MODULE 3

FILE FORMATS

GIF, JPEG & PNG formats
Image resolution

Tutorial / Demonstration -- Project 1 reboot

Reconfigure bio page from project 1 as an 'About Me' page for Project 2

START Project 2
— Four Page web Site

Week # 10

Tues. Nov. 4

MODULE 3

COLOUR MODELS

RGB versus CMYK
RGBa
HexaDecimal Color

In-class Exercise 3.1
— Project 1 reboot (part 2)

Create a "Contact Us" page for Project 2

— Link the additional page in the nav section
3 %

Exercise # 3.1 - DUE SAME DAY

Week # 11

Tues. Nov. 11

MODULE 3

CSS EFFECTS

Forms
Transitions and transformations
CSS blend modes

Tutorial / Demonstration

Create the remaining 2 pages for Project 2

— creat a home page
— create a work samples page
— link the additional pages in the navigation section

End of Module 3 - Quiz 3 -- 5 %

Week # 12

Tues. Nov. 18

MODULE 4

RESPONSIVE WEB DESIGN (RWD)

The Viewport
Breakpoints
Media Queries

Tutorial / Demonstration
Project 3 — Music Website

Project 2 — DUE
15 %

START Project 3
— Music Website

Week # 13

Tues. Nov. 25

MODULE 4

FLEXBOX

Flex container properties
Flex item properties

Tutorial / Demonstration
Continue with Project 3 — Music Website

In Class Exercise 4.1

Show examples of CSS FlexBox properties and values
3 %

Exercise # 4.1 - DUE BY THE END OF CLASS

Week # 14

Tues. Dec. 2

MODULE 4

HTML MEDIA ELEMENTS

audio element
video element
iframe element

Tutorial / Demonstration

Continue with Project 3 — Music Website

Week # 15

Tues. Dec. 9

SUBMIT FINAL PROJECT

Open Lab Time

End of Module 4 - Quiz 4 -- 5 %

Project 3 — DUE
23 %