Skip to content

program-outline.md

Latest commit

 

History

History
64 lines (39 loc) · 3.67 KB

program-outline.md

File metadata and controls

64 lines (39 loc) · 3.67 KB

Program Outline

In this document, I will outline the resources I use to teach Introduction to Web Development and Design for both preteens and youth. You are free to use the code in this repository however you like to aid you in your program planning. Good luck!

Folder and File Structure

Web D&D Folder

  • index.html: Used for the 1st day to demonstrate how to use HTML
  • style.css: Used for the 2nd day to demonstrate CSS
  • script.js: Used for the 3rd - 5th/6th day to demonstrate JavaScript
  • other.html: Briefly show the youth (not preteens) how to add a link to another HTML file
  • cat.jpg and penguin.jpg: Briefly show the preteens and youth how to put an image on their website

Activity Instructions Folder

This folder holds the activities I give to the youth at the end of each day to practice the knowledge they just learned.

  • CSS 1.md: CSS activity for youth only
  • JS 1.md to JS 4.md: JavaScript activities for youth (not preteens, usually too hard for them)
  • instructions.css and instructions.js: Answers to activities
  • JS 5.md: Final JS activity. Can be challenging for the youth so I usually only use it in case I have extra time

The HTML activity can be found in index.html in the Web D&D folder.

Code Notes Folder

Written explaination of what I teach. I don't think anyone looks at it, but you can always just give it to the participants in case they like to read.

Extra Activities Folder

In case someone wants more stuff to do, I just give them something in that folder. Just upload the entire folder (excluding EA2.html and EA2.css) to Repl.it or wherever they can access your code. By the way, the extra activities are NOT HOMEWORK. I don't give homework.

Projects Folder

This folder holds the "Final Activities" I do with each group at the last day (or last 2 days) of the program.

For the preteens, I go step-by-step with them in creating one of the final projects.

For the youth, I give them the instructions and time to solve it themselves (with me helping them by answering their questions and stuff). This follows the same format as the activities. Around 10-15 minutes before the program officially ends, I show them the answer.

Note: I mostly use the Colour Picker project for both groups. It is fast and easy enough for the preteens, and the right difficulty for youth. I also haven't made instructions for any of the other projects

Schedule

Both the preteens and youth groups have a maximum of 16 participants with preteens averaging 12-14 participants and youth averaging 4-6 participants each season.

During each season, you'll have around 6 to 8 weeks with both groups meaning that not every season will have the same contents. Here is a brief overview of the schedule I follow:

  • DAY 1: Intro to HTML for preteens and youth (preteens will be slower in setting up)
  • DAY 2: Finish up HTML and intro to CSS for preteens, whereas just an intro to CSS for youth will suffice
  • DAY 3: Intro to JavaScript for preteens and youth
  • DAY 4: JS If-statements and Loops for preteens and youth
  • DAY 5: JS Functions for preteens and youth
  • DAY 6: JS Event Listeners for preteens and youth
  • DAY 7: Final Project (I call it a Final Activity) for both groups

You may have to speed up, or slow down, depending on other factors like how fast they type, if they understand what's going on, etc. I'll leave that up to your discretion.

However, I believe it is key to try and go through every topic listed there. You are, of course, free to choose different topics to teach.

Contact

If you have any questions, you can email me at lucasdlee23@gmail.com.