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

moving nav to top level

Browse Source
This commit is contained in:
Micah Godbolt
2019-02-25 11:52:00 -08:00
parent 2922fd3eb3
commit 45a553fa14
5 changed files with 73 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/css-syntax.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

72
index.html
View File

@@ -22,41 +22,53 @@
HTML/CSS/JS HTML/CSS/JS
</a> </a>
</li> </li>
<li class="Tile"> <li class="Tile Tile-link">
<a target="_blank" href="./step1-02/" class="Tile-link"> Step 2 <br />
Step 2 <br /> Todo HTML & CSS
Todo HTML & CSS <div>
</a> <a target="_blank" href="./step1-02/demo/">demo</a> | <a target="_blank" href="./step1-01/exercise/">exercise</a> |
<a target="_blank" href="./step1-02/final/">final</a>
</div>
</li> </li>
<li class="Tile"> <li class="Tile Tile-link">
<a target="_blank" href="./step1-03/" class="Tile-link"> Step 3 <br />
Step 3 <br /> Todo JS
Todo JS <div>
</a> <a target="_blank" href="./step1-03/demo/">demo</a> | <a target="_blank" href="./step1-03/exercise/">exercise</a> |
<a target="_blank" href="./step1-03/final/">final</a>
</div>
</li> </li>
<li class="Tile"> <li class="Tile Tile-link">
<a target="_blank" href="./step1-04/" class="Tile-link"> Step 4 <br />
Step 4 <br /> React Intro
React Intro <div>
</a> <a target="_blank" href="./step1-04/demo/">demo</a> |
<a target="_blank" href="./step1-04/final/">final</a>
</div>
</li> </li>
<li class="Tile"> <li class="Tile Tile-link">
<a target="_blank" href="./step1-05/" class="Tile-link"> Step 5 <br />
Step 5 <br /> React Components
React Components <div>
</a> <a target="_blank" href="./step1-05/demo/">demo</a> | <a target="_blank" href="./step1-05/exercise/">exercise</a> |
<a target="_blank" href="./step1-05/final/">final</a>
</div>
</li> </li>
<li class="Tile"> <li class="Tile Tile-link">
<a target="_blank" href="./step1-06/" class="Tile-link"> Step 6 <br />
Step 6 <br /> State Driven UI
State Driven UI <div>
</a> <a target="_blank" href="./step1-06/demo/">demo</a> | <a target="_blank" href="./step1-06/exercise/">exercise</a> |
<a target="_blank" href="./step1-06/final/">final</a>
</div>
</li> </li>
<li class="Tile"> <li class="Tile Tile-link">
<a target="_blank" href="./step1-07/" class="Tile-link"> Step 7 <br />
Step 7 <br /> UI Driven State
UI Driven State <div>
</a> <a target="_blank" href="./step1-07/demo/">demo</a> | <a target="_blank" href="./step1-07/exercise/">exercise</a> |
<a target="_blank" href="./step1-07/final/">final</a>
</div>
</li> </li>
</ul> </ul>
</div> </div>

27
step1-01/css-demo/README.md
View File

@@ -20,17 +20,32 @@ CSS is always applied in `property: value` pairs, like `background: blue;` and a
CSS can be applied to HTML tags in three different ways. CSS can be applied to HTML tags in three different ways.
1. Inline - Styles are applied directly to the HTML tag 1. Inline - Styles are applied directly to the HTML tag
- `<div style="background: blue; color: white;">Hello </div>`
- `<div style="background: blue; color: white;">Hello </div>`
2. Via a `<style>` tag in the HTML page 2. Via a `<style>` tag in the HTML page
3. Through an externally loaded CSS file 3. Through an externally loaded CSS file
- `<link rel="stylesheet" href="./css-demo-finished.css" />`
- `<link rel="stylesheet" href="./css-demo-finished.css" />`
### Targeting specific HTML tags ### 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. Below are a series of selectors and property/value combinations that we'll apply to our CSS Demo page 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.
CSS rulesets take on the following form:
```css
selector1,
selector2 {
property1: value1;
property2: value2;
}
```
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
```css ```css
/* Targeting the entire page */ /* Targeting the entire page */

63
step1-01/css-demo/css-demo.css
View File

@@ -1,63 +0,0 @@
/* 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-bottom: 15px;
margin-top: 15px;
padding: 10px;
border: 1px solid #ddd;
} */
/* span {
color: #004578;
} */
/* .tiles {
display: flex;
} */
/* .tiles img {
width: 100%;
} */
/* .tiles > div {
background: rgb(10, 10, 10);
color: white;
flex-basis: 100%;
padding: 10px 20px 15px;
margin: 10px 20px 10px 0;
} */
/* div.links {
background: #004578;
} */
/* a {
color: white;
} */
/* a:hover {
color: #ccc;
} */
/* a ~ a {
display: block;
} */
/* .tiles > div:last-child {
margin-right: 0;
} */
/* #contact-form {
display: flex;
flex-direction: column;
} */
/* input[type='submit'] {
margin-top: 10px;
} */

17
step1-01/html-demo/html-demo.html
View File

@@ -22,7 +22,7 @@
<div> <div>
<header> <header>
<h1>My Website</h1> <h1>My Website H1 inside Header</h1>
<nav> <nav>
<ul> <ul>
<li><a href="page1">About Me</a></li> <li><a href="page1">About Me</a></li>
@@ -32,9 +32,9 @@
</header> </header>
<main> <main>
<h2>My Blog</h2> <h2>My Blog H2 inside Main</h2>
<article> <article>
<header><h3>Blog Title 1</h3></header> <header><h3>Blog Title 1 H3 in Article Header</h3></header>
<aside><p>Aside</p></aside> <aside><p>Aside</p></aside>
<p> <p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto mollitia ducimus. Tempora dignissimos incidunt Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto mollitia ducimus. Tempora dignissimos incidunt
@@ -48,7 +48,7 @@
</p> </p>
</article> </article>
</main> </main>
<footer>Copyright 2019</footer> <footer>Copyright 2019 in the Footer</footer>
</div> </div>
</section> </section>
<hr /> <hr />
@@ -112,15 +112,18 @@
<h3>Anchor tag, br and span</h3> <h3>Anchor tag, br and span</h3>
<a target="_blank" href="https://example.com"> Website <span style="color: red">address</span> </a><br /> <a target="_blank" href="https://example.com"> Website <span style="color: red">address in span tag</span> </a><br />
<a target="_blank" href="mailto:m.bluth@example.com">Email</a><br /> <a target="_blank" href="mailto:m.bluth@example.com">Email</a> (no &lt;br&gt;) <a target="_blank" href="tel:+123456789">Phone</a
<a target="_blank" href="tel:+123456789">Phone</a><br /> ><br />
<h3>Inline style tags</h3> <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> <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> <div>
<img src="../../assets/fabric.jpg" width="100" /> <img src="../../assets/fabric.jpg" width="100" />
<img src="../../assets/fabric.jpg" width="50" />
<img src="../../assets/fabric.jpg" width="150" />
</div> </div>
</section> </section>
<hr /> <hr />