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

changed up steps 1,2,3 to have exercises. removed js implementation of todo app

Browse Source
This commit is contained in:
Micah Godbolt
2019-03-01 20:19:31 -08:00
parent c21b92c30f
commit 9ff15add37
33 changed files with 454 additions and 1426 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
step1-02/README.md Normal file
View File

@@ -0,0 +1,147 @@
## CSS Demo
### CSS Properties
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
- Appearance (Corners, Borders, Decorations)
- Layout
- Position
- Inline vs Block
- Animations
- and [many more](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)
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 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 external CSS file
- `<link rel="stylesheet" href="./css-demo-finished.css" />`
### Targeting specific elements
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:
```css
selector1,
selector2 {
property1: value1;
property2: value2;
}
```
Here's a more detailed view from [Chris Eppstein](https://twitter.com/chriseppstein/status/1100115119437111296):
<img src="https://raw.githubusercontent.com/Microsoft/frontend-bootcamp/master/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 is a series of selectors and property/value combinations that we'll apply to our CSS demo page.
```css
/* Targeting the entire page */
body {
font: 1.2em sans-serif;
}
/* Targeting an HTML tag */
h1 {
/* Color name */
color: black;
/* 6-digit hex */
background: #ababab;
/* Margin: specified separately for each side */
margin-bottom: 15px;
margin-top: 15px;
/* Shorthand: Padding applies to all sides */
padding: 10px;
/* Border shorthand and 3-digit hex */
border: 1px solid #ddd;
}
/* Overriding inherited styles */
span {
color: #004578;
}
/* Sibling selector */
a ~ a {
/* Changing elements from inline to block */
display: block;
}
/* Targeting a class name */
.tiles {
display: flex;
}
/* Descendant selector */
.tiles img {
width: 100%;
}
/* Direct descendant selector */
.tiles > div {
/* rgb color */
background: rgb(10, 10, 10);
color: white;
flex-basis: 100%;
/* Padding/margin shorthand. 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;
border: 1px solid white;
}
/* Qualified selector */
div.important-links {
background: #004578;
}
/* Style inheritance only works for unstyled elements */
a {
color: white;
}
/* Hover pseudo-selector */
a:hover {
color: #ccc;
}
/* Positional pseudo-selector */
.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;
}
```
## Next Step
[JavaScript Demo](../js-demo)

86
step1-02/demo/README.md
View File

