Lesson Plan wk 2

slide show is here

Agenda

• Homework Review
• Organizing Your Code
• Splitting User Stories
• Basic Collaboration
• Software Check
• Homework Launch

---

Homework Review

Don't be shy! If you had trouble with something, so did at least 5 of your classmates.

TOP

---

Organizing Your Code

Before moving on to any more code, let's take a few minutes to organize all the folders of code on your computers. A very practical and boring (but super important!) skill you'll need to succeed in this class is organizing and managing many many folders of code. To help you get started we'll take you through a few steps to organize what you worked on over the last week, but it's up to you to keep it organized after today!

1. Go to the /Documents folder of your computer
2. Create a new folder called /hacking-my-future
3. In that new folder create another folder called /module-1
4. Move everything you've worked on so far into that folder
5. You're done ... for now! Every time you clone another repository or create a new folder, be sure to put it where it belongs

If you've done this correctly your folder should look something like this like this:

/Documents
|- /hacking-my
|  |- /module-1
.     |- /HTML-CSS-GitHub
.     |- /my-first-repo
.     .

TOP

---

Splitting User Stories

In last week's project, we gave you a table that told you how to develop your project in little pieces. This week's project asks you to split it up yourself!

The first step to mastering the split is to practice asking and answering these questions:

1. What are the different components on the user interface?
2. What interaction does each component enable a user to have with your website?
3. How do these stories depend on each other?
4. What is a logical order for building these stories?

Let's see these questions in action with a simple website:

• tomato timer!

Here are some possible answers to these questions based on the Tomato Timer (but not the only answers! there are many ways to split a project):

1. What are the different components on the user interface?
   • There is a red button that says "stop"
   • There is a white button that says "reset"
   • There are some numbers
   • There is a green button that says "start"
2. What interaction does each component enable a user to have with your website?
   • A user can stop the count-down without resetting the time
   • A user can stop the count-down and set it back to 25:00
   • A user can see how much time is left
   • A user can start (or restart!) the count-down
3. How do these stories depend on each other?
   • You can't stop a count-down unless it is started
   • It is not practical to be able to reset the count-down every time you want to stop it
   • You can see how much time is left without being able to start the timer (even if this isn't very useful :)
   • There is no point to have a count-down until there is a time to see
4. What is a logical order for building these stories?
   1. A user can see how much time is left
   2. A user can start (or restart!) the count-down
   3. A user can stop the count-down without resetting the time
   4. A user can stop the count-down and set it back to 25:00

Here's another worked example to study for inspiration

TOP

---

Basic Collaboration

Split into groups of 2-3 and build a simple website with these pieces:

• A main body with dummy content
• A footer with the all names of the teammates
• A header with the title
• An aside with the menu

You'll build this project collaboratively using Pull Requests! This means that each member of your team will build one of the bullet points above and send a PR to the repository owner to accept their code.

As you split up the work and watch your site come together, practice asking and answering these questions as a team:

1. What are the different components on the user interface?
2. What interaction does each component enable a user to have with your website?
3. How do these stories depend on each other?
4. What is a logical order for building these stories?

TOP

---

Software Check

What is linting and why is it necessary?

Let's all install:

• Prettier, it makes your code pretty every time you save.
• LiveServer, it automatically refreshes the browser whenever you change your project.

TOP

---

Homework Launch

Are there any questions on how to start this week's project?

TOP