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

adding the non-webpack entry points to docs

Browse Source
This commit is contained in:
Ken
2019-02-20 12:25:38 -08:00
parent 9bce24d819
commit dce954c894
29 changed files with 770 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
docs/step1-00/css-demo/css-demo-finished.css Normal file
View File

@@ -0,0 +1,92 @@
/* https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors */
body {
font: 1.2em sans-serif;
}
/* Targeting an HTML tag */
h1 {
/* Color name */
color: black;
/* 6 digit hex */
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;
}

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

@@ -0,0 +1,29 @@
<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>

0
docs/step1-00/css-demo/css-demo.css Normal file
View File

29
docs/step1-00/css-demo/css-demo.html Normal file
View File

@@ -0,0 +1,29 @@
<html>
<head>
<link rel="stylesheet" href="./css-demo.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="../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>