diff --git a/docs/step1-00/assets/fabric.jpg b/docs/assets/fabric.jpg similarity index 100% rename from docs/step1-00/assets/fabric.jpg rename to docs/assets/fabric.jpg diff --git a/docs/assets/flux.png b/docs/assets/flux.png new file mode 100644 index 0000000..9286f70 Binary files /dev/null and b/docs/assets/flux.png differ diff --git a/docs/assets/todo_screenshot.jpg b/docs/assets/todo_screenshot.jpg new file mode 100644 index 0000000..cf85ea5 Binary files /dev/null and b/docs/assets/todo_screenshot.jpg differ diff --git a/docs/index.html b/docs/index.html index 1e5cb66..9f3e489 100644 --- a/docs/index.html +++ b/docs/index.html @@ -16,22 +16,16 @@

Day 1

Setup, HTML, CSS, Javascript and Intro to React -
  • - - Step 0
    - HTML/CSS/JS -     -
  • Step 1
    - Todo HTML + HTML/CSS/JS
  • Step 2
    - Todo CSS + Todo HTML & CSS
  • diff --git a/docs/playground/index.html b/docs/playground/index.html index cea48d4..070ac4d 100644 --- a/docs/playground/index.html +++ b/docs/playground/index.html @@ -2,5 +2,5 @@
    - + diff --git a/docs/step1-00/index.html b/docs/step1-00/index.html deleted file mode 100644 index 8e0bfb1..0000000 --- a/docs/step1-00/index.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - -
    - -
    - - diff --git a/docs/step1-01/README.md b/docs/step1-01/README.md new file mode 100644 index 0000000..3ce439b --- /dev/null +++ b/docs/step1-01/README.md @@ -0,0 +1,23 @@ +## How the Web Works + +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 + +1. You instruct the browser which webpage 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` +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 + - 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 + +![MDN Page Load](https://user-images.githubusercontent.com/1434956/53033758-9da8d580-3426-11e9-9ab8-09f42ccab9a8.png) diff --git a/docs/step1-01/css-demo/README.md b/docs/step1-01/css-demo/README.md new file mode 100644 index 0000000..3974435 --- /dev/null +++ b/docs/step1-01/css-demo/README.md @@ -0,0 +1,127 @@ +## CSS Demo + +### 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: + +- Typography +- Colors +- Appearance (Corners, Borders, Decorations) +- Layout +- Position +- Inline vs Block +- 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. + +### 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 + +- `
    Hello
    ` + +2. Via a `