microsoft
/
frontend-bootcamp
зеркало из
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Merge pull request #14 from ecraig12345/editing 

Step 1-01 updates
This commit is contained in:
Micah Godbolt 2019-02-26 14:25:42 -08:00 коммит произвёл GitHub
Родитель 0d8396126a 1f71f31c9e
Коммит 073a91e98f
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
8 изменённых файлов: 150 добавлений и 111 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

24
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,26 +14,26 @@ 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 React Developer Tools
- [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 React Developer Tools
- React Developer Tools: [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) or [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)
### 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
@ -81,7 +81,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](https://twitter.com/kenneth_chau)
- [@micahgodbolt](https://twitter.com/micahgodbolt)

30
package-lock.json сгенерированный
Просмотреть файл

@ -10075,6 +10075,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",

11
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"
}
}
}

17
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 `<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
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)

36
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
- `<div style="background: blue; color: white;">Hello </div>`
2. Via a `<style>` tag in the HTML page
3. Through an externally loaded CSS file
3. Through an external CSS file
- `<link rel="stylesheet" href="./css-demo-finished.css" />`
### Targeting specific HTML tags
### Targeting specific elements
Inline styles are always applied directly to the element you place them on, style tags and external CSS files need a method for matching HTML elements with their prospective style sets. We call these "[CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)", and they are just as important to learn as the properties/values themselves. When selectors are combined with CSS styles, we call this a ruleset.
Inline styles are always applied directly to the element you place them on, but `<style>` tags and external CSS files need a way to match elements with their respective style sets. This is done with **[CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)**. When selectors are combined with CSS styles, we call this a **ruleset**.
CSS rulesets take on the following form:
@ -39,13 +39,13 @@ selector2 {
}
```
Here's a more detailed view from [Chris Eppstein](https://twitter.com/chriseppstein/status/1100115119437111296)
Here's a more detailed view from [Chris Eppstein](https://twitter.com/chriseppstein/status/1100115119437111296):
<img src="../../assets/css-syntax.png"/>
Selectors can be a single tag, class, ID, or attribute. It can also be a [combination](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors) of those elements.
Below are a series of selectors and property/value combinations that we'll apply to our CSS Demo page
Below is a series of selectors and property/value combinations that we'll apply to our CSS demo page.
```css
/* Targeting the entire page */
@ -58,17 +58,17 @@ h1 {
/* Color name */
color: black;
/* 6 digit hex */
/* 6-digit hex */
background: #ababab;
/* Margin: property for each side */
/* Margin: specified separately for each side */
margin-bottom: 15px;
margin-top: 15px;
/* Shorthand: Padding applies to all sides */
padding: 10px;
/* 3 digit hex and border shorthand */
/* Border shorthand and 3-digit hex */
border: 1px solid #ddd;
}
@ -82,18 +82,18 @@ span {
display: flex;
}
/* Decendant selector */
/* Descendant selector */
.tiles img {
width: 100%;
}
/* Direct decendant selector */
/* Direct descendant selector */
.tiles > div {
/* rgb colors */
/* rgb color */
background: rgb(10, 10, 10);
color: white;
flex-basis: 100%;
/* Longhand goes clockwise from top
/* Padding/margin shorthand. Goes clockwise from top.
10px - all
10px 20px - top/bottom left/right
10px 20px 15px - top left/right bottom
@ -113,18 +113,18 @@ a {
color: white;
}
/* Pseudo hover selector */
/* Hover pseudo-selector */
a:hover {
color: #ccc;
}
/* Sibling selectors */
/* Sibling selector */
a ~ a {
/* Changing elements from inline to block */
display: block;
}
/* Positional Pseudo Selectors */
/* Positional pseudo-selector */
.tiles > div:last-child {
/* overrides margin-right but leaves other margins alone */
margin-right: 0;

22
step1-01/css-demo/css-demo-final.css
Просмотреть файл

@ -1,4 +1,4 @@
/* Targeting an HTML tag */
/* Targeting the entire page */
body {
font: 1.2em sans-serif;
}
@ -8,17 +8,17 @@ h1 {
/* Color name */
color: black;
/* 6 digit hex */
/* 6-digit hex */
background: #ababab;
/* Margin: property for each side */
/* Margin: specified separately for each side */
margin-bottom: 15px;
margin-top: 15px;
/* Shorthand: Padding applies to all sides */
padding: 10px;
/* 3 digit hex and border shorthand */
/* Border shorthand and 3-digit hex */
border: 1px solid #ddd;
}
@ -32,18 +32,18 @@ span {
display: flex;
}
/* Decendant selector */
/* Descendant selector */
.tiles img {
width: 100%;
}
/* Direct decendant selector */
/* Direct descendant selector */
.tiles > div {
/* rgb colors */
/* rgb color */
background: rgb(10, 10, 10);
color: white;
flex-basis: 100%;
/* Longhand goes clockwise from top
/* Padding/margin shorthand. Goes clockwise from top.
10px - all
10px 20px - top/bottom left/right
10px 20px 15px - top left/right bottom
@ -63,18 +63,18 @@ a {
color: white;
}
/* Pseudo hover selector */
/* Hover pseudo-selector */
a:hover {
color: #ccc;
}
/* Sibling selectors */
/* Sibling selector */
a ~ a {
/* Changing elements from inline to block */
display: block;
}
/* Positional Pseudo Selectors */
/* Positional pseudo-selector */
.tiles > div:last-child {
/* overrides margin-right but leaves other margins alone */
margin-right: 0;

95
step1-01/html-demo/README.md
Просмотреть файл

@ -2,73 +2,74 @@
The [HTML demo page](http://localhost:8080/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).
To learn more about each element, click on the elements below.
To learn more about each element, click on the element names below.
### [Document Meta Data](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata)
### [Document Metadata](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata)
- [html](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) - Root level element
- [head](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) - Provides general information (meta-data) about the page
- [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) - Defines document title shown via browser tab
- [link](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) - Links to external resource (usually stylesheets)
- [style](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) - Inline style tag
- [`html`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) - Root-level element
- [`head`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) - Provides general information (metadata) about the page
- [`title`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) - Defines document title shown in browser tab/title bar
- [`link`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) - Links to external resources (usually stylesheets)
- [`style`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) - Inline style tag
### [Content Sectioning](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Content_sectioning)
- [section](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) - Generic section of content
- [header](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header) - Introductory content or navigational aid
- [footer](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer) - Footer for nearest sectioning element
- [main](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main) - Dominent content
- [nav](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav) - Navigational aid
- [article](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) - Syndicated content
- [aside](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside) - Related information
- [h1,h2,h3,h4,h5,h6](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) - Section headings
- [`section`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) - Generic section of content
- [`header`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header) - Introductory content or navigational aid
- [`footer`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer) - Footer for nearest sectioning element
- [`main`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main) - Dominant content
- [`nav`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav) - Navigational aid
- [`article`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) - Syndicated content
- [`aside`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside) - Related information
- [`h1`,`h2`,`h3`,`h4`,`h5`,`h6`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) - Section headings
### [Block Text Content](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Text_content)
- [div](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) - A generic block level container
- [p](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) - A paragraph
- [ol](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) - Ordered list (1,2,3)
- [ul](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) - Unordered list
- [li](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) - List item
- [pre](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre) - Preformatted text
- [`div`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) - Generic block level container
- [`p`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) - Paragraph
- [`ol`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) - Ordered list (1,2,3)
- [`ul`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) - Unordered list (bullets)
- [`li`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) - List item
- [`pre`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre) - Preformatted text
### [Inline Text Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics)
- [a](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) - Anchor element for creating links to other pages, files, email
- [span](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) - Generic inline container
- [b](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b) - Bring attention to content
- [em](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em) - Stress emphasis
- [i](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i) - Range of text set off from normal text
- [sub](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub) - Subscript text
- [sup](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup) - Superscript text
- [code](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code) - Fragment of computer code (monospace)
- [`a`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) - Anchor element for creating links to other pages, files, programs
- [`span`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) - Generic inline container
- [`b`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b) - Bring attention to content (usually bold)
- [`em`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em) - Stress emphasis (usually italic)
- [`i`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i) - Range of text set off from normal text (usually italic)
- [`sub`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub) - Subscript text
- [`sup`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup) - Superscript text
- [`code`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code) - Fragment of computer code (monospace)
### [Image and multimedia](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics)
- [img](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) - Embeds image into document
- [`img`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) - Embeds image into document
### [Table Content](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Table_content)
- [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) - Root table container
- [thead](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead) - Table head container
- [tr](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) - Table row
- [th](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th) - Table head cell
- [tbody](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody) - Table body container
- [td](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) - Normal table cell
- [`table`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) - Root table container
- [`thead`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead) - Table head container
- [`tr`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) - Table row
- [`th`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th) - Table head cell
- [`tbody`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody) - Table body container
- [`td`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) - Normal table cell
### [Forms](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms)
- [form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) - Form container
- [label](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) - Label text for form elements
- [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) - A dropdown container
- [option](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) - Dropdown elements
- [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) - A form field to collect various inputs. Types include:
- text
- checkbox
- color
- date
- radio
- submit
- [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) - Form container
- [`label`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) - Label text for form elements
- [`select`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) - A dropdown container
- [`option`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) - Dropdown elements
- [`input`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) - A form field to collect various types of input.
Possible `type` values include:
- `text`
- `checkbox`
- `color`
- `date`
- `radio`
- `submit`
## Next Step

26
step1-01/html-demo/html-demo.html
Просмотреть файл

@ -12,7 +12,7 @@
<body>
<section>
<h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata">Document Meta Data</a></h2>
<h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata">Document Metadata</a></h2>
<pre>
&lt;head&gt;
&lt;title&gt;Intro to HTML&lt;/title&gt;
@ -45,8 +45,8 @@
<main>
<h2>My Blog H2 inside Main</h2>
<article>
<header><h3>Blog Title 1 H3 in Article Header</h3></header>
<aside><p>Aside</p></aside>
<header><h3>Blog Title 1 (H3 in Article Header)</h3></header>
<aside><p>Aside: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum ultricies elit eget luctus.</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!
@ -144,7 +144,8 @@
<table border="1">
<thead>
<tr>
<th colspan="2">The table header</th>
<th>Column 1 header</th>
<th>Column 2 header</th>
</tr>
</thead>
<tbody>
@ -156,6 +157,9 @@
<td>Another table row</td>
<td>with two columns</td>
</tr>
<tr>
<td colspan="2">Row spanning both columns</td>
</tr>
</tbody>
</table>
</section>
@ -171,23 +175,23 @@
<div>
<div>
<input type="checkbox" id="option1" name="option1" checked />
<label for="option1">Option1</label>
<label for="option1">Option 1</label>
</div>
<div>
<input type="checkbox" id="option2" name="option2" />
<label for="option2">Option2</label>
<label for="option2">Option 2</label>
</div>
</div>
<div>
<input type="color" id="color1" name="color1" value="#e66465" />
<label for="color1">Color1</label>
<label for="color1">Color 1</label>
</div>
<div>
<input type="color" id="color2" name="color2" value="#f6b73c" />
<label for="color2">Color2</label>
<label for="color2">Color 2</label>
</div>
<div>
<label for="start">Start date:</label>
@ -197,17 +201,17 @@
<div>
<div>
<input type="radio" id="Radio1" name="radios" value="Radio1" checked />
<label for="Radio1">Radio1</label>
<label for="Radio1">Radio 1</label>
</div>
<div>
<input type="radio" id="radio2" name="radios" value="radio2" />
<label for="radio2">Radio2</label>
<label for="radio2">Radio 2</label>
</div>
<div>
<input type="radio" id="radio3" name="radios" value="radio3" />
<label for="radio3">Radio3</label>
<label for="radio3">Radio 3</label>
</div>
</div>
<div>