Life Is Possible WorkshopOverall

Life is Possible - 生命教育 手機程式工作坊

PWA Apps workshop intro

https://github.com/Big-null/Life-is-Possible-Apps-workshop

🎮 Level

  • Easy to Medium - Secondary School level

🎯 Target audients

  1. Basic computer user
  2. Want to understand more about coding and website development.

Aims

  1. Enlighten students interested in STEM-related fields.
  2. Able to code a simple website / apps / PWA.
  3. Understand how coding works and critical thinking.

Perquisites

  1. Basic knowledge of controlling computers (Windows / MacOS or Linux)
  2. Interest in web technology / coding
  3. Basic HTML / ICT / Coding knowledge is a plus (Not a must)

High level Outputs

  1. Able to perform actions in coding IDE.
  2. Basic coding skill in high level languages.
  3. Learn server deployment process.
  4. Edge knowledge of what is a programmer / software engineer.
  5. Develop critical thinking and creativity.

Details Outputs

  1. Able to use an IDE VS code to code.
  2. Understanding what is coding and what are programmers duties.
  3. Basic coding in high levels languages (JS / HTML / CSS).
  4. Import bulma and other framework to enhance the UI / UX.
  5. Using Github and Github Desktop for co-op and version control.
  6. Using Vercel or Netlify to deploy PWA.

Details

Languages:

  • Materials in English
  • Tutoring / Talks in Cantonese

Period:

  • Total 7 lectures + 3 project lectures (10 days)
  • Every Saturday week day starting from 15/04/2023 in 1400 - 1600
  • Lecture arrangement: 2 * 7 hours (1 hour lecture + 45 hour lab, 15 mins breaks)
  • Project lectures arrangement: 2 * 3 hours team project time

Schedule

Period: 1400 - 1600 each saturday

Lessons Title Descriptions Date
1 Introduce to Programming Prepare lessons for future learning 15/04/2023
2 Introduce to HTML HTML conecpts and coding 22/04/2023
3 Introduce to CSS and bulma CSS conecpts and coding 29/04/2023
4 Introduce to JavaScript JavaScript conecpts and coding 06/05/2023
Lessons Title Descriptions Date
5 Interact JS in HTML Using javascript in HTML 13/05/2023
6 Adv topic - Github, deployment, planning Learn to use Github desktop, deployment tools and planning 20/05/2023
7 Project Week 1 (Buffer) / Bonus lecture For tutoring and doing project 27/05/2023
8 Project Week 2 For tutoring and doing project 03/06/2023
9 Project Week 3 For tutoring and doing project 10/06/2023
10 Showcase Demo project 17/06/2023

Project lectures arrangement

2 to 3 student will be in a group, and the following 3 weeks will be the project period. A PWA will be developed and deploy to Vercel for publics to access.

Project lectures arrangement

  • Group members: 2 to 4 student Free grouping
  • Period: 3 weeks (Mostly in lecture time => 6 hours)
  • Presentations: Week 10
  • Topics: 生命教育 / 珍惜生命 / 其他 Choose one

  1. Each person should done at least 2 pages (2 ppl group = > 4 pages) (3 ppl group = > 6 pages)

  2. The PWA must have a index.html for home pages and others pages for the remaining content.

  3. For the PWA, you should design the web that assume most users are using iphone , android phone and ipad.

  4. Student should work on the same repository instead of each student have their own repository.

  1. Student should plan the website structure, theme, page, features and style before codings.

  2. Mobile responsive is not a must but better have it for the sake of user experiences and UI.

  3. Each group should be deploy the PWA in vercel

  4. Gropus should ensure the deployed PWA works as expected (Valid links, workable functions, no dead images and href ect…)

  5. Tutor / TA may help for deploying apps / web to Google play store.

Overview skills to learn

PWA skills

  • HTML5, CSS, Javascript

Deployment / management skills

  • Github / Guthub Desktop (Management)
  • Vercel (Deployment)

Softs skills

  • Communications & teamwork
  • Critical thinking & logical thinking

Scoring list

Score by tutors and TA’s Total 100 + 10 Bonus (Max 100)

  1. Content (25%)
  2. Creative / Design (25%)
  3. Team-work & communications (25%)
  4. Tech Skills (15%)
  5. Presentations (10%)
  6. Bonus (10% Bonus, Max 10%)

1. Content (25%)

  • Great ideas and topics (10% - 0%)
  • Interesting / Interactive with regarding content (15% - 0%)

2. Creative / Design (25%)

  • Great UI layout / Creative ideas (10% - 0%)
  • Great UX design (10% - 0%)
  • With proper images / video / gif / icon usgae (5% - 0%)

3. Team-work & communications (25%)

  • Each person should done at least 2 pages (5%)
  • Whole group finished the project (10% - 0%)
  • Great team atmosphere (10% - 0%)

4. Tech Skills (15%)

  • Using Github and Github desktop / git in the project (5% / 0%)
  • Using Vercel to deploy the project (5% / 0%)
  • Using all javascript / html / CSS in the project (5% / 0%)

5. Presentations (10%)

  • All teammate present the regarding pages (5%)
  • Great presentations performances (5% - 0%)

6. Bonus (10% Bonus, Max 10%)

  • Using tech that did not cover in the lecture (e.g AOC, animate.css, sweet alert2 …) (0 - 10 %)
  • Adapt other framework in the project (0 - 10 %)

Score rank

We will give the top 2 groups several award for encouragement.

Output demo

See project/demo-project/README.md for more info.

End

Overall (中文)