microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-07-12 15:18:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

Rewrite of Day 1 to use modern React (#294)

Browse Source 
* update to hooks

* more class to function

* cleanup

* finish ts final

* update html lesson

* add lessons page

* clean up

* move getters into context

* adding type

* fix bug

* step 5 cleanup

* init final pass

* text tweak

* fix ternaries

* readme cleanup

* fixed root readme
This commit is contained in:
Micah Godbolt
2022-01-13 09:22:50 -08:00
committed by GitHub
parent 4998c158d2
commit 7cea32428e
60 changed files with 923 additions and 929 deletions
Download Patch File Download Diff File Expand all files Collapse all files
step1-01/demo/index.html
+49
View File
@@ -5,6 +5,9 @@
<link rel="stylesheet" href="./style.css" />
<style>
body {
padding: 10px;
}
hr {
margin: 40px;
}
@@ -12,6 +15,48 @@
</head>
<body>
<section>
<h2><a href="https://developer.mozilla.org/en-US/docs/Glossary/semantics" target="_blank" >Why Semantic HTML</a></h2>
<div>
<h3>Semantic</h3>
<p>This is a paragraph about why semantic HTML is important.</p>
<h4>A unordered list</h4>
<ul>
<li>Unordered item 1</li>
<li>Another unordered item</li>
<li>and another unordered item</li>
</ul>
<h4>An ordered list</h4>
<ol>
<li>Ordered item 1</li>
<li>Another ordered item</li>
<li>and another ordered item</li>
</ol>
<h4>Next up</h4>
<a href="https://fluidframework.com/">Fluid Framework</a>
</div>
<br/><br/>
<div>
<div>Non Semantic</div>
<div>This is a paragraph about why semantic HTML is important.</div>
<div>A unordered list</div>
<div>
<div>Unordered item 1</div>
<div>Another unordered item</div>
<div>and another unordered item</div>
</div>
<div>An ordered list</div>
<div>
<div>Ordered item 1</div>
<div>Another ordered item</div>
<div>and another ordered item</div>
</div>
<div>Next up</div>
<div onClick="location.href='https://fluidframework.com/'">Fluid Framework</a>
</div>
<br/>
</section>
<hr>
<section>
<h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata">Document Metadata</a></h2>
<pre>
@@ -173,6 +218,10 @@
<label for="name">Enter your name: </label>
<input type="text" name="name" id="name" required />
</div>
<div>
<label for="name">Enter your password: </label>
<input type="password" name="password" id="password" required />
</div>
<div>
<div>
<input type="checkbox" id="option1" name="option1" checked />
step1-01/demo/README.md → step1-01/lesson/README.md
+5 -7
View File
@@ -1,4 +1,6 @@
# Step 1.1 - Introduction to HTML (Demo)
# Step 1.1 - Introduction to HTML
[Demo](../demo/) | [Exercise](../exercise/)
## How the web works
@@ -59,13 +61,9 @@ The [HTML demo page](https://microsoft.github.io/frontend-bootcamp/step1-01/demo
</header>
<main>
<h2>About This Workshop</h2>
<p>
The first day provides an introduction to the fundamentals of the web: HTML, CSS and JavaScript.
</p>
<p>The first day provides an introduction to the fundamentals of the web: HTML, CSS and JavaScript.</p>
<img src="../../assets/todo_screenshot.jpg" alt="Picture of the Todo App we will build" />
<p>
On the second day we'll dive into more advanced topics like TypeScript, testing, and state management.
</p>
<p>On the second day we'll dive into more advanced topics like TypeScript, testing, and state management.</p>
</main>
<footer>
<h2>Get More Information</h2>
step1-01/lesson/index.html
+11
View File
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme" data-src="./README.md"></div>
<script src="../../assets/scripts.js"></script>
</body>
</html>
step1-01/lesson/src/index.tsx
View File