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

76
index.html
View File

@@ -7,54 +7,46 @@
</head>
<body class="ms-Fabric">
<div class="Container">
<h1>Frontend Bootcamp</h1>
<a href="https://github.com/kenotron/bootcamp">github sources</a>
<h1>Frontend Bootcamp <a href="https://github.com/Microsoft/frontend-bootcamp">View on GitHub</a></h1>
</div>
<div class="Container">
<ul class="Tiles">
<li class="Tile Tile--intro">
<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 class="Tile">
<li class="Tile Tile--numbered">
<a target="_blank" href="./step1-01/" class="Tile-link">
Step 1 <br />
HTML/CSS/JS
</a>
</li>
<li class="Tile">
<li class="Tile Tile--numbered">
<a target="_blank" href="./step1-02/" class="Tile-link">
Step 2 <br />
Todo HTML & CSS
</a>
</li>
<li class="Tile">
<li class="Tile Tile--numbered">
<a target="_blank" href="./step1-03/" class="Tile-link">
Step 3 <br />
Todo JS
</a>
</li>
<li class="Tile">
<li class="Tile Tile--numbered">
<a target="_blank" href="./step1-04/" class="Tile-link">
Step 4 <br />
React Intro
</a>
</li>
<li class="Tile">
<li class="Tile Tile--numbered">
<a target="_blank" href="./step1-05/" class="Tile-link">
Step 5 <br />
React Components
</a>
</li>
<li class="Tile">
<li class="Tile Tile--numbered">
<a target="_blank" href="./step1-06/" class="Tile-link">
Step 6 <br />
State Driven UI
</a>
</li>
<li class="Tile">
<li class="Tile Tile--numbered">
<a target="_blank" href="./step1-07/" class="Tile-link">
Step 7 <br />
UI Driven State
</a>
</li>
@@ -64,69 +56,60 @@
<ul class="Tiles">
<li class="Tile Tile--intro">
<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 class="Tile">
<li class="Tile Tile--numbered">
<div class="Tile-link">
Step 1<br />
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>
</li>
<li class="Tile">
<li class="Tile Tile--numbered">
<div class="Tile-link">
Step 2<br />
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>
</li>
<li class="Tile">
<li class="Tile Tile--numbered">
<div class="Tile-link">
Step 3<br />
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>
</li>
<li class="Tile">
<li class="Tile Tile--numbered">
<div class="Tile-link">
Step 4<br />
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>
</li>
<li class="Tile">
<li class="Tile Tile--numbered">
<div class="Tile-link">
Step 5<br />
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>
</li>
<li class="Tile">
<li class="Tile Tile--numbered">
<div class="Tile-link">
Step 6<br />
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>
</li>
<li class="Tile">
<li class="Tile Tile--numbered">
<div class="Tile-link">
Step 7<br />
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>
</li>
<li class="Tile">
<li class="Tile Tile--numbered">
<div class="Tile-link">
Step 8<br />
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>
</li>
<li class="Tile">
<li class="Tile Tile--numbered">
<div class="Tile-link">
Step 9<br />
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>
</li>
</ul>
@@ -135,8 +118,9 @@
<ul class="Tiles">
<li class="Tile Tile--intro">
<h2>Playground</h2>
Build your app here!
</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>
</div>
</body>