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
Files
21760e7c8d2cd616004b0c403e732df2e5817fd6
frontend-bootcamp/index.html

179 lines
7.5 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css" />
<link rel="stylesheet" href="./assets/shared.css" />
<script type="text/javascript">
// prettier-ignore
var appInsights=window.appInsights||function(a){
function b(a){c[a]=function(){var b=arguments;c.queue.push(function(){c[a].apply(c,b)})}}var c={config:a},d=document,e=window;setTimeout(function(){var b=d.createElement("script");b.src=a.url||"https://az416426.vo.msecnd.net/scripts/a/ai.0.js",d.getElementsByTagName("script")[0].parentNode.appendChild(b)});try{c.cookie=d.cookie}catch(a){}c.queue=[];for(var f=["Event","Exception","Metric","PageView","Trace","Dependency"];f.length;)b("track"+f.pop());if(b("setAuthenticatedUserContext"),b("clearAuthenticatedUserContext"),b("startTrackEvent"),b("stopTrackEvent"),b("startTrackPage"),b("stopTrackPage"),b("flush"),!a.disableExceptionTracking){f="onerror",b("_"+f);var g=e[f];e[f]=function(a,b,d,e,h){var i=g&&g(a,b,d,e,h);return!0!==i&&c["_"+f](a,b,d,e,h),i}}return c
}({
instrumentationKey: "6ad37ae0-c4ab-4739-925c-1e2773c31f17"
});
// prettier-ignore
window.appInsights=appInsights,appInsights.queue&&0===appInsights.queue.length&&appInsights.trackPageView();
</script>
</head>
<body class="ms-Fabric">
<div class="Container">
<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>
Get set up and learn to build a todo app using HTML, CSS, JavaScript, and React.
</li>
<li class="Tile Tile--numbered">
<a target="_blank" href="./step1-01/" class="Tile-link">
HTML/CSS/JS
</a>
</li>
<li class="Tile Tile--numbered">
<div class="Tile-link">
Todo HTML & CSS
<div class="Tile-links">
<a target="_blank" href="./step1-02/demo/">demo</a> | <a target="_blank" href="./step1-02/exercise/">exercise</a> |
<a target="_blank" href="./step1-02/final/">final</a>
</div>
</div>
</li>
<li class="Tile Tile--numbered">
<div class="Tile-link">
Todo JS
<div class="Tile-links">
<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>
</div>
</li>
<li class="Tile Tile--numbered">
<div class="Tile-link">
React Intro
<div class="Tile-links">
<a target="_blank" href="./step1-04/demo/">demo</a> | <a target="_blank" href="./step1-04/final/">final</a>
</div>
</div>
</li>
<li class="Tile Tile--numbered">
<div class="Tile-link">
React Components
<div class="Tile-links">
<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>
</div>
</li>
<li class="Tile Tile--numbered">
<div class="Tile-link">
State-Driven UI
<div class="Tile-links">
<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>
</div>
</li>
<li class="Tile Tile--numbered">
<div class="Tile-link">
UI-Driven State
<div class="Tile-links">
<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>
</div>
</li>
</ul>
</div>
<div class="Container">
<ul class="Tiles">
<li class="Tile Tile--intro">
<h2>Day 2</h2>
Take your todo app to the next level with TypeScript, Fabric React, and Redux.
</li>
<li class="Tile Tile--numbered">
<div class="Tile-link">
Typescript Basics
<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 Tile--numbered">
<div class="Tile-link">
UI Fabric
<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 Tile--numbered">
<div class="Tile-link">
Theming and Styling
<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 Tile--numbered">
<div class="Tile-link">
Testing with jest
<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 Tile--numbered">
<div class="Tile-link">
Redux: Reducers
<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 Tile--numbered">
<div class="Tile-link">
Redux: Dispatch Actions
<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 Tile--numbered">
<div class="Tile-link">
Redux: Connect to UI
<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 Tile--numbered">
<div class="Tile-link">
Redux: Combine Reducers
<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 Tile--numbered">
<div class="Tile-link">
Redux: Service Calls
<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>
</div>
<div class="Container">
<ul class="Tiles">
<li class="Tile Tile--intro">
<h2>Playground</h2>
Build your app here!
</li>
<li class="Tile Tile--unnumbered"><a target="_blank" href="/playground/" class="Tile-link">Playground</a></li>
</ul>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink