html syntax draft

README.md

@@ -425,98 +425,3 @@
           fast
         - but, as an advanced topic, see how you can think about measuring how fast your site is,
           and making improvements that help make it faster
-- Order of concepts (and projects)
-  - Big picture: what's in the course, how it connects
-    - How the web works
-      - Start and end with the bigger picture
-      - Starts off as a big mystery
-      - Slowly becomes less of a mystery, the more you learn
-      - This course is filling in this part of the mystery: what happens in the browser?
-    - What to expect in the course
-      - How long will it take
-      - Context of programming / where this fits in a broader education
-      - What background do you need
-      - Who is this for, where will it take you
-      - More selling
-    - What can you do with HTML, CSS, and JS?
-    - Project: Small changes, Big impacts
-      - Change Text
-      - Change Color
-      - Magic sliders / inputs
-      - Changing which element moves
-      - Changing how many elements move
-  - HTML syntax
-    - tags, attributes
-    - Most common elements
-      - Most common is ... just text!
-      - h1-h6
-      - p
-      - ul, ol, li
-      - img
-    - Project / Exercise: Recipe Page
-      - Change the recipe site to use the correct elements
-      - Turn this recipe blob into a website that looks like (this)
-  - CSS syntax
-    - rules: selectors and properties
-    - style tag
-    - class and id attributes: the css selector escape hatch
-    - fonts and colors
-    - units
-    - Project: Personal Mission Statement Page
-      - What is your mission?
-  - The CSS box model
-    - everything is a box
-    - div (and span?)
-    - layout and positioning: box model
-    - spacing: margin, padding, border, width and height
-    - Exercise: Style the article page
-    - Project: Take a PDF or document, and turn it into a styled website
-  - Styling for multiple pages
-    - stylesheet
-    - anchor tag + links
-    - files and pages
-    - making a navbar
-    - sticky header or footer
-    - background
-    - considering copy / paste
-    - Exercise: Return of the Recipe Site
-  - JS Intro
-    - script tag
-    - console
-    - comment
-    - variables, properties, and methods
-    - select element with queryselector
-    - modify element
-    - add an element
-    - intro, syntax, a small DOM manipulation
-  - Forms, Inputs, and Events
-    - forms, inputs, buttons
-    - first event listeners
-    - conditional statements
-    - event.preventDefault
-    - for now, we're basically contenting ourselves with copying and pasting this syntax without
-      "really" understanding what it means
-  - More CSS effects
-    - flexbox and grid
-    - background images
-    - gradients
-    - transitions and animations
-    - pseudo-selectors: hover, visited, before, after
-    - Responsive design
-      - differences between mobile and desktop
-      - media queries
-      - breakpoints
-      - https://make-school-courses.github.io/WEB-1.0-Web-Foundations/#/Lessons/07-Responsive-Design
-  - Javascript for fancier websites
-    - loops
-    - functions
-    - objects
-    - fetch
-  - HTML elements and structure (skip?)
-    - doctype, encoding, html, body
-    - head, meta, link, title, favicon
-    - semantic elements
-      - article, section
-    - iframe
-    - blockquote
-    - code and pre

T001-The-Big-Picture/p001-Course-Intro.mdx

@@ -54,13 +54,21 @@ connect people with different devices to networks across the world.
 This course will cover the basics of HTML, CSS, and JavaScript. You'll learn some of the rules the
 browser follows, and you'll practice using what you learn to make websites.
 
-One issue: HTML, CSS, and JavaScript are _big and complicated_. There's more than 100 HTML tags to
-learn, with hundreds more attributes. There's a few hundred CSS properties and their possible
-values. JavaScript is relatively smaller, keyword-wise - there's only 64 reserved words. But, as
-you'll find when we start the JavaScript section, the language takes a lot more practice to learn to
-use well.
+**HTML** is the syntax for the structure and content of web pages. It's what a page is made of.
 
