From 78f3587031b17cfe034f81d33c96d3bdba285b07 Mon Sep 17 00:00:00 2001 From: Elizabeth Craig Date: Tue, 26 Feb 2019 13:56:55 -0800 Subject: [PATCH] Step 1-01 updates --- README.md | 24 +++---- package-lock.json | 30 +++++++++ package.json | 11 +++- step1-01/README.md | 17 +++-- step1-01/css-demo/README.md | 36 +++++------ step1-01/css-demo/css-demo-final.css | 22 +++---- step1-01/html-demo/README.md | 95 ++++++++++++++-------------- step1-01/html-demo/html-demo.html | 26 ++++---- 8 files changed, 150 insertions(+), 111 deletions(-) diff --git a/README.md b/README.md index fe3e06d..3033612 100644 --- a/README.md +++ b/README.md @@ -4,9 +4,9 @@ ## Purpose of this workshop -This repo is the content for a two day workshop focused on introducing you to the fundamentals of web development. By the end of these two days you will have better understanding of how we write and deliver features on the web. You will also get some hands on experience using everything from HTML, CSS and JavaScript to React, Redux and UI Fabric as we build a working application together. +This repo is the content for a two-day workshop focused on introducing you to the fundamentals of web development. By the end of these two days you will have a better understanding of how we write and deliver features on the web. You will also get some hands-on experience using everything from HTML, CSS and JavaScript to React, Redux and UI Fabric as we build a working application together. -## Who is this workshop for +## Who this workshop is for This workshop starts as a very high level introduction to the core principles of the web: HTML, CSS and JavaScript. This section is targeted at new and experienced developers alike. The second day dives into more complex topics such as TypeScript and state management within an application. The examples should be accessible to anyone, but you will get more out of the day if you have some foundational experience in programing or web technologies. @@ -14,25 +14,25 @@ This workshop starts as a very high level introduction to the core principles of #### Computer Setup -- Current version of [Node/NPM](https://nodejs.org/en/) -- Install [Git](https://git-scm.com/downloads) -- [VSCode Editor](https://code.visualstudio.com) -- Up to date browser with dev tools (some demos will be shown using Chrome) +- [Node/NPM](https://nodejs.org/en/) (choose the **LTS** option) +- [Git](https://git-scm.com/downloads) +- [VS Code Editor](https://code.visualstudio.com) +- Up-to-date browser with dev tools (some demos will be shown using Chrome) -### Getting Set Up +### Demo/Exercise Setup -```bash +``` $ git clone https://github.com/Microsoft/frontend-bootcamp.git $ cd frontend-bootcamp $ npm install - // For Day 1, Steps 1-3 + # For Day 1, Steps 1-3 $ npm run static - // For the rest of the steps + # For the rest of the steps $ npm start ``` -## Table Of Contents +## Table of Contents ### Day One @@ -80,7 +80,7 @@ Demo and Exercises are combined ### Follow the Authors! -If you are interested in JavaScript, TypeScript, React, Redux, Design Systems, follow us on Twitter: +If you are interested in JavaScript, TypeScript, React, Redux, or Design Systems, follow us on Twitter: @kenneth_chau @micahgodbolt diff --git a/package-lock.json b/package-lock.json index 488718e..e10f63b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10284,6 +10284,36 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz", "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==" }, + "tslint": { + "version": "5.13.0", + "resolved": "https://registry.npmjs.org/tslint/-/tslint-5.13.0.tgz", + "integrity": "sha512-ECOOQRxXCYnUUePG5h/+Z1Zouobk3KFpIHA9aKBB/nnMxs97S1JJPDGt5J4cGm1y9U9VmVlfboOxA8n1kSNzGw==", + "dev": true, + "requires": { + "babel-code-frame": "^6.22.0", + "builtin-modules": "^1.1.1", + "chalk": "^2.3.0", + "commander": "^2.12.1", + "diff": "^3.2.0", + "glob": "^7.1.1", + "js-yaml": "^3.7.0", + "minimatch": "^3.0.4", + "mkdirp": "^0.5.1", + "resolve": "^1.3.2", + "semver": "^5.3.0", + "tslib": "^1.8.0", + "tsutils": "^2.27.2" + } + }, + "tsutils": { + "version": "2.29.0", + "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz", + "integrity": "sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==", + "dev": true, + "requires": { + "tslib": "^1.8.1" + } + }, "tty-browserify": { "version": "0.0.0", "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz", diff --git a/package.json b/package.json index 23d57c7..93c4122 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,10 @@ "name": "bootcamp", "version": "1.0.0", "description": "", + "repository": { + "type": "git", + "url": "https://github.com/Microsoft/frontend-bootcamp" + }, "main": "index.js", "scripts": { "start:client": "webpack-dev-server --mode development --progress --open", @@ -18,6 +22,7 @@ "devDependencies": { "@types/body-parser": "^1.17.0", "@types/cors": "^2.8.4", + "@types/enzyme": "^3.9.0", "@types/express": "^4.16.1", "@types/jest": "^23.3.13", "@types/node": "~10.12.21", @@ -26,11 +31,10 @@ "@types/react-redux": "^7.0.0", "@types/redux": "^3.6.0", "@types/uuid": "^3.4.4", - "@types/enzyme": "^3.9.0", "body-parser": "^1.18.3", + "copy-webpack-plugin": "^4.6.0", "cors": "^2.8.5", "css-loader": "^2.1.0", - "copy-webpack-plugin": "^4.6.0", "fork-ts-checker-async-overlay-webpack-plugin": "^0.1.0", "fork-ts-checker-webpack-plugin": "^0.5.2", "html-webpack-plugin": "^4.0.0-beta.5", @@ -41,6 +45,7 @@ "style-loader": "^0.23.1", "ts-jest": "^23.10.5", "ts-loader": "^5.3.3", + "tslint": "^5.13.0", "typescript": "^3.3.3", "uuid": "^3.3.2", "webpack": "^4.28.4", @@ -66,4 +71,4 @@ "redux-starter-kit": "^0.4.3", "redux-thunk": "^2.3.0" } -} +} \ No newline at end of file diff --git a/step1-01/README.md b/step1-01/README.md index 91af32e..a8e20ba 100644 --- a/step1-01/README.md +++ b/step1-01/README.md @@ -1,24 +1,23 @@ ## How the Web Works -A simple web page is rendered on the screen via the following steps +A simple web page is rendered on the screen via the following steps. -> There are many sub steps in this process -> but these are the highlights +*There are many sub-steps in this process, but these are the highlights.* -1. You instruct the browser which webpage you'd like to see -2. The browser looks up the site in a 'DNS Server' +1. You instruct the browser which web page you'd like to see +2. The browser looks up the site in a "DNS Server" - This is like a big phone book for website server addresses -3. The browser asks the server to send over a specific page of the website `developer.mozilla.org/filename.html` or `developer.mozilla.org` - - If asked for a 'root' level address, most servers will return `'root'/index.html` +3. The browser asks the server to send over a specific page of the website, such as `developer.mozilla.org/filename.html` or `developer.mozilla.org` + - If asked for a "root"-level address, most servers will return `/index.html` 4. The server sends the HTML file back to the browser -5. The browser starts to read the HTML file from the top to the bottom, \*stopping any time that additional resources are required +5. The browser starts to read the HTML file from the top to the bottom, stopping any time that additional resources are required: - CSS stylesheets - JavaScript files - Fonts - Images 6. Browser makes requests for additional resources - Those resources might request even more files -7. Once the browser gets to the bottom of the page it can start rendering, and then load the page +7. Once the browser gets to the bottom of the page it can start working on rendering, and then display the page ![MDN Page Load](https://user-images.githubusercontent.com/1434956/53033758-9da8d580-3426-11e9-9ab8-09f42ccab9a8.png) diff --git a/step1-01/css-demo/README.md b/step1-01/css-demo/README.md index 5826314..5125850 100644 --- a/step1-01/css-demo/README.md +++ b/step1-01/css-demo/README.md @@ -2,7 +2,7 @@ ### CSS Properties -Now that we've gone over adding HTML tags to the page, lets cover adding styles to those tags. We can do quite a lot with styles! We can change: +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: - Typography - Colors @@ -13,21 +13,21 @@ Now that we've gone over adding HTML tags to the page, lets cover adding styles - Animations - and [many more](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) -CSS is always applied in `property: value` pairs, like `background: blue;` and are terminated with a semi colon. +CSS styles are always written in `property: value` pairs (like `background: blue;`) and terminated with a semicolon. ### Applying CSS to an HTML file CSS can be applied to HTML tags in three different ways. -1. Inline - Styles are applied directly to the HTML tag +1. Inline using an HTML tag's `style` attribute - `
Hello
` 2. Via a `