Draft content for client-side scripting
This module focuses on the client-side aspect of web applications. It introduces students to the core concepts of HTML/CSS/JS, moving on to the modern web development landscape such as working with npm and web frameworks.
By the end of the module, students should have a good understanding of the anatomy of web applications, serving as a solid foundation for pursuing web development or pentesting in the future.
- Describe the different functions of HTML/CSS/JS
- Explain the structure of web pages
- Understand what JS can do as a scripting language
- Understand the purpose of web frameworks and build tools
- Implement a web app with a web framework
- Know where to look for resources on the internet
| Week | Events | Topics |
|---|---|---|
| 1 | HTML elements | |
| 2 | Styling elements with CSS | |
| 3 | Making pages interactive with JS | |
| 4 | JS concepts, JS libraries | |
| 5 | Whitespace; Monday Deepavali OIL | Responsive CSS with Flexbox and Grid |
| 6 | Modern webapp anatomy, NPM, Node.js | |
| 7 | React anatomy, Next.js project structure | |
| 8 | React methodology, component state, client-side routing | |
| 9 | Common Test | - |
| 10 | Break | - |
| 11 | Break; Monday Christmas | - |
| 12 | Monday New Year's | React useEffect, data fetching, component libraries |
| 13 | Storage, Cookies, Encoding / Consultation | |
| 14 | Whitespace | Consultation |
| 15 | TBC | Consultation |
| 16 | TBC | Consultation |
| 17 | Presentation |
No in-person lesson on whitespace weeks.
| Component | Weightage | Release | Due |
|---|---|---|---|
| Continual assessment | 20% | - | - |
| Research on JS library | 10% | Week 4 | Week 6 |
| Quiz | 20% | Week 6 | - |
| Group project | 50% | Week 7 | Week 17 |
- Responsive web design
- CSS Flexbox and Grid
- Browser based development environments
- import/export modules (cover this before react)