-In this course, we won't cover _everything_ about these languages. We're going to focus on what you
+**CSS** styles the page. Using CSS, you can customize everything about how the content is displayed,
+from color and font to animations and hover effects.
+
+**JavaScript** lets you write instructions for the browser to follow. We're going to focus on using
+JavaScript to make pages interactive. We'll write the steps that the browser should follow when the
+user clicks a button or fills out a form.
+
+HTML, CSS, and JavaScript are big and complicated. There's more than 100 HTML tags to learn, with
+hundreds more attributes. There's a few hundred CSS properties and their possible values. JavaScript
+is relatively smaller, keyword-wise - there's only 64 reserved words. But, as you'll find when we
+start the JavaScript section, the language takes a lot more practice to learn to use well.
+
+In this course, we won't cover everything about these languages. We're going to focus on what you
 need to know to start building creative projects. We'll also focus on concepts that give you
 _leverage_ - the skills and ideas that show up time and time again, and which make learning other
 ideas easier.

T002-HTML-syntax/HtmlDemo.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import {CodeHighlighter} from 'components/atoms';
+
+const styles = {
+  wrapper: {display: 'flex', flexFlow: 'row wrap'},
+  tab: {display: 'flex', flexFlow: 'column nowrap', margin: 16},
+  label: {
+    border: '1px solid black',
+    borderTopRadius: 2,
+    borderBottom: 'none',
+    padding: 4,
+    margin: 4,
+  },
+};
+
+const HtmlDemo = ({srcString}) => {
+  console.log(srcString);
+  return (
+    <div style={styles.wrapper}>
+      <div style={styles.tab}>
+        <div style={styles.label}>Code</div>
+        <CodeHighlighter>{srcString}</CodeHighlighter>
+      </div>
+      <div style={styles.tab}>
+        <div style={styles.label}>Result</div>
+        <iframe srcDoc={srcString}></iframe>
+      </div>
+    </div>
+  );
+};
+
+export default HtmlDemo;

T002-HTML-syntax/p001-Intro.mdx

