mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
changed up steps 1,2,3 to have exercises. removed js implementation of todo app
This commit is contained in:
Micah Godbolt
77
step1-01/demo/README.md
Normal file
77
step1-01/demo/README.md
Normal file
@@ -0,0 +1,77 @@
|
||||
# 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 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, such as `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 working on rendering, and then display the page
|
||||
|
||||
|
||||
|
||||
# HTML Demo
|
||||
|
||||
HTML tags are the basis of all web applications. They give the page structure, and define the content within.
|
||||
|
||||
An HTML tag takes the following form:
|
||||
|
||||
```html
|
||||
<tag class="foo" onclick="myFunction()" otherAttributes="values"> </tag>
|
||||
```
|
||||
|
||||
HTML tags can also be nested to create a tree that we call the [Document Object Model](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)
|
||||
|
||||
The [HTML demo page](https://microsoft.github.io/frontend-bootcamp/step1-01/html-demo/html-demo.html) is 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
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<title>Frontend Workshop: By Micah Godbolt and Ken Chau</title>
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Frontend Workshop</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="./about.html">About This Workshop</a></li>
|
||||
<li><a href="./participate.html">Take This Workshop</a></li>
|
||||
<li><a href="./contribute.html">Contribute to This Workshop</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<h2>About This Workshop</h2>
|
||||
<p>
|
||||
The first day provides an introduction to the fundamentals of the web: HTML, CSS and JavaScript.
|
||||
</p>
|
||||
<img src="../../assets/todo_screenshot.jpg" alt="Picture of the Todo App we will build" />
|
||||
<p>
|
||||
On the second day we'll dive into more advanced topics like TypeScript, testing, and state management.
|
||||
</p>
|
||||
</main>
|
||||
<footer>
|
||||
<h2>Get More Information</h2>
|
||||
<ul>
|
||||
<li><a href="https://github.com/Microsoft/frontend-bootcamp"> Frontend Bootcamp </a></li>
|
||||
<li><a href="https://twitter.com/micahgodbolt"> @micahgodbolt </a></li>
|
||||
<li><a href="https://twitter.com/kenneth_chau"> @kenneth_chau</a></li>
|
||||
</ul>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
237
step1-01/demo/index.html
Normal file
237
step1-01/demo/index.html
Normal file
@@ -0,0 +1,237 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Intro to HTML</title>
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
|
||||
<style>
|
||||
hr {
|
||||
margin: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section>
|
||||
<h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata">Document Metadata</a></h2>
|
||||
<pre>
|
||||
<html>
|
||||
<head>
|
||||
<title>Intro to HTML</title>
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
|
||||
<style>
|
||||
hr {
|
||||
margin: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
</html>
|
||||
</pre>
|
||||
</section>
|
||||
<hr />
|
||||
|
||||
<section>
|
||||
<h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Content_sectioning">Content Sections</a></h2>
|
||||
<pre>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
|
||||
<nav></nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<article></article>
|
||||
<aside></aside>
|
||||
</main>
|
||||
|
||||
<footer></footer>
|
||||
</body>
|
||||
</pre>
|
||||
</section>
|
||||
<hr />
|
||||
<section>
|
||||
<h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Text_content">Block Text content</a></h2>
|
||||
|
||||
<h3>Div</h3>
|
||||
<div>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo et quod odio velit, hic qui autem dolores magni earum ducimus dolorem
|
||||
modi, numquam laborum accusamus adipisci eius excepturi doloremque vero.
|
||||
</div>
|
||||
<div>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore voluptatum maiores vitae? Architecto amet provident labore error
|
||||
officia accusantium reiciendis, vero perspiciatis. Incidunt numquam enim deserunt, velit earum totam veritatis.
|
||||
<div>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium nobis ex optio, minus in, eum ratione magnam aut distinctio,
|
||||
aliquid libero eaque nihil provident nemo est adipisci repellendus nisi numquam?
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Paragraph</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, vero! Eum optio veniam nisi, assumenda ea velit in corrupti vel
|
||||
eos reprehenderit beatae libero rem iusto, maiores, corporis sunt laborum.
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis porro consequuntur exercitationem, perspiciatis nam saepe, odit
|
||||
enim omnis qui commodi cupiditate in eveniet. Nemo maxime ipsam recusandae consectetur voluptatum non?
|
||||
</p>
|
||||
|
||||
<h3>Ordered List</h3>
|
||||
<ol>
|
||||
<li>Ordered</li>
|
||||
<li>list</li>
|
||||
<li>items</li>
|
||||
</ol>
|
||||
|
||||
<h3>Unordered List</h3>
|
||||
<ul>
|
||||
<li>Unordered</li>
|
||||
<li>list</li>
|
||||
<li>items</li>
|
||||
</ul>
|
||||
|
||||
<h3>Pre</h3>
|
||||
<pre>
|
||||
// This is a pre tag -- It respects spacing and tabs
|
||||
|
||||
<ul>
|
||||
<li>Unordered</li>
|
||||
<li>list</li>
|
||||
<li>items</li>
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<pre>
|
||||
// But actual code still needs to be escaped
|
||||
|
||||
&lt;ul&gt;
|
||||
&lt;li&gt;Unordered&lt;/li&gt;
|
||||
&lt;li&gt;list&lt;/li&gt;
|
||||
&lt;li&gt;items&lt;/li&gt;
|
||||
&lt;/ul&gt;
|
||||
</pre>
|
||||
</section>
|
||||
<hr />
|
||||
<section>
|
||||
<h2>
|
||||
<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics">Inline text elements</a>
|
||||
</h2>
|
||||
|
||||
<h3>Anchor tag and span</h3>
|
||||
|
||||
<a target="_blank" href="https://example.com"> Anchor Tag with <span style="color: red">span tag wrapped around part of it</span> </a>
|
||||
|
||||
<h3>Inline style tags</h3>
|
||||
<p><b>b tag</b> <em>em tag</em> <i>i tag</i> <sub>sub tag</sub> <sup>sup tab</sup> <code>code tag</code></p>
|
||||
|
||||
<h3>Image tag</h3>
|
||||
<div>
|
||||
<img src="../../assets/fabric.jpg" alt="Fabric Logo" width="100" />
|
||||
<img src="../../assets/fabric.jpg" alt="Fabric Logo" width="50" />
|
||||
<img src="../../assets/fabric.jpg" alt="Fabric Logo" width="150" />
|
||||
</div>
|
||||
</section>
|
||||
<hr />
|
||||
<section>
|
||||
<h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Table_content">Table content</a></h2>
|
||||
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Column 1 header</th>
|
||||
<th>Column 2 header</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>The table body</td>
|
||||
<td>with two columns</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Another table row</td>
|
||||
<td>with two columns</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">Row spanning both columns</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<hr />
|
||||
<section>
|
||||
<h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms">Forms</a></h2>
|
||||
|
||||
<form action="" method="get" class="form-example">
|
||||
<div>
|
||||
<label for="name">Enter your name: </label>
|
||||
<input type="text" name="name" id="name" required />
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<input type="checkbox" id="option1" name="option1" checked />
|
||||
<label for="option1">Option 1</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="checkbox" id="option2" name="option2" />
|
||||
<label for="option2">Option 2</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="color" id="color1" name="color1" value="#e66465" />
|
||||
<label for="color1">Color 1</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="color" id="color2" name="color2" value="#f6b73c" />
|
||||
<label for="color2">Color 2</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="start">Start date:</label>
|
||||
|
||||
<input type="date" id="start" name="trip-start" value="2018-07-22" min="2018-01-01" max="2018-12-31" />
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<input type="radio" id="Radio1" name="radios" value="Radio1" checked />
|
||||
<label for="Radio1">Radio 1</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" id="radio2" name="radios" value="radio2" />
|
||||
<label for="radio2">Radio 2</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" id="radio3" name="radios" value="radio3" />
|
||||
<label for="radio3">Radio 3</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="pet-select">Choose a pet:</label>
|
||||
|
||||
<select id="pet-select">
|
||||
<option value="">--Please choose an option--</option>
|
||||
<option value="dog">Dog</option>
|
||||
<option value="cat">Cat</option>
|
||||
<option value="hamster">Hamster</option>
|
||||
<option value="parrot">Parrot</option>
|
||||
<option value="spider">Spider</option>
|
||||
<option value="goldfish">Goldfish</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="submit" value="Subscribe!" />
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
23
step1-01/demo/style.css
Normal file
23
step1-01/demo/style.css
Normal file
@@ -0,0 +1,23 @@
|
||||
aside {
|
||||
float: right;
|
||||
width: 33%;
|
||||
padding: 10px;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
form > div {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h2 a {
|
||||
color: #0078d4;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h2 a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
Reference in New Issue
Block a user