mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
tweaks
This commit is contained in:
Micah Godbolt
@@ -1,6 +1,6 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="./css-demo-finished.css" />
|
||||
<link rel="stylesheet" href="./css-demo-final.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
@@ -11,53 +11,45 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata">Document Meta Data</a></h2>
|
||||
<p>head, title, link, style</p>
|
||||
|
||||
<h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Content_sectioning">Content Sections</a></h2>
|
||||
<section>
|
||||
<h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata">Document Meta Data</a></h2>
|
||||
<p>head, title, link, style</p>
|
||||
</section>
|
||||
<hr />
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<h1>My Website</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="page1">About Me</a></li>
|
||||
<li><a href="page2">Contact Me</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Content_sectioning">Content Sections</a></h2>
|
||||
|
||||
<main>
|
||||
<h2>My Blog</h2>
|
||||
<article>
|
||||
<header><h3>Blog Title 1</h3></header>
|
||||
<aside><p>Aside</p></aside>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
<div>
|
||||
<header>
|
||||
<h1>My Website</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="page1">About Me</a></li>
|
||||
<li><a href="page2">Contact Me</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
<header><h3>Blog Title 2</h3></header>
|
||||
<aside><p>Aside</p></aside>
|
||||
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
</article>
|
||||
</main>
|
||||
<footer>Copyright 2019</footer>
|
||||
<main>
|
||||
<h2>My Blog</h2>
|
||||
<article>
|
||||
<header><h3>Blog Title 1</h3></header>
|
||||
<aside><p>Aside</p></aside>
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
<header><h3>Blog Title 2</h3></header>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, rem.
|
||||
</p>
|
||||
</article>
|
||||
</main>
|
||||
<footer>Copyright 2019</footer>
|
||||
</div>
|
||||
</section>
|
||||
<hr />
|
||||
<section>
|
||||
@@ -223,6 +215,5 @@
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
<hr />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -9,10 +9,11 @@
|
||||
<ul class="Tiles">
|
||||
<li class="Tile"><a href="./html-demo/html-demo.html" class="Tile-link">HTML Demo</a></li>
|
||||
<li class="Tile"><a href="./css-demo/css-demo.html" class="Tile-link">CSS Demo</a></li>
|
||||
<li class="Tile"><a href="./css-demo/css-demo-finished.html" class="Tile-link">CSS Demo Finished</a></li>
|
||||
<li class="Tile"><a href="./css-demo/css-demo-final.html" class="Tile-link">CSS Demo Final</a></li>
|
||||
<li class="Tile"><a href="./js-demo/js-demo.html" class="Tile-link">JS Demo</a></li>
|
||||
<li class="Tile"><a href="./js-demo/js-demo-finished.html" class="Tile-link">JS Demo Finished</a></li>
|
||||
<li class="Tile"><a href="./js-demo/js-demo-final.html" class="Tile-link">JS Demo Final</a></li>
|
||||
</ul>
|
||||
<div id="markdownReadme"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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
|
||||
<div id="contact-form">
|
||||
<label>Email</label><input class="email" type="email" />
|
||||
<input class="submit" value="Submit" type="submit" />
|
||||
</div>
|
||||
```
|
||||
|
||||
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)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user