https://thebackhomeproject.org/
https://guides.github.com/features/mastering-markdown/
https://github.com/changetocoding/Web-Development-Course
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)
Students self learn through UDACITY course:
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/
- 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
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.
- Searching for data online
- Github
- Bootstrap
- History of JS
- JS 101
- Functions in JS
- Vue.js or React
- Server interactions
- Codepen.io
- online repls
- stackoverflow
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
- Debugging in Chrome (https://javascript.info/debugging-chrome)
- Arrow functions/Function Expressions (https://javascript.info/function-expressions, https://javascript.info/function-expressions)
- The big website project: Build a business website
- Talking with servers (Fetch Api & Axios)
- Adding elements to page
- Forms
- AJAX
- Promises
- Async/Await
Lessons 21-30 -
- Clean code - https://github.com/ryanmcdermott/clean-code-javascript. Get students to read then go through thier code and find examples where missed. From now on will be using this as a guide and to review and mark code.
- Unit testing - https://designmodo.com/test-javascript-unit/, https://www.udacity.com/course/javascript-testing--ud549
- Group project
- Projects
- Centering elements from https://css-tricks.com/
- Grids
- ES6 features: Split over 2 weeks as have covered bits, but also covers classes: https://classroom.udacity.com/courses/ud356
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
https://tbhp.gitbook.io/web-course/
Course Feedback Volunteers
- Micheal
- Claudius
Completion!!!
- Login authentication
- Giphy with a unique API
- To-do list
- Landing page
- Ecommerce website
- Search engine result page
- Survey form
- Phonebook