move and rewrite intro, add images

T001-Course-Intro/p001-the-big-picture.mdx

@@ -13,8 +13,8 @@ In the first few pages, you'll learn what this course covers, who it's for, and
 
 ## The Big Picture
 
-We'll start from a simplified model of how the web works, and connect that to what you'll learn in
-this course.
+Let's start with a simplified model of how the web works. Then we'll connect that to what you'll
+learn in this course.
 
 ## The Web You Know
 
@@ -33,7 +33,7 @@ of the core technologies come together to make those experiences work.
 
 Let's take our first look at how the web works.
 
-[client and server as squares with an arrow connecting them]()
+![client and server as squares with an arrow connecting them](./client-server.png)
 
 When you pull up a website, your computer or phone connects to another computer through a network.
 It makes a request to that computer for some files - the website you want to see. The other computer
@@ -42,16 +42,55 @@ It makes a request to that computer for some files - the website you want to see
 Front end development is about the files that get shown. Web programmers learn how to put the right
 stuff in those files so that the users of the site see what the programmers want.
 
-What's in those files? Primarily, HTML, CSS, and JavaScript (though as we'll see, there's sometimes
-more too). Your web browser - the program on your computer or phone that you use to view websites,
-like Safari, Opera, Firefox, or Chrome - speaks HTML, CSS, and JavaScript.
+What's in those files? Primarily, HTML, CSS, and JavaScript (though as we'll see, there's more
+too!). Your web browser - the program on your computer or phone that you use to view websites, like
+Safari, Opera, Firefox, or Chrome - speaks HTML, CSS, and JavaScript.
+
+![browsers make a request to a server and get HTML, CSS, and JavaScript in response](./browsers-request-response.png)
 
 When the browser sees files written in these web languages, it follows a known set of rules for
 displaying the files as a website. Front end developers learn those rules, so that they can write
 HTML, CSS, and JavaScript that the browser understands and displays the way they want.
 
-Reality has a surprising amount of detail.
+![browsers translate HTML, CSS, and JavaScript into a web page](./browsers-translate-into-page.png)
+
+In this course you'll learn what the browser does with HTML, CSS, and JavaScript files when it loads
+a page. Knowing that, you'll be able to build websites like the ones you've seen around the
+internet - pages with infinite scrolling feeds, with article formats, with cool-looking layouts,
+with inputs that respond to the user's actions.
+
+**Reality has a surprising amount of detail.**
+
+The web is much more complicated than the picture we've shown here! Hardware and software have to
+work together to connect people with different devices to networks across the world. Browsers do
+tons of complicated processing under the hood.
+
+But, this picture should be enough for now, enough for us to get started.
+
+## How is the course organized?
+
+We're so excited that you're here to learn.
+
+If you look at the navigation sidebar, you'll see that the course is split into 10 different
+_topics_. Each topic covers introduces new material, lets you practice, and has an opportunity to
+build something.
+
+Since HTML, CSS, and JavaScript are all connected, the content follows a _spiral_. Instead of
+learning all of HTML, then all CSS, then all JavaScript, the course winds back and forth between the
+languages.
+
+Each topic in the course builds on the others. The course assumes that you'll move through the
+topics one after the other. But, if you already know some of the early material, or you're curious
+about what's at the end, you can browse ahead too.
+
+If you already know some of the concepts:
+
+- You can skip ahead
+- The material builds on itself. You need to know the previous content to move forward
+- The projects and review questions are a quick way to check your own knowledge
+- So, one strategy is to just do the projects, questions, and exercises. Then, go back through the
+  other materials when you get stuck
 
-The web is much more complicated than this! It's more complicated than could be covered in a single
-course, or than can fit in any one person's head! Hardware and software have to work together to
-connect people with different devices to networks across the world.
+If you are just getting started with the concepts - amazing! You can click through each page one by
+one. In the lessons, you'll learn what you need for the exercises and projects, where you'll get a
+chance to put what you learn into practice.

T001-Course-Intro/p002-what-the-course-is-about.mdx

