microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

updating css demo

Browse Source
This commit is contained in:
Micah Godbolt
2019-02-20 19:13:05 -08:00
parent 36dca79584
commit bdf6b2b0a9
8 changed files with 229 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
package-lock.json generated
View File

@@ -3608,7 +3608,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
@@ -3629,12 +3630,14 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -3649,17 +3652,20 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
@@ -3776,7 +3782,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
@@ -3788,6 +3795,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -3802,6 +3810,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -3809,12 +3818,14 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@@ -3833,6 +3844,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -3913,7 +3925,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
@@ -3925,6 +3938,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@@ -4010,7 +4024,8 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -4046,6 +4061,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -4065,6 +4081,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@@ -4108,12 +4125,14 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
}
}
},

72
step1-00/README.md
View File

@@ -21,75 +21,3 @@ A simple web page is rendered on the screen via the following steps
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)
## HTML Demo
The [HTML demo page](http://localhost:8080/step1-00/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.
### [Document Meta Data](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
### [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
### [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
### [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)
### [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
### [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
### [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

36
step1-00/css-demo/css-demo-finished.css → step1-00/css-demo/README.md
View File

@@ -1,5 +1,38 @@
/* https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors */
## 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
- `<div style="background: blue; color: white;">Hello </div>`
2. Via a `<style>` tag in the HTML page
3. Through an externally loaded CSS file
- `<link rel="stylesheet" href="./css-demo-finished.css" />`
### Targeting specific HTML tags
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 "selectors", and they are just as important to learn as the properties/values themselves.
```css
body {
font: 1.2em sans-serif;
}
@@ -90,3 +123,4 @@ a ~ a {
input[type='submit'] {
margin-top: 10px;
}
```

29
step1-00/css-demo/css-demo-finished.html
View File

@@ -1,29 +0,0 @@
<html>
<head>
<link rel="stylesheet" href="./css-demo-finished.css" />
</head>
<body>
<div>
<h1>This is my <span>Title</span></h1>
<div class="tiles">
<div class="links">
<h2>Important Links</h2>
<a href="#">We're Awesome</a>
<a href="#">Learn More</a>
<a href="#">Hire Us</a>
</div>
<div>
<h2>Our Logo</h2>
<img src="./fabric.jpg" width="100" alt="fabric logo" />
</div>
<div>
<h2>Contact Us</h2>
<div id="contact-form">
<label>Email</label><input type="email" />
<input value="Submit" type="submit" />
</div>
</div>
</div>
</div>
</body>
</html>

88
step1-00/css-demo/css-demo.css
View File

@@ -0,0 +1,88 @@
/* https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors */
body {
font: 1.2em sans-serif;
}
h1 {
color: black;
background: #ababab;
/* Margin: property for each side */
margin-bottom: 15px;
margin-top: 15px;
/* Shorthand: Padding applies to all sides */
padding: 10px;
/* 3 digit hex and border shorthand */
border: 1px solid #ddd;
}
/* Overriding inherited styles */
span {
color: #004578;
}
/* Targeting a class name */
.tiles {
display: flex;
}
/* Decendant selector */
.tiles img {
width: 100%;
}
/* Direct decendant selector */
.tiles > div {
/* rgb colors */
background: rgb(10, 10, 10);
color: white;
flex-basis: 100%;
/* Longhand goes clockwise from top
10px - all
10px 20px - top/bottom left/right
10px 20px 15px - top left/right bottom
*/
padding: 10px 20px 15px;
margin: 10px 20px 10px 0;
}
/* Qualified selector */
div.links {
background: #004578;
}
/* Style inheritance only works for unstyled elements */
a {
color: white;
}
/* Pseudo hover selector */
a:hover {
color: #ccc;
}
/* Sibling selectors */
a ~ a {
/* Changing elements from inline to block */
display: block;
}
/* Positional Pseudo Selectors */
.tiles > div:last-child {
/* overrides margin-right but leaves other margins alone */
margin-right: 0;
}
/* ID selector */
#contact-form {
display: flex;
flex-direction: column;
}
/* Attribute selector */
input[type='submit'] {
margin-top: 10px;
}

2
step1-00/css-demo/css-demo.html
View File

@@ -14,7 +14,7 @@
</div>
<div>
<h2>Our Logo</h2>
<img src="../assets/fabric.jpg" width="100" alt="fabric logo" />
<img src="./fabric.jpg" width="100" alt="fabric logo" />
</div>
<div>
<h2>Contact Us</h2>

71
step1-00/html-demo/README.md Normal file
View File

@@ -0,0 +1,71 @@
## HTML Demo
The [HTML demo page](http://localhost:8080/step1-00/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.
### [Document Meta Data](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
### [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
### [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
### [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)
### [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
### [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
### [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

4
step1-00/html-demo/html-demo.html
View File

@@ -126,6 +126,10 @@
<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>
<div>
<img src="../assets/fabric.jpg" width="100" />
</div>
</section>
<hr />
<section>