web-dev-basics-1

Objective

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).

Duration

2 x 3hr sessions per week for 4 weeks

Total 8 sessions (24 hours)

Tools

• Visual Studio Code
• Google Chrome

References

• MDN web docs
• Stack Overflow
• A Complete Guide to Flexbox
• React
• Random Unsplash Image
• Pokemon API
• Font Awesome

Lessons

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