> For the complete documentation index, see [llms.txt](https://reemo.gitbook.io/life-is-possible-web-apps-workshop-sheng-ming-jiao-yu-shou-ji-cheng-shi-gong-zuo-fang/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://reemo.gitbook.io/life-is-possible-web-apps-workshop-sheng-ming-jiao-yu-shou-ji-cheng-shi-gong-zuo-fang/introductions/pwa-apps-workshop-intro.md). # PWA Apps workshop intro ## 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. *** 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: ***