From 04d13bb6f50259cab6b9b2b6e0c3152b0e1425e6 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Sun, 24 Feb 2019 20:41:28 -0800 Subject: [PATCH] tweaks --- ...s-demo-finished.css => css-demo-final.css} | 0 ...demo-finished.html => css-demo-final.html} | 2 +- step1-01/html-demo/html-demo.html | 79 ++++++++----------- step1-01/index.html | 5 +- step1-01/js-demo/README.md | 15 +++- ...-demo-finished.html => js-demo-final.html} | 0 6 files changed, 50 insertions(+), 51 deletions(-) rename step1-01/css-demo/{css-demo-finished.css => css-demo-final.css} (100%) rename step1-01/css-demo/{css-demo-finished.html => css-demo-final.html} (91%) rename step1-01/js-demo/{js-demo-finished.html => js-demo-final.html} (100%) diff --git a/step1-01/css-demo/css-demo-finished.css b/step1-01/css-demo/css-demo-final.css similarity index 100% rename from step1-01/css-demo/css-demo-finished.css rename to step1-01/css-demo/css-demo-final.css diff --git a/step1-01/css-demo/css-demo-finished.html b/step1-01/css-demo/css-demo-final.html similarity index 91% rename from step1-01/css-demo/css-demo-finished.html rename to step1-01/css-demo/css-demo-final.html index 9f18134..32335db 100644 --- a/step1-01/css-demo/css-demo-finished.html +++ b/step1-01/css-demo/css-demo-final.html @@ -1,6 +1,6 @@ - +
diff --git a/step1-01/html-demo/html-demo.html b/step1-01/html-demo/html-demo.html index 27784d8..bd08ca3 100644 --- a/step1-01/html-demo/html-demo.html +++ b/step1-01/html-demo/html-demo.html @@ -11,53 +11,45 @@ -

Document Meta Data

-

head, title, link, style

- -

Content Sections

+
+

Document Meta Data

+

head, title, link, style

+
+
-
-

My Website

- -
+

Content Sections

-
-

My Blog

-
-

Blog Title 1

- -

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto mollitia ducimus. Tempora dignissimos incidunt - consequuntur amet recusandae, eligendi eaque maxime in veritatis delectus non, molestiae vel ipsa! Natus, fuga! -

+
+
+

My Website

+ +
-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto mollitia ducimus. Tempora dignissimos incidunt - consequuntur amet recusandae, eligendi eaque maxime in veritatis delectus non, molestiae vel ipsa! Natus, fuga! -

-
-
-

Blog Title 2

- - -

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus debitis cupiditate sunt possimus praesentium eligendi - iure, ratione consequuntur, facere ex dolores beatae nostrum cumque voluptatum doloremque id amet. Magnam, rem. -

- -

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto mollitia ducimus. Tempora dignissimos incidunt - consequuntur amet recusandae, eligendi eaque maxime in veritatis delectus non, molestiae vel ipsa! Natus, fuga! -

-
-
-
Copyright 2019
+
+

My Blog

+
+

Blog Title 1

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto mollitia ducimus. Tempora dignissimos incidunt + consequuntur amet recusandae, eligendi eaque maxime in veritatis delectus non, molestiae vel ipsa! Natus, fuga! +

+
+
+

Blog Title 2

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, rem. +

+
+
+
Copyright 2019
+
@@ -223,6 +215,5 @@
-
diff --git a/step1-01/index.html b/step1-01/index.html index 4512b34..e46ae19 100644 --- a/step1-01/index.html +++ b/step1-01/index.html @@ -9,10 +9,11 @@ +
diff --git a/step1-01/js-demo/README.md b/step1-01/js-demo/README.md index 509dd40..1d684bd 100644 --- a/step1-01/js-demo/README.md +++ b/step1-01/js-demo/README.md @@ -2,9 +2,16 @@ It's entirely possible to create a website with nothing but HTML and CSS, but as soon as you want user interaction other than links and forms, you'll need to reach for JavaScript, the scripting language of the web. Fortunately, JavaScript has grown up quite a bit since it was introduced in the 90s, and now runs just about everything: web applications, mobile applications, native applications, servers, robots and rocket ships. -In this demo we are going to cover a few of the core basics of the language that will help us when we start writing our TODO app. At the end of this demo we will be able to display the number of the letter 'a's in our email input. +In this demo we are going to cover a few of the core basics of the language that will help us when we start writing our TODO app. At the end of this demo we will be able to display the number of the letter 'a's in our email input. Here's the markup we're working with: -We'll be covering: +```html +
+ + +
+``` + +By the end of the demo we'll have covered the following: - Variables - Functions @@ -14,7 +21,7 @@ We'll be covering: ### Variables -Javascript is a loosly typed language. We can create a new variable with the keywords `var, let, const` and use them within our application. These variables can contain one of the following types of values: +We can create a new variable with the keywords `var, let, const` and use them within our application. These variables can contain one of the following types of values: 1. boolean 2. number @@ -22,7 +29,7 @@ Javascript is a loosly typed language. We can create a new variable with the key 4. array 5. object -Because they are not strongly typed, we can switch a varible from a number, to a string, to an array anytime we want to. In practice, this is a bit of an anti-pattern, as it makes debugging and refactoring extremely difficult. This is why we write just about every project in [Typescript](https://www.typescriptlang.org/). +> Javascript is a loosly typed language so if start a variable off as a number `let myVar = 0`, you can change it to a string by simply writing `myVar = 'hello'` without any trouble. Lets start off our demo by adding some variables to our [script tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) diff --git a/step1-01/js-demo/js-demo-finished.html b/step1-01/js-demo/js-demo-final.html similarity index 100% rename from step1-01/js-demo/js-demo-finished.html rename to step1-01/js-demo/js-demo-final.html