@@ -0,0 +1,95 @@
+---
+title: 'What The Course Is About'
+slug: 'what-the-course-is-about'
+contentType: 'TextContent'
+---
+
+# What The Course Is About
+
+![browsers translate HTML, CSS, and JavaScript into a web page](./browsers-translate-into-page.png)
+
+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.
+
+**HTML** is the syntax for the structure and content of web pages. It's what a page is made of.
+
+**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.
+
+## Which concepts will we focus on?
+
+- HTML and CSS Syntax
+- CSS Selectors
+- JavaScript fundamentals
+- Developer tools, skills, habits, and mindset
+
+Why these?
+
+**Syntax** means the rules of a language. In programming, those rules determine what code is valid.
+Learning the syntax for HTML and CSS is the key for building websites, both in this course and in
+the future. It will let you read code to understand how it works, write code of your own, and
+recognize and fix errors. Many beginner errors are syntax errors. The syntax also gives you a
+framework for learning and understanding more. Once you've learned how HTML tags work in general,
+learning any individual tag will be easier.
+
+This will also help with 'learning a syntax' in general. As you grow as a developer, you'll end up
+learning lots of different syntaxes.
+
+**CSS Selectors**, while somewhat arcane, give you a ton of power. They help you think about the
+structure of your HTML. They let you target specific sets of elements with particular styles.
+JavaScript also lets programmers use CSS selectors to find elements on the page for manipulation.
+
+**JavaScript fundamentals** includes core programming concepts like variables, data types,
+conditional statements, loops, and functions, as well as topics that are particular to web
+development: selecting & modifying elements, responding to events, and sending requests to the
+server. We're leaving a lot out - there's a lot more JavaScript to learn once you are comfortable
+with these concepts. We're focused on these because they're common programming patterns that set you
+up to learn other programming languages, and because with these skills in hand, you can build any
+website (that doesn't do server stuff).
+
+**Developer tools** power up your learning process, and they speed up your development workflow.
+Professional developers use tools to understand, debug, and improve websites - or to see how another
+developer built something.
+
+## What this course doesn't cover
+
+- Backend programming
+- JavaScript frameworks
+- Design
+
+This course about the client side of how the web works, not the server side.
+
+![client and server illustration, with client side emphasized](./client-server-with-client-emphasized.png)
+
+We're not going to talk (much) about what happens on the server or in the network. We'll make sure
+to cover enough so that you can publish your sites so other people can see. However, there's some
+features that you won't be able to build until you've learned more about backend programming -
+programming for the server.
+
+In this course, we're also not going to cover everything about JavaScript - not even all of the core
+language! JavaScript more than a language - it's also a huge ecosystem of libraries, tools, and
+other people's code. We're not going to learn React, Vue, JQuery, or Angular, or any of the hundreds
+of other JavaScript tools you might or might not have heard of. As a frontend developer, you may end
+up learning these tools down the road. Using any of them effectively requires a foundation of the
+basics, which is what we're practicing here.
+
+Making great websites takes knowledge, skill, and practice. It also takes _taste_. What color to
+use? How big should the button be? What should the title say? Where should the link go? These are
+hard questions, and we're not going to focus on them in this course. We want you to explore your
+creativity and build sites that are beautiful, funny, effective, fun, important, and useful - and
+that lots of people use! But, we won't cover design in this course. We'll learn enough of the tools
+underneath that you should be able to build what you (or someone else) can think of and draw out.

T001-Course-Intro/p003-who-is-this-for.mdx

@@ -0,0 +1,52 @@
+---
+title: 'Who Is This Course For'
+slug: 'who-is-it-for'
+contentType: 'TextContent'
+---
+
+# Who Is This Course For
+
+This course is for the full picture:
+
+- theoretical underpinning: what's happening under the hood
+- practical application: exercises, hands-on projects
+- problem solving: debugging, recognizing and solving errors
+- creative projects: building projects of your own design (while having guidelines and guardrails to
+  keep you on track)
+
+- context: where does this knowledge fit into the bigger picture of CS, and your journey?
+- community: sharing journey with others, making friends, having mentors
+- credit and recognition: college credit, social and professional recognition of your skill
+
+## Background Knowledge
+
+This course doesn't have any formal prerequisites, so you don't need any other courses before you
+start this one.
+
+- **Reading English** The course materials are in English. To complete the course, you'll need to be
+  able to read English.
+- **Internet Access** You don't need to have a super fast internet connection to complete the
+  course, but the materials and assignments are online, so the course will depend internet
+  connection.
+- **Typing** You don't need to be a super-fast typer, but you should be able to touch-type, so that
+  typing doesn't slow you down when you're working on the assignments.
+
+The course also assumes a familiarity with computers and the Internet. You don't need to know how
+computers or the web works in detail, but when you build websites for the course projects, the
+course assumes you've spent some time browsing the web and using computers.
+
+## Who this course isn't for
+
+You might not need this course if...
+
+- You only want to know _about_ HTML, CSS, and JS, but you don't want to know how to use them to
+  build websites
+- You want to build a specific website right now. (Instead, use a site builder like Squarespace,
+  Wix, or Webflow.)
+- You want to build a blog, or write content online. (Use a tool like Wordpress, Ghost, or Medium
+  instead.)
+- You already know HTML, JavaScript, and CSS. If you've already built projects like the ones in this
+  course, you might want a more advanced course. (Though, feel free to use this material as a
+  reference or a refresher).
+
+## How long will the course take?