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

***

5. Students should plan the website structure, theme, page, features, and style before codings.
6. `Mobile responsive` is not a must but better have it for the sake of user experiences and UI.
7. Each group should deploy the PWA in `vercel`
8. Groups should ensure the deployed PWA works as expected (`Valid links`, `workable functions`, `no dead images and href` etc...)
9. 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/>

***
