Web Development 1: Guided Project - Part 4
If you have any questions about the lesson plan or tutorial content, please post in the #ideaspark_webdev channel in slack.
Contents
Preparation
- Please be prepared ahead of time by going through the entire lesson plan before the session.
- It's highly recommended that you also go through the student tutorial and practice each step on your own Cloud9 account.
Materials
The students should have the following in their folders.
- CSS Cheat Sheet (color, 2-sided)
- CSS Color Names Cheat Sheet (color)
- HTML Elements Cheat Sheet (b&w)
Session Setup
- Load the Client Profiles (part 4) page on each laptop (this link is also on the wiki homepage under "Week 6 Quick Links")
Icebreaker/Review
Begin the session with a quick icebreaker activity. Review with students what they learned last week.
Catch-up
If students have not yet completed the last lesson, have them do so now.
Next requirements from the client
|
The student tutorial will not work as intended on mobile phones. Tell students they need to follow the steps in a tab on their laptop. |
Getting started
- Tell students to open their laptops and look at the Client Profiles (part 4) page. Have them click on their client's name to see the email from their client.
- Instruct students to download email attachments so that they can re-upload them to Cloud9.
- Once they've read the requirements, they should click the Get Started button to begin the tutorial.
|
|
There have been issues with students losing work on Cloud 9. Please read the Cloud9 Troubleshooting article for tips on how to avoid this. |
For your convenience, here is what students should have on their webpage by each step:
|
TO-DO: lesson milestones |
Make sure students are using the content provided by their "clients", and not the content from the tutorial examples. To help with this, copy-and-paste functionality has been disabled in the tutorial in places where they should be typing themselves. Students can, however, copy-and-paste from the client emails.
Extra Time
If students complete the tutorial early, have them try one of the following online games:
- Erase All Kittens (Fun game to learn HTML basics)
- CSS Diner (Teaches CSS selectors)
- Flexbox Froggy (Teaches CSS flexbox)
Notes
- Some steps on the tutorial require scrolling. If the student is missing something or wondering what to do next, make sure they've scrolled correctly on each step.