@@ -0,0 +1,180 @@
+---
+title: 'Intro'
+slug: 'intro'
+contentType: 'TextContent'
+---
+
+import HtmlDemo from './HtmlDemo';
+
+# What is HTML?
+
+In the course intro, we learned that:
+
+- **HTML** is for the structure and content of web pages.
+- **CSS** is for styling the page.
+- **JavaScript** is for controlling interactions.
+
+HTML is a syntax for the structure and content of pages. It's made of letters and symbols that
+follow some rules.
+
+Let's see the example of what you'll build, then dig into the syntax.
+
+## An HTML Recipe Site
+
+Here's a preview of the type of site you'll build first.
+
+<Exercise title="Recipe Page Demo" contentSrc="@makeschool2/Recipe-Page-Demo" outputOnly={true} />
+
+It doesn't look incredible, but it gets the job done. When we learn CSS, we can improve how it
+looks. By the end of this topic, you'll be able to write code for this kind of site from scratch.
+
+## HTML Tags
+
+<HtmlDemo srcString="<p>This tender treat is a perfect use for any old bananas you have sitting on the counter.</p>" />
+
+The HTML turns into a paragraph of text. This an HTML **element**: a single building block of a
+webpage. Let's break down the parts of the syntax.
+
+`<p>` is an HTML **tag**. It starts an element, and says what kind of element it is - in this case,
+`p` is for a _paragraph_ element.
+
+`</p>` is a **closing tag**. It says "the paragraph ends here". Notice that it has a forward slash
+`/`. Everything between the opening tag and closing tag are inside of the element.
+
+Each **opening tag** needs to have a matching closing tag. Every `<p>` needs a `</p>`.
+
+In between the opening and closing tags is some text:
+`This tender treat is a perfect use for any old bananas you have sitting on the counter.` It's what
+actually shows up on the page.
+
+Let's learn about these elements.
+
+`h1` is a _heading level one_ tag. It means the has the effect of making the text big. `h1` is the
+biggest size heading, usually used for the title of the page. There's 6 levels of heading, with 6
+tags, representing a smaller heading as the number goes up: `h1`, `h2`, `h3`, `h4`, `h5`, `h6`.
+
+`ul` stands for _unordered list_. It makes a list. The list items inside each get a dot next to
+them.
+
+`li` is a _list item_. These are the elements in the list. Since they're between the opening and
+closing tags the `ul` element, they appear inside the same list.
+
+`img` is an _image_. It has a new syntax too: an attribute `src` for the source of the image. That
+`src` is the location where the browser can find the image itself.
+
+## More HTML Elements
+
+Here's another demo, with four new html elements.
+
+<HtmlDemo
+  srcString='
+<h1>Easy Chocolate Chip Banana Bread</h1>
+<ul>
+  <li>10 minutes prep time</li>
+  <li>50 minutes bake time</li>
+  <li>1 hr total</li>
+  <li>Makes 6 servings</li>
+</ul>
+<img src="./banana-bread.jpeg" />'
+/>
+
+<TextResponse>
+<Prompt>
+
+What are the four new HTML elements you see in this example?
+
+</Prompt>
+
+<Explanation>
+
+The four elements are:
+
+- `h1`
+- `ul`
+- `li`
+- `img`
+
+</Explanation>
+</TextResponse>
+
+## Nesting Elements
+
+## Summarizing the rules of HTML
+
+## Vocab
+
+Here's the names of the different parts of syntax.
+
+Vocab:
+
+- Tag
+- Element
+- Opening and closing tag
+- Angle bracket
+- Attribute
+- Parent element
+- Child element
+- Nesting
+
+## The most common elements
+
+- Most common elements
+  - Most common is ... just text!
+  - h1-h6
+  - p
+  - ul, ol, li
+  - img
+
+## Common Errors
+
+When you're first learning the syntax, there's a bunch of common errors.
+
+- typo for the name of an element
+- forgetting or using the wrong symbol in the wrong spot (typos for the HTML syntax)
+  - forgetting quotes around attributes
+  - wrong direction of the slash for a closing tag
+- forgetting a closing tag
+- improper nesting of tags (crossing the tags)
+
+(Fix the error game)
+
+### Tips and Strategies
+
+Formatting is your friend. The browser ignores whitespace like spaces, tabs, and newlines. It also
+ignores comments.
+
+It's _much_ easier to spot mistakes if your HTML is formatted nicely. "Nicely" means that (for the
+most part) each new tag goes on a new line, indented further than its parent element. The closing
+tag is dedented, so the nested structure is visible.
+
+Comments are also super helpful. They have a funky syntax, so it's easy to mess them up too.
+
+- Highlight and use [ctrl /] to comment out a section
+- Use comments to name sections of your page
+
+Debugging HTML using comments.
+
+- comment out the code you think is broken
+- comment it back in, piece by piece, to identify what's broken
+
+## Developer Tool: Browser Inspector
+
+Desktop browsers have a tool called the inspector or dev console that lets you see the code for a
+page.
+
+### Try it now
+
+- Somewhere on the page, secondary click (right click, two-finger click, or hold control and click)
+  to open the context menu
+- Click to open the inspector: "Inspect" in Chrome, or "Inspect Element" in Firefox or Safari.
+- See that the Inspector opens in a tray at the bottom or side of your screen:
+
+- The panel shows the HTML for all of the elements on the page
+- The highlighted element is the one that you clicked on
+- As you hover over other elements in the panel, you can see that the browser highlights the
+  corresponding elements on the page
+
+## Project: Recipe Page
+
+- Change the recipe site to use the correct elements
+- Turn this recipe blob into a website that looks like (this)

T007-Forms--Inputs--and-Events/_index.mdx → T007-Forms-Inputs-and-Events/_index.mdx

@@ -1,5 +1,5 @@
 ---
 title: 'Forms, Inputs, and Events'
-slug: 'forms--inputs--and-events'
+slug: 'forms-inputs-and-events'
 contentType: 'CourseTopic'
----
+---

T009-JS-Loops--Objects--and-Functions/_index.mdx → T009-JS-Loops-Objects-and-Functions/_index.mdx

@@ -1,5 +1,5 @@
 ---
 title: 'JS Loops, Objects, and Functions'
-slug: 'js-loops--objects--and-functions'
+slug: 'js-loops-objects-and-functions'
 contentType: 'CourseTopic'
----
+---

_index.mdx

@@ -0,0 +1,5 @@
+---
+title: 'Web 1.0: Web Foundations'
+slug: 'web-foundations'
+contentType: 'CourseSyllabus'
+---