1. The HTML and CSS modules written for the Mozilla Development Network's Learn web development course
2. Eloquent JavaScript
   • It's free!
3. React

I chose the MDN course because it is well written and has a clear progression. It also includes an embedded code editor in many lessons to help explore what we have just learnt.

When I first set out to learn JavaScript, Eloquent JavaScript (the first edition) was recommeneded to me and I found it a great way to learn. It is now in its third edition and has proven to be a great resource for learners over the years.

The goal is to learn the fundamentals of modern front end web development (with React) so you can build a React project demonstrating what you know. Our time together is split up into three parts:

1. HTML & CSS
2. JavaScript
3. React

We will have to cover a lot – especially in the first four weeks. Don't worry if you find you don't understand everything fully. When we get to React this is where we will have an opportunity to build and re-inforce what we have learnt.

React is really just JavaScript, HTML, and CSS altogether.

The first two parts of the course will use free online tools that will allow us to run code and complete exercises and assigments in our browsers. The idea is to get feedback and delight immediately without having to worry about setting up a whole bunch of tools on our laptops – we'll do that later.

The assigments will be used to assess your progress in the course so I know whether to move on to next topic or continue to review the current one.

The other goal we are going to accidentally learn is how to be curious and a self-directed learner.

This course is setup much like a study group. You'll be expected to do the readings and attempt all the exercises and assignments. Don't worry if you are unable to complete an exercises or assigment. We can go through it together when we meet!

I'll be here to mentor and facilitate your learning, but it is up to you to go through the material.

1. GitHub account
2. Fork an empty HTML template
3. Chrome web browser

1. Getting started
2. HTML text fundamentals
3. Creating hyperlinks
4. Document structure

• Blocks
• Lists
• Hyperlinks

1. Marking up a letter. You can use this CodeSandbox template to get started.

2. Structuring a page of content. You can use this CodeSandbox template to get started.

Same as Week 1!

1. HTML tables overview
2. HTML tables basics
3. HTML table advanced features (optional)
4. Your first form
5. How to structure a web form
6. Basic form controls
7. More input types
8. Even more form controls

Use a CodeSandbox template to complete the following assignments:

1. Structuring planet data
2. Build a form

1. What is CSS
2. Gettings started
3. How is CSS structured
4. How CSS works

At this point you are ready for the first assigment.

5. Cascade and inheritance
6. CSS Selectors
   • Important Type, class, and ID selectors
7. The box model
8. Backgrounds and borders
9. Values and units
10. Sizing items
11. Fundamental text and font styling
12. Styling lists
13. Styling links

1. Style a biography. Fork this template and complete the assigment.
2. Typesetting a community school homepage. Fork this template and complete the assigment.

1. Create an account on JSBin

1. Intro to CSS layout
2. Normal flow
3. Flexbox
4. Grids
5. Floats

You are ready for the first assigment!

1. Chapter 1 of Eloquent Javascript
2. Chapter 2

Use this JSBin to complete the exercises

1. Chapter 2 exercises
   1. Looping a triangle
   2. FizzBuzz
   3. Chessboard

1. Layout. _Fork this template and complete the assignment.

1. Chapter 3
2. Chapter 4
3. Chapter 5
4. Chapter 6

Use this JSBin to complete the exercises

1. Chapter 3 exercises
2. Chapter 4 exercises
3. Chapter 5 exercises
4. Chapter 6 exercises

1. Build a robot

1. Finish working through our Build a robot
2. Set up up local development environments
   1. Install node and npm so we can run our JavaScript on our laptops
3. Learn about the command line
4. Probably catch up!

• Git & Github

1. Mob program Intro to React

Taking a libary that's a React component and building an app around it

• Palette Builder

1. Firebase Tutorial
2. Final code

• saving data using a serverless solution