This tutorial is meant for basic learners, with the aim of providing easily accessible tools and content so that further experimentation and exploration can proceed.
Basic html/css/js is used in this module initially, and React is used subsequently as it will improve productivity and feedback to the student (at the cost of a lot of magic though).
2 x 3hr sessions per week for 4 weeks
Total 8 sessions (24 hours)
- MDN web docs
- Stack Overflow
- A Complete Guide to Flexbox
- React
- Random Unsplash Image
- Pokemon API
- Font Awesome
Lesson 1
- [10m] Objective of module
- [15m] Set up VS Code
- [15m] Install Chrome
- [20m] Introduction to Chrome Inspector
- [10m] Finding Resources
- [10m] What is a language?
- [30m] Basic html, focussing on
<div>
,<img>
,<a>
and<span>
- [30m] Basic css, focussing on inline styling
- [40m] Work on Assignment 1
- Assignment 1 : Create an instagram tile with hover
Lesson 2
- [20m] Review Assignment 1
- [20m] UI Composition
- [25m] Decompose Instagram page
- [10m] Flexbox
- [60m] Basic javascript on console, focussing on literals, conditionals and functions
- [30m] Demo: Bring up a modal when click instagram tile (javascript)
- Assignment 2 : Create an instagram components in individual files
Lesson 3
- [20m] Review Assignment 2
- [20m] Set up node 12 via nvm
- [10m] Create react app
- [60m] Explain usage of react components
- [70m] Work on Assignment 3
- Assignment 3 : port some components to React
Lesson 4
- [20m] Review Assignment 3
- [60m] Explain props and state
- [30m] Demo: Bring up a modal when click instagram tile (React)
- [10m] Show usage of unsplash
- [60m] Work on Assignment 4
- Assignment 4 : make components more generic with props
Lesson 5
- [20m] Review Assignment 4
- [10m] Re-imagine application v2: Modals show pokemon attributes like abilities
- [60m] Creating a modal using state to toggle
- [30m] Plan UI for application
- [60m] Work on Assignment 5
- Assignment 5 : Modify app to v2
Lesson 6
- [20m] Review Assignment 5
- [30m] Explain how the web works
- [30m] Intro to APIs
- [60m] Practice working with JSON data
- [40m] Work on Assignment 6
- Assignment 6 : Modify app and use hardcoded pokemon json with
setTimeout
to simulate async API call
Lesson 7
- [20m] Review Assignment 6
- [20m] Add Axios to project and explain purpose
- [40m] How to modify JSON use to actual API calls
- [100m] Work on Assignment 7
- Assignment 7 : Modify app to use API calls
Lesson 8
- [20m] Review Assignment 7
- [40m] Last min changes
- [30m] Build and deploy on S3
- [30m] Review possible improvements that can be made
- [30m] Retrospective
- [30m] QnA