This is roughly the course that was delivered with the first group of students at CANDI. We worked with BTEC Computing students, so they already had some strong concepts, and had done most of their coding with Python.
The students were keen to create an app, so we worked on creating a relatively simple To Do list app, using HTML, CSS and Javascript.
NB: This programme may need to be adapted a fair bit if used with a group with less experience of coding - In particular the JS concepts such as array manipulation were picked up very fast as they could link them with their learning about lists in Python.
- Introduce students to Github and get them signed up.
- Introduce students to Gitter and explain that we'll use it to support each other and share our progress
- Introduce students to freeCodeCamp
- Share the Tribute Page challenge and some good quality examples, and explain that we'll work on building our skills to make our own
- 20mins working individually on freeCodeCamp
- 20mins pairing and supporting each other on freeCodeCamp
- 40mins start to make a tribute page in HTML in pairs
- 20mins share links on Gitter and discuss progress as a group
- Finish the basic HTML section on fCC by next week
- 40mins working individually on freeCodeCamp Basic CSS
- 20mins pairing to support each other
- 40mins to work on tribute page, adding styling
- 20mins to share progress and discuss what we'd like to add
- Finish the basic CSS section on fCC by next week
- 40mins working individually on freeCodeCamp Responsive Web Design and Flexbox
- 20mins pairing to support each other
- 40mins to work on tribute page, adding styling, making responsive
- 20mins to share final outcome and discuss what we'd like to add if we had more time
- Finish the Responsive Web Design and Flexbox sections on fCC by next week
- Put finishing touches on tribute page if desired
- Introduce To Do list app challenge
- 40mins working individually on freeCodeCamp Basic Javascript
- 20mins pairing to support each other
- 40mins to research JS array methods and compare with Python lists
- 20mins to discuss how you would use array methods to organise a to-do list
- Finish the basic JS section by next week
- 20mins introduction to design heuristics (using design burst 1)
- 20mins research existing products/ design patterns
- 20mins discuss how existing products meet design heuristics
- 20mins introduce Figma
- 40mins work in pairs to create 1-page prototype
- Finish 1-page prototype
- introduce reset.css or normalise.css, demo an HTML layout for the app
- 40mins in pairs to create layout using semantic HTML / CSS
- 20mins share progress and discuss
- 40mins in pairs to add CSS and styling
- 20mins share progress and set targets for homework
- Finish HTML/CSS layout
- go through DOM manipulation workshop
- demo how to use DOM manipulation to make the to-do page interactive (link up the form and submit button to add items into the UL, give each one a button to mark it as done and a button to delete it)
- 40 mins in pairs to add JS to the HTML/CSS to-do apps
- Continue basic JS on fCC
- introduce the idea of keeping state in JS and rendering it into the DOM
- demo using an array of to-do items, using objects with title and status
- discuss what functions will be needed to manipulate the list
- add a to-do item
- remove a to-do item
- toggle an item as done / not done
- sort the list by status (done / not done)
- students in pairs to write the necessary JS functions to manipulate the array
- discuss how to link the logic with the DOM
- students in pairs to write a render function that puts the state into the page
- 20mins share and discuss