Day 1: Introductions, Setup and Long-form Text

Prep

Intros and get-to-know-yous

  • 2 minute intro
    • How do you stay creative?
    • What’s your coding experience?
    • Goals for the program?
    • Career aspirations?
    • Project aspirations?
  • Poll: system demographics
    • Which is your preferred system?
      • laptop or desktop
        • OS?
      • SAIT workstations (LOL)
    • Will you need to access more than one system?

Housekeeping

  • Instructor contact information
  • Assignments
    • 50% HTML/CSS/JS
    • 50% Node/Express

Expectations

  • attendance
  • self-learning
  • teamwork
  • assignments and grading
  • feedback

Daily Schedule

  • 8am
    • Lecture/Live-code
    • Activities with breaks
    • Optional: 2nd Lecture/Live-code
  • 11am
    • Midday huddle
  • 11:30am
    • Lunch
  • 12:30pm
    • Lecture/Live-code
  • 1:30pm
    • Activities with break
  • 2:30pm

Course Website Overview

  • Textbook
  • Tools
  • Resources
  • Cheatsheets?

Activity: Tool-time (Environment Setup)

You will work on this activity individually. See the Tools page for details on each of these packages.

  1. Install the following browsers:
    • Firefox and Firefox Developer
    • Chrome
  2. Install VS Code (if needed)
  3. Create GitHub Account
    • Create a free GH account (think about what your username/handle will be)
    • Watch/Star the program repository (repo)
  4. Create a Codepen account

Lecture/Live-code: The Triad

A brief history of the relationship between the three pillars of front-end web development:

  • HTML: Content
  • CSS: Presentation
  • JS: Behaviour

Video: Why is CSS So Weird?

Activity: Explore the textbook, tools and resources

  • What sections interest you most?

Mid-day Huddle

  • who needs help?
  • any pivots?

[lunch]

Lecture 2: Coding a Long-form Bog Post

Tony codes a simple blog post.

Find an article on Wikipedia that interests you. You will be coding this content into HTML in the next activity.

Video: Introduction to Pair Programming

[break]

Activity 2: Your first HTML blog post

You will be working in pairs. Take either/both articles you have chosen and code them in HTML (using Codepen). Start with the following HTML tags:

  • h1-h3: headings
  • p: paragraphs
  • a: anchor
  • strong, em: bold and italicize
  • ul and/or ol: unordered and ordered lists

See: HTML text fundamentals

Summary