PWA Apps workshop intro

PWA Apps workshop intro

Useful Links

All updated data will be in:

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

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://workshop-materials.vercel.app/

---