SAIT WBDV

Web Developer Fast Track - Winter 2021

Orientation and Software Setup

Instructor Information

Methods of contacting Tony Grimes, in order of general preference:

Software Setup

You will be responsible for maintaining your development environment for each course in this program. The specific requirements will change from course to course but the following software will be required for the entire program.

Video

We will be running most meetings in Zoom for this program.

All participants will need to be signed in to take part in the daily streams.

Messaging

Slack is the preferred messaging tool for this program and is a popular tool in industry. You should see an invite to the SAIT WBDV Slack team sometime during orientation day.

  • Install Slack (optional; you can use it from the browser if you’d like).
  • Send an email to Tony (tony.grimes@sait.ca) from the email address you’d like your Slack invite sent to. Keep in mind that your SAIT email will eventually be retired after graduation.
  • Tutorials: Slack 101

Note: The past two cohorts of this program also have access to this Slack team but each cohort has a private channel. Most of our communication will be in this channel but you’re free to meet and interact with past students of this program. You may also use MS Teams if you’d like to avoid outside students.

Tony also runs a public Discord server where you can find help from local developers:

Development Browser

Regardless of which browser you prefer in your off-time, this course requires Firefox Developer for its superior (for the moment) CSS Developer Tools. Chrome can be optionally used for its Javascript Dev Tools in CPNT 262.

The Mozilla Developer Network (the makers of Firefox) recently launched an entire Youtube channel to teach developers how to use Firefox Developer Tools (your best friend).

Codepen

The beginning of CPNT 260 (HTML/CSS) will be coded in the browser before we move to VS Code (see below). Codepen is a “sandbox” environment that will serve as part of your portfolio when you dive into the real world.

Code Editor

Most of your time in this program will be spent in your code editor. If you haven’t installed one yet, VS Code is the current industry favourite:

If you’ve been using one you like, stick with it, just as long as it doesn’t get in the way of your learning.

Git

Git will be a large component of this program for managing, sharing and deploying our source code.

For the adventurous, see Git’s Getting Started page for nerdier installation options.

GitHub

GitHub is a private corporation (now owned by Microsoft) that has built a world-leading community around Git. All sample code and projects will be hosted on GH and the program website is hosted using GH Pages.

  1. Create a GitHub account if you haven’t already. Don’t forget: your GH username will be seen by potential employers.
  2. Watch and/or Star the program repository.
  3. Sign up for GitHub Classroom to get your Student Developer Pack (handy free stuff)!

Prep for Tomorrow

  1. Tool time
    • Read: Markdown Cheatsheet
      • Markdown will be used to write your GitHub README files (the file nerds use to document their projects). Github converts your markdown into HTML.
  2. Mental Models
    • Watch: UX Design Basics - Mental Models by Jamal Nichols
    • Find an example of good/bad/vital product design (a handy tool, piece of equipment, etc) in your immediate(ish) area (home, office, vehicle, etc). You will be discussing your find in a group of 3 or 4 tomorrow.
  3. User Experience Design
    • Skim: UI Design Patterns
    • Skim: Chapters 1, 2 and 3 of Don’t Make Me Think by Steve Krug (course textbook)
  4. Accessibility