Fullstack Learning Group

Setup and Tools

Make sure you have the following tools installed:

• Git
• Node.js and npm
• VS Code
• Postman

In the next leasons we will use docker, so make sure you have it installed on your machine.

• Guid to install Docker on WSL
• PgAdmin For database management

make sure to install the vscode extensions.

Structure of this repository

In the README.md you'll find the cylabus of the course, and the links to the resources we will use.

Each directory beginig with week- is the code examples by week and topic. For example the directory week-1 contains the code examples for the first week of the course.

Resources like pdf learning books can be found in the resources directory.

Syllabus

Week 1 - Introduction to Fullstack Development

Topics Covered:

• Basic usage of HTML, CSS, and JavaScript.

Videos:

• HTML Crash Course
• Flexbox

Exercise:

• Create pages for a simple website using HTML and CSS.

---

Week 2 - Events, DOM, Event Loop and Promises

Topics Covered:

• Introduction to the Document Object Model (DOM) and event handling.
• Understanding the JavaScript Event Loop.
• Working with Promises and async/await.

Videos:

• Event Listeners in JavaScript
• Async JavaScript & Callback Functions
• JavaScript Promises

Exercise:

• Build an interactive to-do list app that lets users add and remove tasks dynamically.

---

Week 3 - Responsive Design and TailwindCSS, Moduls & Imports

Topics Covered:

• Introduction to responsive design and media queries.
• Flexbox and Grid layout systems.
• Introduction to TailwindCSS.
• Moduls and Imports in JavaScript.
• Introduction to ES6 modules.

Videos:

• A practical guide to responsive web design
• Tailwind CSS Crash Course
• ES6 Modules in JavaScript

Exercise:

• Convert the to-do list app into a fully responsive design using Flexbox and Grid.
• Recreate a modern landing page design using TailwindCSS.

---

Week 4 - Classes, Prototypes, and Introduction to TypeScript

Topics Covered:

• JavaScript object-oriented programming: Prototypes and ES6 Classes.
• Transitioning from JavaScript to TypeScript: benefits and basic concepts.
• Setting up a TypeScript development environment.
• Typescript utility types.

Videos:

• Typescript tutorial
• Typescript Platylist

Exercise:

• Convert a small JavaScript application to TypeScript.
• Create a class‑based implementation of a shopping cart system.

---

Week 5 - Full-Stack Application Architecture

Topics Covered:

• Understand the distinct components and layers of a full-stack application.
• Learn how clients find servers using DNS.
• Grasp the roles and technologies of the client, server, and database.
• Learn the fundamentals of HTTP as the communication backbone.
• Understand the role of Load Balancers in scalability and availability.
• Explore different types of Caching and Content Delivery Networks (CDNs).
• Learn how to handle long-running tasks asynchronously using Message Queues and Workers.
• Explore common authentication (AuthN) and authorization (AuthZ) patterns.
• See how these pieces fit together in a typical request lifecycle.
• Briefly touch upon modern architectural patterns.

Exercise:

• Go over ./resources/fullstack-architecture.pdf and understand the architecture of a full-stack application.
• Go over the firs 50 pages of Linkedin_Posts_2024_Blue_250406_220421.pdf.