From 55fac891d2dd9e477e6912e839a944d901e6f661 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Fri, 1 Mar 2019 10:40:28 -0800 Subject: [PATCH 1/5] Update README.md --- README.md | 60 +++++++++++++++++++++++++------------------------------ 1 file changed, 27 insertions(+), 33 deletions(-) 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) From f50e86ee3611d60510e307993d3a4d35c2e220f5 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Fri, 1 Mar 2019 11:23:27 -0800 Subject: [PATCH 2/5] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5cd3158..d4671b0 100644 --- a/README.md +++ b/README.md @@ -61,7 +61,7 @@ Day one is going to cover the basics of HTML, CSS and JavaScript, as well as an 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. +2. In the excercise portion return to VS Code and open the 'exercise' folder for the given exercise. The demo folder will include a README file with directions and a link to the demo page. 1. [Introduction to HTML, CSS and JavaScript](step1-01) - [HTML Demo](step1-01/html-demo) From 6a6323f6c6e9401383b3a327a24437935b972cfb Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Fri, 1 Mar 2019 11:26:51 -0800 Subject: [PATCH 3/5] Update README.md --- README.md | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index d4671b0..ce0442c 100644 --- a/README.md +++ b/README.md @@ -52,7 +52,7 @@ Both of these above commands will load the following site: -## Course material +## What to Expect ### Day one @@ -63,27 +63,16 @@ 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 'exercise' folder for the given exercise. The demo folder will include a README file with directions and a link to the demo page. +### Course Material + 1. [Introduction to HTML, CSS and JavaScript](step1-01) - - [HTML Demo](step1-01/html-demo) - - [CSS Demo](step1-01/css-demo) - - [JavaScript Demo](step1-01/js-demo) 2. [Writing a Todo App: HTML and CSS](step1-02) - - [Demo](step1-02/demo) - - [Exercise](step1-02/exercise) 3. [Writing a Todo App: JavaScript](step1-03) - - [Demo](step1-03/demo) - - [Exercise](step1-03/exercise) 4. [React Introduction](step1-04) - - [Demo](step1-04/demo) 5. [Building a Static Page](step1-05) - - [Demo](step1-05/demo) - - [Exercise](step1-05/exercise) 6. [State Driven UI](step1-06) - - [Demo](step1-06/demo) - - [Exercise](step1-06/exercise) 7. [Types & UI Driven State](step1-07) - - [Demo](step1-07/demo) - - [Exercise](step1-07/exercise) + ### Day two From 39cdb584f4aca6c440ed086d0b85079a7df4a9f4 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Fri, 1 Mar 2019 11:27:48 -0800 Subject: [PATCH 4/5] Update README.md --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index ce0442c..04a50e0 100644 --- a/README.md +++ b/README.md @@ -58,12 +58,14 @@ Both of these above commands will load the following site: Day one is going to cover the basics of HTML, CSS and JavaScript, as well as an introduction to React and Typescript. +#### How we'll work + 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 'exercise' folder for the given exercise. The demo folder will include a README file with directions and a link to the demo page. -### Course Material +#### Course Material 1. [Introduction to HTML, CSS and JavaScript](step1-01) 2. [Writing a Todo App: HTML and CSS](step1-02) From 197a83140ef1a0b6cd9ccc1b29e70b0b04afb1aa Mon Sep 17 00:00:00 2001 From: Ken Date: Fri, 1 Mar 2019 12:02:30 -0800 Subject: [PATCH 5/5] fix the tsx -> js markdown --- step2-03/demo/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/step2-03/demo/README.md b/step2-03/demo/README.md index 87c217f..5250ed7 100644 --- a/step2-03/demo/README.md +++ b/step2-03/demo/README.md @@ -21,7 +21,7 @@ There are some predefined themes within Fabric already, like Fluent (which will The following code (simplified from `demo/src/components/TodoApp.tsx`) shows an example of applying the Fluent theme to our todo app using `Customizer`. -```tsx +```js import { Customizer } from 'office-ui-fabric-react'; import { FluentCustomizations } from '@uifabric/fluent-theme'; @@ -87,7 +87,7 @@ The `styles` prop can take either an object, or a function which returns a style The following code (simplified from `demo/src/components/TodoHeader.tsx`) demonstrates using `styles` to customize individual components. The TextField uses a style function and the PrimaryButton uses a style object. -```ts +```js function render() { const buttonStyles = { root: { backgroundColor: 'maroon' }, @@ -128,7 +128,7 @@ Benefits of `mergeStyles` include: The following is a basic example using mergeStyles. ([This CodePen](https://codepen.io/dzearing/pen/jGdgrE?editors=1011) illustrates in more detail what `mergeStyles` does and includes some advanced examples.) -```tsx +```js // can also import from office-ui-fabric-react in Fabric-based apps import { mergeStyles } from '@uifabric/merge-styles';