@@ -1,86 +0,0 @@
## What We'll Be Building
![todo screenshot](https://raw.githubusercontent.com/Microsoft/frontend-bootcamp/master/assets/todo_screenshot.jpg)
## HTML and CSS
Every website, application, form or component starts with markup. The HTML will change over time as you develop, but a first pass helps you understand the UI you are trying to build.
## Demo
In this exercise we will scaffold out some HTML for our todo app, then add some basic styling to it.
### Page scaffold
```html
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
```
1. The [`DOCTYPE`](https://developer.mozilla.org/en-US/docs/Glossary/Doctype) tells the browser that this file is written in modern HTML.
2. The `html` tag wraps the entire page and is the page root. Nothing is placed outside of this tag.
3. `head` will contain all of the page's metadata, in this case a link to our CSS file.
4. `body` is where all of the visible content should be placed.
### Content Sectioning
As we saw in the previous demo, HTML elements can be used to describe different content sections of the applications. Let's add `header`, `main` and `footer`, as well as populate the header with an `h1`, addTodo `div`, and `nav` for our filters.
```html
<body>
<header>
<h1></h1>
<div class="addTodo"></div>
<nav class="filter"></nav>
</header>
<main></main>
<footer></footer>
</body>
```
> Note that a `form` element would have been more semantically correct than a `div`, but we aren't using this form to POST to a server, so for this example a div is easier to use.
### Updating the header
The header of our page is where most of the action will happen. First, let's give our app a name, adding "TODO" to our `h1`. Then we can add an input and button to our `addTodo` div.
```html
<input class="textfield" placeholder="add todo" /> <button class="submit">Add</button>
```
#### Navigation
The navigation for this application is quite simple. We want users to be able to switch between three filtered states. Since we need to track which state is currently selected, we'll add a `selected` class to the first item.
```html
<nav class="filter">
<button class="selected">all</button>
<button>active</button>
<button>completed</button>
</nav>
```
### Adding styles
Now that we've got the top of our application scaffolded, we can add some styles in the `head`.
```html
<head>
<link rel="stylesheet" href="./style.css" />
</head>
```
### Updating styles
It looks like the selected button isn't getting any special styles. Let's dig in and see why that is.
Open up the browser inspector and target our "all" button. You'll notice that the blue style is present on the list, but it is being overridden by the `border: none` above it. This is a situation where specificity is winning out over the cascade.
> **Cascade** states that if two selectors are equal, the lowest one on the page wins
> **Specificity** states that regardless of cascade, the selector with the highest specificity wins
To fix this problem we need to either reduce the specificity of our button styles, or increase the specificity of the selected style. In this situation we will add `.filter` in front of the `.selected` selector, because the selected style only applies to the filter anyway.

29
step1-02/demo/index..html Normal file
View File

@@ -0,0 +1,29 @@
<html>
<head>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div>
<h1>This is my <span>Title</span></h1>
<div class="tiles">
<div class="important-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="../../assets/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>

1
step1-02/demo/index.html
View File

@@ -1 +0,0 @@
this page is intentionally blank

85
step1-02/demo/style.css
View File

@@ -1,41 +1,62 @@
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 400px;
margin: 20px auto;
}
/* body {
font: 1.2em sans-serif;
} */
h1 {
text-align: center;
}
/* h1 {
color: black;
background: #ababab;
margin-bottom: 15px;
margin-top: 15px;
padding: 10px;
border: 1px solid #ddd;
} */
.addTodo {
/* span {
color: #004578;
} */
/* a ~ a {
display: block;
} */
/* .tiles {
display: flex;
}
} */
.textfield {
flex-grow: 1;
margin-right: 10px;
}
/* .tiles img {
width: 100%;
} */
.submit {
border: none;
padding: 5px 10px;
}
/* .tiles > div {
background: rgb(10, 10, 10);
color: white;
flex-basis: 100%;
padding: 10px 20px 15px;
margin: 10px 20px 10px 0;
border: 1px solid white;
} */
.filter {
margin: 10px 0 0;
}
/* div.important-links {
background: #004578;
} */
.filter button {
background: transparent;
border: none;
}
/* a {
color: white;
} */
.selected {
border-bottom: 2px solid blue;
}
/* a:hover {
color: #ccc;
} */
.todos {
list-style: none;
padding: 0;
}
/* .tiles > div:last-child {
margin-right: 0;
} */
/* #contact-form {
display: flex;
flex-direction: column;
} */
/* input[type='submit'] {
margin-top: 10px;
} */

16
step1-02/exercise/README.md
View File

@@ -1,16 +0,0 @@
## Exercise
If you don't already have the app running, start it with `npm run static` from the root of the `frontend-bootcamp` folded and go to [Todo HTML/CSS Exercise Page](http://localhost:8080/step1-02/exercise/)
Open the `index.html` file in this exercise folder.
1. Add an unordered list with class `todos` to the main section
2. Add 4 `list items` (`li`) with class `todo` inside of that list with the following content
3. Add this content to each of the 4 list items `<label><input type="checkbox" /> <span class="title"> Todo </span> </label>`
4. Add a span and a button to your `footer`
5. Span content should be `<i class="remaining">4</i> items left` and button should say `Clear Completed` and have a class of `submit`
6. Go into the CSS file and add `display: flex` to the footer. Also add `flex-grow:1` to the span inside of the footer
> Hint: Look back at the CSS demo to see the various ways you can use selectors to target existing HTML
> There are many strategies for creating and organizing class names in a large application, like [bem](http://getbem.com/), [OOCSS](http://oocss.org/) and [SMACSS](https://smacss.com/). This lesson is focused on using CSS selectors, not the optimized way to scale your CSS.

22
step1-02/exercise/index.html
View File

@@ -1,22 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<header>
<h1>todos - step1-02 exercise</h1>
<div class="addTodo">
<input class="textfield" placeholder="add todo" />
<button class="submit">Add</button>
</div>
<nav class="filter">
<button class="selected">all</button>
<button>active</button>
<button>completed</button>
</nav>
</header>
<main></main>
<footer></footer>
</body>
</html>

41
step1-02/exercise/style.css
View File

@@ -1,41 +0,0 @@
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 400px;
margin: 20px auto;
}
h1 {
text-align: center;
}
.addTodo {
display: flex;
}
.textfield {
flex-grow: 1;
margin-right: 10px;
}
.submit {
border: none;
padding: 5px 10px;
}
.filter {
margin: 10px 0 0;
}
.filter button {
background: transparent;
border: none;
}
.filter .selected {
border-bottom: 2px solid blue;
}
.todos {
list-style: none;
padding: 0;
}

39
step1-02/final/index.html
View File

@@ -1,39 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<header>
<h1>todos - step1-02 final</h1>
<div class="addTodo">
<input class="textfield" placeholder="add todo" />
<button class="submit">Add</button>
</div>
<nav class="filter">
<button class="selected">all</button>
<button>active</button>
<button>completed</button>
</nav>
</header>
<main>
<ul class="todos">
<li class="todo">
<label><input type="checkbox" /> <span class="title"> Todo 1 </span> </label>
</li>
<li class="todo">
<label><input type="checkbox" /> <span class="title"> Todo 2 </span> </label>
</li>
<li class="todo">
<label><input type="checkbox" /> <span class="title"> Todo 3 </span> </label>
</li>
<li class="todo">
<label><input type="checkbox" /> <span class="title"> Todo 4 </span> </label>
</li>
</ul>
</main>
<footer>
<span><i class="remaining">4</i> items left</span> <button class="submit">Clear Completed</button>
</footer>
</body>
</html>

49
step1-02/final/style.css
View File

@@ -1,49 +0,0 @@
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 400px;
margin: 20px auto;
}
h1 {
text-align: center;
}
.addTodo {
display: flex;
}
.textfield {
flex-grow: 1;
margin-right: 10px;
}
.submit {
border: none;
padding: 5px 10px;
}
.filter {
margin: 10px 0 0;
}
.filter button {
background: transparent;
border: none;
}
.filter .selected {
border-bottom: 2px solid blue;
}
.todos {
list-style: none;
padding: 0;
}
footer {
display: flex;
}
footer span {
flex-grow: 1;
}