Skip to content

Web lesson plans for The Back Home Project. A charity setting up a free coding bootcamp in Nigeria. Support us below:

Notifications You must be signed in to change notification settings

changetocoding/WebLessonPlan

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

The Back Home Project

https://thebackhomeproject.org/

Markdown guide

https://guides.github.com/features/mastering-markdown/

Please also refer to

https://github.com/changetocoding/Web-Development-Course

White board

https://r7.whiteboardfox.com/

Git install

https://scribe.rip/devops-with-valentine/2021-how-to-install-git-on-windows-10-step-by-step-guide-1c9db500e734

Web lessons

Web development course. Currently testing out with the kind help of volunteers!

Converting first 10 lesson to a git book for a short course in Nigeria: https://tbhp.gitbook.io/thebeta/

  • 3-4 month (intense)
  • 1 year (weekly lessons)

Resources

Intro Js course

Students self learn through UDACITY course:

Other

https://www.freecodecamp.org/learn https://javascript.info/
https://dev.to/
https://github.com/micromata/awesome-javascript-learning
https://github.com/bmorelli25/Become-A-Full-Stack-Web-Developer/#learn-javascript
https://codeburst.io/25-html-css-tutorials-6a864f387185
https://github.com/ryanmcdermott/clean-code-javascript
https://github.com/kamranahmedse/developer-roadmap
https://teachertraining.codeyourfuture.io/ - With permission from Richard Ng
https://github.com/microsoft/Web-Dev-For-Beginners
https://web.dev/learn/css/

General teacher instruction:

  • Github - one repo for all course content
  • Markdown training
  • Always review homework before the lesson.

The teacher should go through the lesson plan and the additional materials for the lesson and then create their own plan for how they want to deliever the content. They should review it and any questions they have about the content in their weekly review sessions with thier mentors.

Teachers should also not be afraid to say they don't no something: Can look it up online and if unable to resolve it through that then raise in the weekly review session with the mentor

3x repetition:

https://www.reddit.com/r/learnprogramming/comments/5pyx5t/a_beginners_trick_i_learned_way_too_late_in_the/

1st iteration is to make sure you understand what the hell's going on and can repeat it, do you understand the functions, the loops, the getters, setters and constructs? You won't understand because you'll need to keep referring to your last attempt, hence doing it two more times.

2nd iteration is to do the same project again but this time without referring to old code at all. It's not about memorizing. It's about understanding what you want to do next and what tool you need to slap in your code to get there and knowing how to do it...well, a little memorizing comes in handy but at a certain point you're no longer memorizing and you're more just 'knowing it'. Can you clean up your code a bit? Can you DRY it out some?

3rd iteration is to build on it. Can you add another property to the Class? If it's HTML can you add 6 columns with images instead of just 2? Just add shit to the project with what you already know. Add stuff that you learned 2-3 lessons ago but haven't touched since then.

Topics/Aims

  • Searching for data online
  • Github
  • Bootstrap
  • History of JS
  • JS 101
  • Functions in JS
  • Vue.js or React
  • Server interactions

Tools

  • Codepen.io
  • online repls
  • stackoverflow

Course Plan

Lessons 1-10 Introduction into JS, CSS and Html

  • Html basics
  • JS basics
  • Bootstrap
  • CSS basics
  • JQuery Projects: Snake, First site (Lightman Jacob)

Lessons 11-20 - Advanced JS and environments

Lessons 21-30 -

Lessons 30-40

  • ES6 & import statement es5
  • React
  • npm for libraries
  • Unit testing in js
  • Teach react hooks (functional componenets rather than Class based componenets)
  • State management - Redux - beast. Teaching Context would be alot more simpler
  • SSR? Server side rendering - No clue what this is

Regarding React courses, I'd suggest (Jemima)

  • a break down of how React works compared to JavaScript
  • using class vs functional components
  • how changes to the DOM is made with re-rendering
  • React lifecycle methods (e.g. componentDidMount vs useEffect)
  • creating a web application with React such as a to-do list

Resources: https://reactjs.org/tutorial/tutorial.html https://reactjs.org/docs/hooks-intro.html https://www.freecodecamp.org/learn/front-end-libraries/#react

  • Syntax podcasts

Volunteer guide:

https://tbhp.gitbook.io/web-course/

Course Feedback Volunteers

  • Micheal
  • Claudius

Completion!!!

Project ideas

  • Login authentication
  • Giphy with a unique API
  • To-do list
  • Landing page
  • Ecommerce website
  • Search engine result page
  • Survey form
  • Phonebook

About

Web lesson plans for The Back Home Project. A charity setting up a free coding bootcamp in Nigeria. Support us below:

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages