diff --git a/README.md b/README.md index cb4f4e2..5cd3158 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ The first day provides an introduction to the fundamentals of the web: HTML, CSS ## Getting set up -### Required software +### 1. Required software Before starting, make sure your computer has the following installed: @@ -20,55 +20,49 @@ Before starting, make sure your computer has the following installed: - If using a Mac, also follow [these steps](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line) to install the `code` terminal command. - React Developer Tools for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) or [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) -### Installing and running the project +### 2. Installing and opening the project -#### 1. Find a good terminal program--we're going to use it a LOT! +- Open VS Code and then press `ctrl + ~` to open the built in terminal +- Use the `cd` (change directory) command to find an appropriate place for your code +- Type `git clone https://github.com/Microsoft/frontend-bootcamp.git` into the terminal, this will pull down a copy of the workshop code +- Type `cd bootcamp` to change your current directory to the bootcamp folder +- Type `npm install` to install of the project dependencies +- Type `code ./` to open the bootcamp code in VS Code +> If on a Mac, be sure you've followed [these steps](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line) first to make the `code` command available. -- On a PC, you can do this with `cmd.exe` (or some terminal programs such as [cmder](https://cmder.net/)) +### 3. Run the "inner loop" build -- On a Mac, bring up a Terminal (inside `/Applications/Utilities` folder). +Now that we have VS Code open with the bootcamp code, open the terminal again `ctrl + ~` and your project should look like this -- For those who really want something fancy looking: [hyper](https://hyper.is/) - -#### 2. Clone repo and npm install - -First, `cd` to a good place to put your copy of the Git repo. - -- Windows: run `cd %USERPROFILE%` (if using `cmd.exe`) or `cd ~` (if using Bash) -- Mac: Terminal automatically opens to your user directory (`/Users/you`) - -Then run the following to make a local copy of the repo and get it ready to run: - -``` -git clone https://github.com/Microsoft/frontend-bootcamp.git -cd frontend-bootcamp -npm install -``` - -If you have VS Code installed, type the following command to open a VS Code window where you can browse and open all the files in the project. (If on a Mac, be sure you've followed [these steps](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line) first to make the `code` command available.) - -``` -code . -``` - -#### 3. Run the "inner loop" build - -For steps 1-3 on Day 1: + +To run the dev "inner loop" for the first 3 lessons type: ``` npm run static ``` -For everything else: +When we get to lesson 4, and React we will stop the static inner loop and start: +1. press `ctrl + c` to stop the static inner loop ``` -npm start +npm run start ``` +Both of these above commands will load the following site: + + + ## Course material ### Day one +Day one is going to cover the basics of HTML, CSS and JavaScript, as well as an introduction to React and Typescript. + +The format of this day is the following: + +1. I will walk through some demo code to teach some core concepts about the topic. Don't worry about writing code at this point. Just follow along via the readme's listed below. +2. In the excercise portion return to VS Code and open the 'demo' folder for the given exercise. + 1. [Introduction to HTML, CSS and JavaScript](step1-01) - [HTML Demo](step1-01/html-demo) - [CSS Demo](step1-01/css-demo)