Life is Possible - Web Apps workshop 生命教育 手機程式工作坊
  • Introductions
    • PWA Apps workshop intro
    • PWA應用程式工作坊介紹
  • Lecture-Chinese
    • Lecture 02 - HTML 入門
    • Lecture 03 - CSS和Bulma入門
    • Lecture 04 - JavaScript 簡介
    • Lecture 05 - 使用 JavaScript 與 HTML 互動
    • Lecture 06 - 進階- Github、部署、規劃
  • Extra
    • Lecture ex1 - Advance JS
Powered by GitBook
On this page
  • Useful Links
  • Aims
  • Perquisites
  • High-level Outputs
  • Details Outputs
  • Lecture details
  • Schedule
  • Project lectures arrangement (TBD)
  • Overview skills to learn
  • Scoring list
  • 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%)
  • Score rank (TBD)
  • Output demo
  1. Introductions

PWA Apps workshop intro

PWA Apps workshop intro

NextPWA應用程式工作坊介紹

Last updated 2 years ago

Useful Links

All updated data will be in:

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 skills in high-level languages.

  3. Learn the 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 coding is and what are programmers' duties.

  3. Basic coding in high levels languages (JS / HTML / CSS).

  4. Import bulma and other frameworks to enhance the UI / UX.

  5. Using Github and Github Desktop for co-op and version control.

  6. Using Vercel or Netlify deploying PWA.

Lecture details

Languages:

  • Materials in English

  • Tutoring / Talks in Cantonese

Period:

  • Total 7 lectures + 3 project lectures (10 days)

  • Every Saturday weekday 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 of 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

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 (TBD)

2 to 4 students will be in a group, and the following 3 weeks will be the project period. A PWA will be developed and deployed to Vercel for public to access.

  • Group members: 2 to 4 students Free grouping

  • Period: 3 weeks (Mostly in lecture time => 6 hours)

  • Presentations: Week 10

  • Topics: 生命教育 / 珍惜生命 / 其他 Choose one

  1. Each person should do 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 assumes most users are using iphone , android phone and ipad.

  4. Students should work on the same repository instead of each student having their own repository.

  1. Students 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 deploy the PWA in vercel

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

  5. Tutors / TA may help with 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 usage (5% - 0%)

3. Team-work & communications (25%)

  • Each person should do at least 2 pages (5%)

  • The 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 teammates 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 frameworks in the project (0 - 10 %)

Score rank (TBD)

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

Output demo

See Demo-project/README.md in the GitHub repo for more info.

Demo:

https://github.com/r48n34/Life-is-Possible-Apps-workshop
https://workshop-materials.vercel.app/