From 886738d12ade49f3a231c633fa58be237d9c0251 Mon Sep 17 00:00:00 2001 From: Elizabeth Craig Date: Tue, 5 Mar 2019 01:18:26 -0800 Subject: [PATCH 1/6] Update table of contents, what to expect, and setup instructions --- README.md | 80 +++++++++++++++++++++++++------------------------------ 1 file changed, 36 insertions(+), 44 deletions(-) diff --git a/README.md b/README.md index 002a9cb..6c4b6c3 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ In this two-day workshop you'll learn the basics of frontend development while building a working web app. -The first day provides an introduction to the fundamentals of the web: HTML, CSS and JavaScript. This is targeted at new and experienced developers alike. On the second day we'll dive into more advanced topics like TypeScript, testing, and state management. While the examples should be accessible to anyone, you'll get the most out of it if you have some prior experience with programming and web technologies. +The first day provides an introduction to the fundamentals of the web: HTML, CSS and JavaScript. This is targeted at new and experienced developers alike. On the second day we'll dive into more advanced topics like TypeScript, state management, and testing. While the examples should be accessible to anyone, you'll get the most out of it if you have some prior experience with programming and web technologies. ## Getting set up @@ -23,88 +23,80 @@ Before starting, make sure your computer has up-to-date versions of the followin ### 2. Installing and opening the project -- 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 +- Open VS Code and then press ```ctrl + ` ``` (backtick, in top left corner of keyboard) 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 to pull down a copy of the workshop code - Type `cd frontend-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 +- Type `npm install` to install all of the project dependencies +- Type `code -r .` 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. ### 3. Run the "inner loop" build -Now that we have VS Code open with the bootcamp code, open the terminal again `ctrl + ~` and your project should look like this +At this point, your VS Code window should look something like this: -To run the dev "inner loop" for the first 3 lessons type: +To start the dev "inner loop" for the first three lessons, run: ``` npm run static ``` -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 - +When we get to lesson 4 and React, we'll stop the static inner loop (press `ctrl + C`) and instead run: ``` npm run start ``` -Both of these above commands will load the following site: +Both of these commands will load the site shown below. -## What to Expect +## What to expect + +For each lesson, the presenter will walk through some demo code to teach core concepts about the topic. Don't worry about writing code at this point. Just follow along via the readmes linked below. + +Most lessons also have an exercise portion. Exercise instructions are usually found in the readme for each step's "exercise" folder. ### Day one -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 - -1. [Introduction to HTML, CSS and JavaScript](step1-01) -2. [Writing a Todo App: HTML and CSS](step1-02) -3. [Writing a Todo App: JavaScript](step1-03) -4. [React Introduction](step1-04) -5. [Building a Static Page](step1-05) -6. [State Driven UI](step1-06) -7. [Types & UI Driven State](step1-07) +Day one covers the basics of HTML, CSS and JavaScript, as well as an introduction to React and Typescript. +1. [Introduction to HTML](step1-01) +2. [Introduction to CSS](step1-02) +3. [Introduction JavaScript](step1-03) +4. [Introduction to React](step1-04) +5. [Building a static page](step1-05) +6. [State-driven UI](step1-06) +7. [Types and UI-driven state](step1-07) ### Day two -The demos and exercises for today are combined. +1. [TypeScript basics](step2-01) +2. [UI Fabric component library](step2-02) +3. [Theming and styling](step2-03) +4. [React Context](step2-04) +5. [Redux: Store](step2-05) +6. [Redux: React binding](step2-06) -1. [Introduction to TypeScript](step2-01) -2. [UI Fabric Component Library](step2-02) -3. [Theming and Styling](step2-03) -4. [Testing with Jest](step2-04) -5. [Redux: Reducers](step2-05) -6. [Redux: Dispatching Actions and Examining State](step2-06) -7. [Redux: Stores and Dispatch](step2-07) -8. [Redux: Combining Reducers](step2-08) -9. [Redux: Thunk Middleware](step2-09) +### Bonus content -### Additional resources +* [Redux: Service calls](bonus-servicecalls) +* [Testing with Jest](bonus-jest) + +## Additional resources - [MDN Web Docs](https://developer.mozilla.org/en-US/) - [React Docs](https://reactjs.org/docs/getting-started.html) - [Thinking in React](https://reactjs.org/docs/thinking-in-react.html) -### Follow the authors! +## Follow the authors! If you are interested in JavaScript, TypeScript, React, Redux, or Design Systems, follow us on Twitter: - [@kenneth_chau](https://twitter.com/kenneth_chau) - [@micahgodbolt](https://twitter.com/micahgodbolt) -### Other projects from the UI Fabric team at Microsoft +## Other projects from the UI Fabric team at Microsoft - [UI Fabric](https://developer.microsoft.com/en-us/fabric) - [github repo](https://github.com/officedev/office-ui-fabric-react) - [Just](https://microsoft.github.io/just): The task library that just works - [github repo](https://github.com/Microsoft/just) From 8c99c833530fb788eb7e98901a03a5251f9ce897 Mon Sep 17 00:00:00 2001 From: Elizabeth Craig Date: Tue, 5 Mar 2019 02:20:22 -0800 Subject: [PATCH 2/6] Day 1: title formatting coherence, other edits --- README.md | 11 +++-------- step1-01/demo/README.md | 8 +++++--- step1-01/exercise/README.md | 4 +++- step1-02/{ => demo}/README.md | 8 ++++---- step1-02/exercise/README.md | 3 +++ step1-02/exercise/index.html | 14 ++++++------- step1-03/demo/README.md | 16 ++++++--------- step1-03/exercise/README.md | 12 ++---------- step1-03/exercise/index.html | 37 +++++++++++++++++++++++++---------- step1-04/demo/README.md | 24 +++++++++++------------ step1-04/final/README.md | 3 +++ step1-05/demo/README.md | 25 ++++++++++++++++------- step1-05/exercise/README.md | 16 +++++++++------ step1-06/demo/README.md | 18 ++++++++--------- step1-06/exercise/README.md | 4 ++-- step1-07/demo/README.md | 18 ++++++++--------- step1-07/exercise/README.md | 16 +++++++++------ 17 files changed, 133 insertions(+), 104 deletions(-) rename step1-02/{ => demo}/README.md (93%) create mode 100644 step1-02/exercise/README.md create mode 100644 step1-04/final/README.md diff --git a/README.md b/README.md index 6c4b6c3..5ce8126 100644 --- a/README.md +++ b/README.md @@ -37,17 +37,12 @@ At this point, your VS Code window should look something like this: -To start the dev "inner loop" for the first three lessons, run: +To start the dev "inner loop," run: ``` -npm run static +npm start ``` -When we get to lesson 4 and React, we'll stop the static inner loop (press `ctrl + C`) and instead run: -``` -npm run start -``` - -Both of these commands will load the site shown below. +This will load the site shown below. diff --git a/step1-01/demo/README.md b/step1-01/demo/README.md index a420290..f0299d0 100644 --- a/step1-01/demo/README.md +++ b/step1-01/demo/README.md @@ -1,4 +1,6 @@ -# How the Web Works +# Step 1.1 - Introduction to HTML (Demo) + +## How the web works A simple web page is rendered on the screen via the following steps. @@ -21,7 +23,7 @@ A simple web page is rendered on the screen via the following steps. ![MDN Page Load](https://user-images.githubusercontent.com/1434956/53033758-9da8d580-3426-11e9-9ab8-09f42ccab9a8.png) -# HTML Demo +## HTML demo HTML tags are the basis of all web applications. They give the page structure and define the content within. @@ -35,7 +37,7 @@ HTML tags can also be nested to create a tree that we call the [Document Object The [HTML demo page](https://microsoft.github.io/frontend-bootcamp/step1-01/demo) shows a large collection of HTML elements that you will come across during development. The full list of elements can be found on [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element). -## Sample Website +## Sample webpage ```html diff --git a/step1-01/exercise/README.md b/step1-01/exercise/README.md index c69176e..7a056d7 100644 --- a/step1-01/exercise/README.md +++ b/step1-01/exercise/README.md @@ -1 +1,3 @@ -Readme is in index.html +# Step 1.1 - Introduction to HTML (Exercise) + +See index.html from [npm start](http://localhost:8080/step1-01/exercise/) or the [live site](https://microsoft.github.io/frontend-bootcamp/step1-01/exercise/) for the exercise. \ No newline at end of file diff --git a/step1-02/README.md b/step1-02/demo/README.md similarity index 93% rename from step1-02/README.md rename to step1-02/demo/README.md index 9f3c218..01072e0 100644 --- a/step1-02/README.md +++ b/step1-02/demo/README.md @@ -1,6 +1,6 @@ -## CSS Demo +# Step 1.2 - Introduction to CSS (Demo) -### CSS Properties +## CSS properties Now that we've gone over adding HTML tags to the page, let's cover adding styles to those tags. We can do quite a lot with styles! We can change: @@ -15,7 +15,7 @@ Now that we've gone over adding HTML tags to the page, let's cover adding styles CSS styles are always written in `property: value` pairs (like `background: blue;`) and terminated with a semicolon. -### Applying CSS to an HTML file +## Applying CSS to an HTML file CSS can be applied to HTML tags in three different ways. @@ -25,7 +25,7 @@ CSS can be applied to HTML tags in three different ways. 3. Through an external CSS file - `` -### Targeting specific elements +## Targeting specific elements Inline styles are always applied directly to the element you place them on, but `