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

UI polish for the home page

Browse Source
This commit is contained in:
Mike Wheaton
2019-02-25 14:06:41 -08:00
parent 2922fd3eb3
commit 28444f3d31
2 changed files with 91 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
assets/shared.css
View File

@@ -9,11 +9,24 @@ html {
body { body {
background-color: #f3f2f1; background-color: #f3f2f1;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjxzdmcgIHdpZHRoPSI2MDAiICBoZWlnaHQ9IjYwMCIgIHZpZXdCb3g9IjAgMCA2MDAgNjAwIiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwMCwzMDApIj4gICAgPHBhdGggZD0iTTEyMi42LC0xMTQuOEMxNzAuMywtNzUsMjI4LjEsLTM3LjUsMjM0LjQsNi4yQzI0MC42LDUwLDE5NS4zLDk5LjksMTQ3LjYsMTI5LjZDOTkuOSwxNTkuMyw1MCwxNjguNiw0LjcsMTYzLjlDLTQwLjUsMTU5LjIsLTgxLjEsMTQwLjQsLTExNS43LDExMC43Qy0xNTAuNCw4MS4xLC0xNzkuMiw0MC41LC0xOTMuOCwtMTQuNkMtMjA4LjQsLTY5LjgsLTIwOC45LC0xMzkuNSwtMTc0LjIsLTE3OS40Qy0xMzkuNSwtMjE5LjIsLTY5LjgsLTIyOS4xLC0xNi4xLC0yMTNDMzcuNSwtMTk2LjgsNzUsLTE1NC42LDEyMi42LC0xMTQuOFoiIGZpbGw9IiMzZDk3ZTMiIC8+ICA8L2c+PC9zdmc+); }
background-attachment: fixed;
background-position: 50% 50%; a {
background-repeat: no-repeat; color: #0078d4;
background-size: 900px 740px; text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
margin: 0;
}
h1 a {
font-size: 16px;
font-weight: 400;
} }
.Container { .Container {
@@ -30,6 +43,7 @@ body {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
counter-reset: steps;
} }
.Tile { .Tile {
@@ -38,6 +52,9 @@ body {
box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108); box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
opacity: 0.96; opacity: 0.96;
transition: all 0.15s linear; transition: all 0.15s linear;
position: relative;
overflow: hidden;
padding: 12px;
} }
.Tile:not(.Tile--intro):hover { .Tile:not(.Tile--intro):hover {
@@ -45,15 +62,39 @@ body {
opacity: 1; opacity: 1;
} }
.Tile.Tile--numbered::after {
counter-increment: steps;
content: counter(steps);
position: absolute;
left: -20px;
bottom: -20px;
font-size: 220px;
line-height: 188px;
color: #f3f2f1;
z-index: 1;
}
.Tile-link { .Tile-link {
align-items: center; align-items: center;
text-align: center;
color: #323130; color: #323130;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 148px; height: 148px;
justify-content: center; justify-content: center;
text-align: center;
text-decoration: none; text-decoration: none;
position: relative;
font-size: 24px;
font-weight: 200;
z-index: 2;
}
a.Tile-link {
color: #0078d7;
}
a.Tile-link:hover {
text-decoration: underline;
} }
.Tile-link i { .Tile-link i {
@@ -62,6 +103,20 @@ body {
color: #605e5c; color: #605e5c;
} }
.Tile-links {
font-size: 16px;
color: #605e5c;
}
.Tile-links a {
text-decoration: none;
color: #0078d4;
}
.Tile-links a:hover {
text-decoration: underline;
}
.Tile--intro { .Tile--intro {
grid-column: span 2; grid-column: span 2;
padding: 20px; padding: 20px;

76
index.html
View File

@@ -7,54 +7,46 @@
</head> </head>
<body class="ms-Fabric"> <body class="ms-Fabric">
<div class="Container"> <div class="Container">
<h1>Frontend Bootcamp</h1> <h1>Frontend Bootcamp <a href="https://github.com/Microsoft/frontend-bootcamp">View on GitHub</a></h1>
<a href="https://github.com/kenotron/bootcamp">github sources</a>
</div> </div>
<div class="Container"> <div class="Container">
<ul class="Tiles"> <ul class="Tiles">
<li class="Tile Tile--intro"> <li class="Tile Tile--intro">
<h2>Day 1</h2> <h2>Day 1</h2>
Setup, HTML, CSS, Javascript and Intro to React Get set up and learn to build a todo app using HTML, CSS, JavaScript, and React.
</li> </li>
<li class="Tile"> <li class="Tile Tile--numbered">
<a target="_blank" href="./step1-01/" class="Tile-link"> <a target="_blank" href="./step1-01/" class="Tile-link">
Step 1 <br />
HTML/CSS/JS HTML/CSS/JS
</a> </a>
</li> </li>
<li class="Tile"> <li class="Tile Tile--numbered">
<a target="_blank" href="./step1-02/" class="Tile-link"> <a target="_blank" href="./step1-02/" class="Tile-link">
Step 2 <br />
Todo HTML & CSS Todo HTML & CSS
</a> </a>
</li> </li>
<li class="Tile"> <li class="Tile Tile--numbered">
<a target="_blank" href="./step1-03/" class="Tile-link"> <a target="_blank" href="./step1-03/" class="Tile-link">
Step 3 <br />
Todo JS Todo JS
</a> </a>
</li> </li>
<li class="Tile"> <li class="Tile Tile--numbered">
<a target="_blank" href="./step1-04/" class="Tile-link"> <a target="_blank" href="./step1-04/" class="Tile-link">
Step 4 <br />
React Intro React Intro
</a> </a>
</li> </li>
<li class="Tile"> <li class="Tile Tile--numbered">
<a target="_blank" href="./step1-05/" class="Tile-link"> <a target="_blank" href="./step1-05/" class="Tile-link">
Step 5 <br />
React Components React Components
</a> </a>
</li> </li>
<li class="Tile"> <li class="Tile Tile--numbered">
<a target="_blank" href="./step1-06/" class="Tile-link"> <a target="_blank" href="./step1-06/" class="Tile-link">
Step 6 <br />
State Driven UI State Driven UI
</a> </a>
</li> </li>
<li class="Tile"> <li class="Tile Tile--numbered">
<a target="_blank" href="./step1-07/" class="Tile-link"> <a target="_blank" href="./step1-07/" class="Tile-link">
Step 7 <br />
UI Driven State UI Driven State
</a> </a>
</li> </li>
@@ -64,69 +56,60 @@
<ul class="Tiles"> <ul class="Tiles">
<li class="Tile Tile--intro"> <li class="Tile Tile--intro">
<h2>Day 2</h2> <h2>Day 2</h2>
UI Fabric and Redux Deep Dive Take your todo app to the next level with TypeScript, Fabric React, and Redux.
</li> </li>
<li class="Tile"> <li class="Tile Tile--numbered">
<div class="Tile-link"> <div class="Tile-link">
Step 1<br />
Typescript Basics Typescript Basics
<div><a target="_blank" href="./step2-01/demo/">demo</a> | <a target="_blank" href="./step2-01/exercise/">exercise</a></div> <div class="Tile-links"><a target="_blank" href="./step2-01/demo/">demo</a> | <a target="_blank" href="./step2-01/exercise/">exercise</a></div>
</div> </div>
</li> </li>
<li class="Tile"> <li class="Tile Tile--numbered">
<div class="Tile-link"> <div class="Tile-link">
Step 2<br />
UI Fabric UI Fabric
<div><a target="_blank" href="./step2-02/demo/">demo</a> | <a target="_blank" href="./step2-02/exercise/">exercise</a></div> <div class="Tile-links"><a target="_blank" href="./step2-02/demo/">demo</a> | <a target="_blank" href="./step2-02/exercise/">exercise</a></div>
</div> </div>
</li> </li>
<li class="Tile"> <li class="Tile Tile--numbered">
<div class="Tile-link"> <div class="Tile-link">
Step 3<br />
Theming and Styling Theming and Styling
<div><a target="_blank" href="./step2-03/demo/">demo</a> | <a target="_blank" href="./step2-03/exercise/">exercise</a></div> <div class="Tile-links"><a target="_blank" href="./step2-03/demo/">demo</a> | <a target="_blank" href="./step2-03/exercise/">exercise</a></div>
</div> </div>
</li> </li>
<li class="Tile"> <li class="Tile Tile--numbered">
<div class="Tile-link"> <div class="Tile-link">
Step 4<br />
Testing with jest Testing with jest
<div><a target="_blank" href="./step2-04/demo/">demo</a> | <a target="_blank" href="./step2-04/exercise/">exercise</a></div> <div class="Tile-links"><a target="_blank" href="./step2-04/demo/">demo</a> | <a target="_blank" href="./step2-04/exercise/">exercise</a></div>
</div> </div>
</li> </li>
<li class="Tile"> <li class="Tile Tile--numbered">
<div class="Tile-link"> <div class="Tile-link">
Step 5<br />
Redux: Reducers Redux: Reducers
<div><a target="_blank" href="./step2-05/demo/">demo</a> | <a target="_blank" href="./step2-05/exercise/">exercise</a></div> <div class="Tile-links"><a target="_blank" href="./step2-05/demo/">demo</a> | <a target="_blank" href="./step2-05/exercise/">exercise</a></div>
</div> </div>
</li> </li>
<li class="Tile"> <li class="Tile Tile--numbered">
<div class="Tile-link"> <div class="Tile-link">
Step 6<br />
Redux: Dispatch Actions Redux: Dispatch Actions
<div><a target="_blank" href="./step2-06/demo/">demo</a> | <a target="_blank" href="./step2-06/exercise/">exercise</a></div> <div class="Tile-links"><a target="_blank" href="./step2-06/demo/">demo</a> | <a target="_blank" href="./step2-06/exercise/">exercise</a></div>
</div> </div>
</li> </li>
<li class="Tile"> <li class="Tile Tile--numbered">
<div class="Tile-link"> <div class="Tile-link">
Step 7<br />
Redux: Connect to UI Redux: Connect to UI
<div><a target="_blank" href="./step2-07/demo/">demo</a> | <a target="_blank" href="./step2-07/exercise/">exercise</a></div> <div class="Tile-links"><a target="_blank" href="./step2-07/demo/">demo</a> | <a target="_blank" href="./step2-07/exercise/">exercise</a></div>
</div> </div>
</li> </li>
<li class="Tile"> <li class="Tile Tile--numbered">
<div class="Tile-link"> <div class="Tile-link">
Step 8<br />
Redux: Combine Reducers Redux: Combine Reducers
<div><a target="_blank" href="./step2-08/demo/">demo</a> | <a target="_blank" href="./step2-08/exercise/">exercise</a></div> <div class="Tile-links"><a target="_blank" href="./step2-08/demo/">demo</a> | <a target="_blank" href="./step2-08/exercise/">exercise</a></div>
</div> </div>
</li> </li>
<li class="Tile"> <li class="Tile Tile--numbered">
<div class="Tile-link"> <div class="Tile-link">
Step 9<br />
Redux: Service Calls Redux: Service Calls
<div><a target="_blank" href="./step2-09/demo/">demo</a> | <a target="_blank" href="./step2-09/exercise/">exercise</a></div> <div class="Tile-links"><a target="_blank" href="./step2-09/demo/">demo</a> | <a target="_blank" href="./step2-09/exercise/">exercise</a></div>
</div> </div>
</li> </li>
</ul> </ul>
@@ -135,8 +118,9 @@
<ul class="Tiles"> <ul class="Tiles">
<li class="Tile Tile--intro"> <li class="Tile Tile--intro">
<h2>Playground</h2> <h2>Playground</h2>
Build your app here!
</li> </li>
<li class="Tile"><a target="_blank" href="/playground/" class="Tile-link">Playground</a></li> <li class="Tile Tile--unnumbered"><a target="_blank" href="/playground/" class="Tile-link">Playground</a></li>
</ul> </ul>
</div> </div>
</body> </body>