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)
- laptop or desktop
- Will you need to access more than one system?
- Which is your preferred 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.
- Install the following browsers:
- Firefox and Firefox Developer
- Chrome
- Install VS Code (if needed)
- Create GitHub Account
- Create a free GH account (think about what your username/handle will be)
- Watch/Star the program repository (repo)
- 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
: headingsp
: paragraphsa
: anchorstrong
,em
: bold and italicizeul
and/orol
: unordered and ordered lists
Summary
- any trophies?
- prep for tomorrow
- Find some favourite Google Fonts for your text
- applause