Course outline

What is the course based upon

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.

Goal

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 have will 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.

Expectations

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.

Week 1

Introduction to HTML

Prerequisites

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

Readings

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

Exercises

• Blocks
• Lists
• Hyperlinks

Assignments

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.

Week 2

HTML Tables and Forms

Prerequisites

Same as Week 1!

Readings

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

Assignments

Use a CodeSandbox template to complete the following assignments:

1. Structuring planet data
2. Build a form

Week 3

More than an introduction to CSS

Readings

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

Assignments

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

Week 4

CSS layout and an introduction to JavaScript

Prerequisites

1. Create an account on JSBin

Readings

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

Exercises

Use this JSBin to complete the exercises

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

Assignments

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

---

Week 5

JS functions, data structures, and higher order functions

Readings

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

Exercises

Use this JSBin to complete the exercises

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

Assignments

1. Build a robot

Week 6

Continue building a robot and development environment setup

Tasks

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!

---

Week 7

Learning Git, Github, and Soft Skills

• Git & Github

Week 8

Beginning with React

Tasks

1. Mob program Intro to React

Week 9

Continuing with React

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

• Palette Builder

Week 10

Can't stop React

1. Firebase Tutorial
2. Final code

• saving data using a serverless solution

Week 11

Probably more React

Week 12

Final project