Home - GirlsTooCode/WebDev GitHub Wiki
Welcome to the WebDev wiki!
This wiki contains all the needed information and resources required to successfully complete this course. Students are encouraged to visit this wiki regularly, study the material provided, and try out examples and demos.
Some resources:
Week 0: Foundation of Web Technologies
Students are required to cover all the material contained in this section before the start of the semester. The content of this section are foundational concepts and are necessary for a thorough understanding of the rest of the material.
| Item | Purpose | Link | Exercise |
|---|---|---|---|
| 1. | Understanding how the web works | Basic concepts of web applications | In 300 words or more, describe with the aid of a diagram, the architecture of the web. |
| 2. | Understanding REST APIs | REST API Concepts | |
| 3. | Understanding Version Control using Git | Version Control Basics | Perform the following tasks off-hand: Clone, Checkout, Pull, Push, Commit, Add |
| 4. | Understanding HTML5 | HTML5 Cheat Sheet | |
| 5. | Understanding CSS3 | CSS3 Cheat Sheet | |
| 6. | Understanding how web browsers work | Web browser internals |
Week 1: Introduction to JavaScript (Part I)
Students will be introduced to JavaScript from the very basic concepts to advanced topics with simple, but detailed explanations. This introduction assumes prior exposure to other programming languages and familiarity with concepts like OOP and FP. Students are also expected to be comfortable using the terminal for executing tasks like package installation. Students are free to adopt any Integrated Development Environment of their choosing. VS Code and WebStorm are recommended options.
Presentation Slides
Introduction to JavaScript (Part I)
Lab Exercise
| Item | Topic | Link |
|---|---|---|
| 1. | JavaScript Functions | Functions |
| 2. | Functions Expressions and Arrow Functions | Function Expressions and Arrows |
| 3. | JavaScript Objects | Objects |
| 4. | Garbage Collections in JS | Garbage Collection |
| 5. | JavaScript Object Methods | Object methods, "this" |
| 6. | Constructor Functions | Constructor, Operator "new" |
| 7. | Methods of Primitives | |
| 8. | Arrays | |
| 9. | Array Methods | |
| 10. | Iterables | |
| 11. | Map and Set | |
| 12. | Object.keys, values, entries | |
| 13. | Destructuring Assignment | |
| 14. | Date and Time | |
| 15. | JavaScript Object Notation | |
| 16. | Recursion | |
| 17. | Rest parameters and spread operator | |
| 18. | Closure | |
| 19. | Global Object | |
| 20. | Function Object, NFE | |
| 21. | The "new" Funciton Syntax | |
| 22. | Scheduling | |
| 23. | Function Binding | |
| 24. | Currying and Partials |
Week 2: Introduction to JavaScript (Part II)
Students will continue with more advanced topics in JavaScript ensuring a sound understanding of some of the more confusing concepts of the language.
Presentation Slides
Introduction to JavaScript (Part II)
Lab Exercise
| Item | Topic | Link |
|---|---|---|
| 1. | Basic Syntax of Classes | Class basic syntax |
| 2. | Class Inheritance | Class Inheritance |
| 3. | Static Properties and Methods | Static Properties and Methods |
| 4. | Private and Protected properties and methods | Private and Protected Properties |
| 5. | Extending built-in classes | Extending classes |
| 6. | Class checking: "instanceof" | Class checking: "instanceof" |
| 7. | Error Handling | |
| 8. | Custom Errors, Extending errors | |
| 9. | Introduction to Callback Functions | |
| 10. | Itroduction to Promises | |
| 11. | Promises Chaining | |
| 12. | Error handlig with promises | |
| 13. | Promise API | |
| 14. | Promisification | |
| 15. | Micro Tasks | |
| 16. | Async/Await | |
| 17. | Introduction to Modules | |
| 18. | Exports and Imports | |
| 19. | Dynamic Imports | |
| 20. | Document Object Model | |
| 21. | Introduction to events | |
| 22. | UI Events | |
| 23. | Forms and Control | |
| 24. | Network Requests |
Week 3: Getting Started with NodeJS
Students will continue with more advanced topics in JavaScript ensuring a sound understanding of some of the more confusing concepts of the language.
Presentation Slides
Lab Exercise
| Item | Topic | Link |
|---|---|---|
| 1. | Basic Syntax of Classes | Class basic syntax |
| 2. | Class Inheritance | Class Inheritance |
| 3. | Static Properties and Methods | Static Properties and Methods |
| 4. | Private and Protected properties and methods | Private and Protected Properties |
Week 4: Building web servers (Part I)
Students will continue with more advanced topics in JavaScript ensuring a sound understanding of some of the more confusing concepts of the language.
Presentation Slides
Lab Exercise
Building REST APIs with NodeJS and Express
| Item | Topic | Link |
|---|---|---|
| 1. | Basic Syntax of Classes | Class basic syntax |
| 2. | Class Inheritance | Class Inheritance |
| 3. | Static Properties and Methods | Static Properties and Methods |
| 4. | Private and Protected properties and methods | Private and Protected Properties |
Week 5: Building web servers (Part II)
Students will continue with more advanced topics in JavaScript ensuring a sound understanding of some of the more confusing concepts of the language.
Presentation Slides
Lab Exercise
Building REST APIs with NodeJS and Express
| Item | Topic | Link |
|---|---|---|
| 1. | Basic Syntax of Classes | Class basic syntax |
| 2. | Class Inheritance | Class Inheritance |
| 3. | Static Properties and Methods | Static Properties and Methods |
| 4. | Private and Protected properties and methods | Private and Protected Properties |
Week 6: Frontend with HTML, CSS & JavaScript
Students will continue with more advanced topics in JavaScript ensuring a sound understanding of some of the more confusing concepts of the language.
Presentation Slides
Lab Exercise
Building REST APIs with NodeJS and Express
| Item | Topic | Link |
|---|---|---|
| 1. | Basic Syntax of Classes | Class basic syntax |
| 2. | Class Inheritance | Class Inheritance |
| 3. | Static Properties and Methods | Static Properties and Methods |
| 4. | Private and Protected properties and methods | Private and Protected Properties |
Week 7: Frontend development with React (Part I)
Students will continue with more advanced topics in JavaScript ensuring a sound understanding of some of the more confusing concepts of the language.
Presentation Slides
Lab Exercise
Building REST APIs with NodeJS and Express
| Item | Topic | Link |
|---|---|---|
| 1. | Basic Syntax of Classes | Class basic syntax |
| 2. | Class Inheritance | Class Inheritance |
| 3. | Static Properties and Methods | Static Properties and Methods |
| 4. | Private and Protected properties and methods | Private and Protected Properties |
Week 8: Frontend development with React (Part II)
Students will continue with more advanced topics in JavaScript ensuring a sound understanding of some of the more confusing concepts of the language.
Presentation Slides
Lab Exercise
Building REST APIs with NodeJS and Express
| Item | Topic | Link |
|---|---|---|
| 1. | Basic Syntax of Classes | Class basic syntax |
| 2. | Class Inheritance | Class Inheritance |
| 3. | Static Properties and Methods | Static Properties and Methods |
| 4. | Private and Protected properties and methods | Private and Protected Properties |
Week 9: Frontend Development with React (Part III)
Students will continue with more advanced topics in JavaScript ensuring a sound understanding of some of the more confusing concepts of the language.
Presentation Slides
Lab Exercise
Building REST APIs with NodeJS and Express
| Item | Topic | Link |
|---|---|---|
| 1. | Basic Syntax of Classes | Class basic syntax |
| 2. | Class Inheritance | Class Inheritance |
| 3. | Static Properties and Methods | Static Properties and Methods |
| 4. | Private and Protected properties and methods | Private and Protected Properties |
Week 10: Mobile App Development with React Native (Part I)
Students will continue with more advanced topics in JavaScript ensuring a sound understanding of some of the more confusing concepts of the language.
Presentation Slides
Lab Exercise
Building REST APIs with NodeJS and Express
| Item | Topic | Link |
|---|---|---|
| 1. | Basic Syntax of Classes | Class basic syntax |
| 2. | Class Inheritance | Class Inheritance |
| 3. | Static Properties and Methods | Static Properties and Methods |
| 4. | Private and Protected properties and methods | Private and Protected Properties |
Week 11: Mobile App Development with React Native (Part II)
Students will continue with more advanced topics in JavaScript ensuring a sound understanding of some of the more confusing concepts of the language.
Presentation Slides
Lab Exercise
Building REST APIs with NodeJS and Express
| Item | Topic | Link |
|---|---|---|
| 1. | Basic Syntax of Classes | Class basic syntax |
| 2. | Class Inheritance | Class Inheritance |
| 3. | Static Properties and Methods | Static Properties and Methods |
| 4. | Private and Protected properties and methods | Private and Protected Properties |
Week 12: Real-time web applications with Web Sockets
Students will continue with more advanced topics in JavaScript ensuring a sound understanding of some of the more confusing concepts of the language.
Presentation Slides
Lab Exercise
Building REST APIs with NodeJS and Express
| Item | Topic | Link |
|---|---|---|
| 1. | Basic Syntax of Classes | Class basic syntax |
| 2. | Class Inheritance | Class Inheritance |
| 3. | Static Properties and Methods | Static Properties and Methods |
| 4. | Private and Protected properties and methods | Private and Protected Properties |
Week 13: Revision
Students will continue with more advanced topics in JavaScript ensuring a sound understanding of some of the more confusing concepts of the language.
Presentation Slides
Lab Exercise
Building REST APIs with NodeJS and Express
| Item | Topic | Link |
|---|---|---|
| 1. | Basic Syntax of Classes | Class basic syntax |
| 2. | Class Inheritance | Class Inheritance |
| 3. | Static Properties and Methods | Static Properties and Methods |
| 4. | Private and Protected properties and methods | Private and Protected Properties |