teaching-journal

Labs

Independent activities/workshops/whatevers that are stored in Gist.

• Heavy update needed for many Gists

Navigation

• Home
• Breakdowns
• Gists

---

Gists

General

• Files, directories and naming conventions
• Command Line Basics
• Openly Licensed Digital Assets
• A project/algorithm/feature iteration method
• Pair programming process with Fiona and Semira

HTML

• Refactoring Activity: Embedded JS/CSS to external files

CSS

• Header: Horizontal banner with logo, site title and sub-title
• Header: Horizontal banner with logo and site title
• Navigation: Horizontal menu - full width
• Navigation: Horizontal menu
• Flexbox/Grid Starter
• Flexbox: Content-Sidebar pattern
• Flexbox: Grid-ish pattern
• Flexbox: Even columns
• Flexbox: Default item settings and shortcuts
• Grid: Traditional side bar layout
• Grid: Traditional layout with grid areas

Javascript

• Basics
  • Javascript: Names, values and variables
• Strings
  • JS Reference: String Methods
• Arrays:
  • Javascript Arrays: Getting started
  • JS Activity: Array.forEach() - Create a comma-separated list of nouns
• Loops:
  • JS Example: Print 1-to-100 with a for Loop
  • JS Example: Basic loop with Array.prototype.forEach()
• Objects
  • Javascript Objects: Getting started
  • JS Activity: Converting Javascript objects into json files
• Functions:
  • Javascript: Callback functions
  • JS Activity: Define and invoke a function with parameters
  • JS Activity: Defining and invoking functions
  • Series:
    • Defining functions
    • Invoking a function
    • Function arguments and parameters
    • Function return values
• Async
  • fetch GET: Retrieving data asynchronously
  • REST APIs: Practice endpoints
• Activities
  • JS Activity: Finding an object in an array
    • Spoilers
  • JS Activity: Testing for an array item
    • Spoilers
  • JS Activity: Tip Calculator
    • Spoilers
• Browser Activities
  • JS Activity: Text area character counter
  • JS Activity: Adding Machine
    • Spoilers
  • JS Activity: Refactor Adding Machine to create Simple Calculator
  • JS Activity: Tip Calculator form inputs
  • JS Activity: Tip Calculator with drop down menu
  • JS Activity: Eat and Drink click handlers
    • Spoilers
  • JS Activity: Dynamic Lorem Picsum gallery using an array of objects
    • Spoilers
• Javascript Scope Exercises

Node

• Node: Custom (local) Node modules
• Node: Local modules
• Node: Create a simple http server
• Node Activity: Tip Calculator from the command line with process.argv
• Activity: Greeter from the command line with process.argv
• Node: Listing builtin modules
• Node: Reading files with fs
• Node: Manipulating file paths the with path
• Node: Default objects and properties
• Node Activity: Adding command line arguments with process.argv

npm

• npm Package Manager - Introduction
• npm: Evaluating the status of an npm project
• npm Activity: Install DayJS using npm
• npm Terminology

Projects

• Dark Mode Toggles
  • Dark Mode controlled by System Dark Mode preference
  • Dark Mode Toggle with CSS Variables
  • Ultimate Dark Mode Toggle
• Pagination: Accessing URL Search Parameters

APIs

• REST APIs: Getting Started

Git

• Git Activity: Clone Happy
• Project: Publish a webpage with Git and GitHub Pages
• Git: Configure a Global .gitignore file
• Git: Troubleshooting conflict errors
• Git Activity: Commit Catch
• Activity: Git - create a merge conflict

Vectors and SVG

• SVG - Getting started
• SVG - Three ways to insert an SVG
• SVG: Clipping problems with viewBox
• Vector Editors: Figma Tool Overview
• Activity: Add a colour scheme to an inline SVG
• Activity: SVG Anatomy
• Activity: Inserting SVGs into a web page

Agile

• Product Backlog Cheat Sheet
• Sprint Planning Cheat Sheet
• Daily Standup Meeting Cheat Sheet

Test Driven Development

• Sample Postman Health Check Collection