SAIT WBDV

Web Developer Fast Track - Winter 2021

Files, Directories and the Command Line

Housekeeping

  1. Git Poll
  2. “Remember me on this device”
  3. Aside: Password management
    • Tony recommends using a password manager. He uses LastPass.

Homework

  1. Review
  2. Files and Directories
  3. Command Line
  4. VS Code

CPNT 201 is all about the tools that we use to support our (soon to be) coding addiction. It’s a course that is spread out over the program in four parts:

  1. Starting Today: Git and Github (mostly tomorrow)
  2. Feb 3: Raster Image software (i.e. Photoshop, in the before times)
  3. Feb 8: Vector Image software (i.e. Illustrator, in the before times)
  4. Mar 2: Build Tools (Sass, minification)

Today we’ll be covering the core skills we’ll need to use Git and GH effectively: File management and core command line skills.

Pre-requisites

  • Git installed
  • GitHub account created
  • VS Code installed

1. Optional: Download Sample SAIT Directory structure

  1. Find this Remote Repo on GH Pages: https://github.com/sait-wbdv/sait-sample
  2. Download a ZIP of this directory under the green Code menu.
  3. Extract the archive and rename/move the directory to a convenient location on your machine.
  4. There are README files in each sub directory to show you how to use them.

Relevant Cheatsheets

2. VS Code initial setup

  1. Set your indent preferences
    1. Open VS Code Preferences
    2. Set your Tab Size to 2
  2. Install the Live Server Extensions
    1. Navigate to the Extensions tab on the left side bar.
    2. Search for “Live Server”.
    3. Install the Extension named “Live Server” (currently at version 5.6.1).
    4. Note: in order for this extension to work, you need to open a directory, not an individual file.

3. Terminal demo

Relevant Cheatsheets

Activity: Follow the white rabbit

If you’ve downloaded the default directory above:

  1. Open the following file in VS Code:

     /in-class/W1R/white-rabbit.md

  2. Follow the instructions in this file.

If not:

  1. Open your unix terminal;
  2. Using pwd, ls and cd navigate to a directory you often use on your file system (i.e. your Downloads folder).
  3. List the contents of this directory.

4. Cloning your first repo(s)

If you’ve downloaded the default directory above:

  1. Open the following file in VS Code:

     /_materials/README.md
  2. Follow the instructions for cloning the read-only repos for this program.

  3. In sample-code, open a directory that contains an index.html file such as:

     /_materials/sample-code/frontend/calculator/finished
  4. View this file in your browser using the Live Server extension (there should be a “Go Live” button in the footer of VS Code).
  5. Try some other directories with an index.html file!

Lab Time

Using your new assignments directory, work on DSGN 270 Assignment 1 and store your markdown file in /assignments/dsgn270-a1.

Clean-up Time!