Jan 24th: OrientationJan 28th: Variables, Strings, Math, ComparisonsFeb 4th: \`if\`, \`for\`, \`while\`, and some functionsFeb 7th: Functions & Some ObjectsFeb 11th: Functions, Objects, and ArraysFeb 14: Closures & PrototypesFeb 18: Prototypes & Classes in JavaScriptFeb 21: Classical InheritanceFeb 25th: Closure & Prototype ReviewHigher Order Functions (Filter, Map, Reduce): March 11thMarch 14: Async Functions and PromisesMarch 18th: ESNext; What You Need To KnowMarch 25th: More ES6 SyntaxMarch 28th: React Day 1April 1st: React Day 2
Webpage Foundations: an Intro to HTML and CSS
/*ignore this top line*/ frame`
<!-- This is how we make comments in HTML-->
<!DOCTYPE HTML> <!--this is the tag that defines the language of the document-->
<!-- this tag opens the HTML document-->
<head>
<!-- metadata goes in here...-->
</head>
<body> <!-- everything in here is the visible part of the webpage -->
Hello World! This is my first HTML Page!
<script></script> <!--All of your JS code will go between script tags-->
</body>
</html>
`
/*ignore this top line*/ frame`
<!DOCTYPE HTML>
<html>
<body>
<h1> Hello </h1> <!-- These are headings-->
<h2> My </h2>
<h6> Pretties </h6>
<br/> <!-- This is a break tag. Notice that it doesn't have an end tag, because it can end itself with the '/>' symbol -->
<p> This is a paragraph of text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisi nisl, facilisis vel venenatis non, sollicitudin ut diam. Vestibulum congue eu nunc non mollis. Maecenas ex nibh, mattis ac interdum sit amet, aliquam et diam. Vivamus viverra blandit magna id fermentum. Pellentesque quam urna, placerat vitae ipsum imperdiet, ullamcorper laoreet diam. Duis a eros ut turpis mattis vehicula. Aliquam erat volutpat.
</p>
And this is plain text
sad;flhwioefhlk
</body>
</html>
`
/*ignore this top line*/ frame`
<!DOCTYPE HTML>
<html>
<head>
<style>
/*put your styles here!*/
/*CSS has java-style comments*/
body {
background-color: green;
}
h1 {
color: red;
background-color: yellow;
text-align: center;
}
</style>
</head>
<body>
<h1>|_______/\\________|<br/>
|______/__\\_______|<br/>
|_____/____\\______|<br/>
|____/______\\_____|<br/>
|___/________\\____|<h1>
</body>
</html>
`
/*ignore this top line*/ frame`
<!DOCTYPE HTML>
<html>
<body>
<form>
<h3>Text Input:</h3>
<input type="text">
<h3>Radio Input:</h3>
<input type="radio"><br/>
<input type="radio"><br/>
<input type="radio"><br/>
<input type="radio">
<h3>Button Input:</h3>
<input type="button">
<h3>Submit a Form Button:</h3>
<input type="submit">
</form>
</body>
</html>
`
frame`<!DOCTYPE HTML>
<html>
<body>
<div id = "myFirstPaper">
<h1>Paper</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros lacus, scelerisque eget mi id, consectetur pretium eros. Integer a orci mi. Nam pellentesque convallis libero, in porta arcu vehicula a. Nulla eu scelerisque enim. Donec pulvinar nisi id orci ultrices, nec blandit dolor rhoncus. Donec at lorem eget lorem commodo fermentum sed non metus. Maecenas turpis mi, eleifend eget lectus et, volutpat varius dolor. In interdum magna sed orci convallis eleifend. Phasellus ultricies condimentum augue vel scelerisque. Nunc ut iaculis risus, vel condimentum neque. Pellentesque elit nulla, sagittis in tincidunt eget, viverra eu mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed ut ipsum risus. Fusce eleifend ligula sed pulvinar ornare. Fusce aliquet felis nec velit cursus, vel rutrum nisi vulputate. In hac habitasse platea dictumst.</p>
</div>
<div id="form">
<form>
<h3>How did I do?</h3>
<input type="text">
<input type="submit">
</form>
<div id = "post-form text">
<p> Maecenas accumsan accumsan suscipit. Ut vel erat ultrices, eleifend nisi ut, vehicula orci. Integer imperdiet mi ac erat mollis consequat. Duis eget ante eget lectus blandit euismod. Vestibulum rutrum id felis dictum mattis. Nunc eget laoreet est. Aenean urna urna, sodales maximus nulla et, laoreet ultricies lorem. Nullam in mauris rhoncus, tempus ipsum non, tincidunt libero. Praesent eu ipsum dapibus, tempor nunc sed, aliquet mauris. Cras pellentesque urna est. Quisque malesuada est vitae vehicula tincidunt. Donec convallis dui in mauris dignissim aliquam vel ac leo. Sed a euismod velit, nec luctus felis. Vivamus vehicula fermentum sapien, ac porttitor quam lacinia sed. Donec ac tempus leo.</p>
</div></div>
</body>
</html>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
