Getting Started

The following are the instructions for getting your computer set up to complete the lessons in this course.

If you’re new to coding, you can jump straight to the lessons. Each lesson contains two tutorials culminating in a Codepen (you’ll first need to create an account) containing sample code. The exercises at the end of each lesson are best completed using one of the code editors listed below — VS Code is more beginner friendly that the others listed.

*Note: Codepen is not a platform to publish your tutorial and exercises, but more like a sandbox to experiment with new concepts and test work.

Set-up the following accounts and software:

• Google Chrome
• Install VS Code, Sublime Text or Atom
• Codepen
• GitHub

Browser

This course uses Google Chrome as the preferred browser for its robust DevTools. If you don’t already have it, please follow the installation instructions for:

• Google Chrome

Text Editor

1. Go here to download Visual Studio Code.
2. Open the downloaded zip file.
3. Drag the unzipped Visual Studio Code app to your Applications folder.

Visual Studio Code Tips and Tricks

Add Packages

Visual Studio Code’s core functionality can be extended using thousands of third-party packages that can help reduce your errors, and increase your productivity. Install VS Code Extensions in the VSC extensions sidebar.

1. Click on the Extensions icon and search for indent-rainbow extension.
2. When you have found the package, click on the green install button.
3. You may be prompted to reload your Visual Studio Code. That’s perfectly fine!
4. After reloading, you will now have that extension installed and activated!
5. Now, try searching for and adding the open in browser extension as well.

Open Visual Studio Code from Terminal

1. With Visual Studio Code open, type the following shortcut to pull up the command pallette:
   command + shift + P
2. Enter the command install 'code' command in PATH and press enter.
3. Now you will be able to type code in the Terminal to open Visual Studio Code.

Configure Git to Use Visual Studio Code

When you forget to enter a commit message in the Terminal, git opens a text editor and reminds you to add a commit message.

Run the following command in the Terminal to configure git to open Code instead of the default text editor:

$ git config --global core.editor "code --wait"

Version Control

If you don’t already have it, sign up for an account on github.com. This course uses it to track code changes and collaborate with others on projects.

Confirm Install

1. To check whether git is installed on your system, run the Terminal command which git. The output should be a directory path like /usr/bin/git. This is where git is installed on your machine. If you don't see any output, git is not installed on your computer.
2. If you do not have git installed, do the following XXX

Configure Git

Configuring your git settings will help GitHub track your contributions and to make it easier and smoother to commit changes.

$ git config --global user.name "YOUR_GITHUB_USERNAME"
$ git config --global user.email "YOUR_GITHUB_EMAIL_ADDRESS"
$ git config --global credential.helper cache

File Management

Working with UNIX commands and file paths:

Open Terminal

— Last login date
— Your username
— Name of your computer
— Current directory, typically its ~
— Prompt for entering commands

Basic Terminal Commands

1. ls [*DIRECTORY*] — Lists the contents of a directory. Common example:ls -a
2. pwd — Shows the path to the current directory.
3. mkdir *DIRECTORY* — Makes a new directory.
4. cd [*DIRECTORY*] — Change to a different directory.
5. touch *FILE* — Create an empty file.
6. mv *SOURCE* *DESTINATION* — Move a file/directory somewhere else. You can also use this command to rename a file/directory.
7. cp *SOURCE* *DESTINATION* — Copy a file from one destination to another.
8. rmdir *DIRECTORY* — Remove an empty directory.
9. open [-a *PATHTOAPPLICATION*] file — Open a file.

Directory Structure

The following is a suggested structure for your course folder.

• Type the command pwd into the Terminal and hit enter. After entering the command, you should see something like:
  /Users/username directly above a new prompt.
• Create a new project folder that will hold all the work created in this course. Type the command mkdir /design-practices and hit enter. If you re-type ls , the “list” command, you should notice a new folder called “design-practices”
• Navigate into this new directory: cd /design-practices. Type the command to print your working directory, pwd. You should now be inside the folder called /design-practices
• Create the subfolders for the course: mkdir sandbox exercises projects . Check that you created all three separate folders, ls .

Creating and Opening Files

• Double-check you’re in the folder /Users/yourusername/design-practices
• Create a new file using the following command: touch index.html
• Open the file in the text editor: code index.html

Create Local Site

Did you know that you can create web pages without being connected to the internet? Webpages are simply files, often with the extension html. To preview them, just drag the file to your web browser. You’ll notice the top URL starts with file://... This is the indication of a local file. Local files are running on your computer, whereas when the top URL bar starts with http://... , it means it’s running on the internet and can be seen by anyone.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Programming for Design Practices</title>
  </head>
  <body>
    <h1>Hello World.</h1>
  </body>
</html>

1. Add content to your index.html file
   — Open up your index.html file in the text editor
   — Copy and paste the above code into your index.html
   — Save it
2. Test that the page works locally. To do this, drag your index.html into your Chrome web browser. You should get something that looks like the following screenshot.

Create Remote Site

To set up your site on the web, see How to Git & Github?