# Learnathon: WebDev

## Day 1 - JavaScript Essentials with HTML , CSS (the building blocks of the web)

### Basics
The 3 fundamental languages you need to make a web page are HTML, CSS and Javascript. To get started, you may learn the basics of these languages from this video:
https://www.youtube.com/watch?v=_GTMOmRrqkU

You need not go too deep into HTML and CSS by learning different types of tags and style properties. These things can be easily found through google searches or by reading documentation when needed.
But Javascript will be very important so make sure to understand and practice it well.

To practice the HTML and CSS you have learnt so far, make a simple web page. For example, a list of recipes for different food items which link to separate web pages for different food items.
Include various elements you know of and try to style them with CSS.
Dom Manipulation
But static pages are boring. To make them dynamic and interactive with elements like buttons we will use Javascript.
First, let's understand what DOM is. You may go through the first few sections of this to get an idea of what it is:

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

To get interactivity, we may manipulate the DOM using Javascript. To learn some useful manipulations go through this:

https://www.theodinproject.com/lessons/foundations-dom-manipulation-and-events

For practice you can try out some of the exercises in this link.

### Further Resources
Going forward in your web development journey you will encounter various concepts related to servers, http requests, etc. All these topics can be quite confusing at times the best method to learn them is to use the Google and the power of AI when stuck.
Here we provide you with certain resources to explore this stuff:

For a complete understanding of web and related stuff:

1. P-Club Roadmap https://pclub.in/roadmap/2024/06/06/webdev-roadmap/

2. The Odin project https://www.theodinproject.com/

Some interesting stuff:
3. Event loops
https://youtu.be/eiC58R16hb8?si=lh30BOKquU74mCZ8

## Day 2 - React

Today we will be focusing on JS frameworks.

### Why use a JS framework like React?

In vanilla JS, you manually update whenever your application data (state) changes. This gets messy and error-prone really quick with large applications.

For example, let's say you are building a simple counter app in vanilla JS

// Vanilla JS example:
let count = 0;
const counterDisplay = document.getElementById('count');
const incrementButton = document.getElementById('increment');

incrementButton.addEventListener('click', () => {
  count++;
  counterDisplay.textContent = count; // Manually finding and updating the DOM
  if (count > 5) {
    // Manually adding/removing classes or changing styles
    counterDisplay.style.color = 'red';
  } else {
    counterDisplay.style.color = 'black';
  }
});

// ReactJS example
import React, { useState } from 'react';

function Counter() {
  // 1. State is managed by React using the useState hook
  const [count, setCount] = useState(0);

  // Function to handle the button click
  const handleIncrement = () => {
    // 2. We only update the state, not the DOM
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      {/* 3. The UI declaratively uses the state */}
      <h1 style={{ color: count > 5 ? 'red' : 'black' }}>
        Count: {count}
      </h1>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

export default Counter;

> Its okay if you don't understand the React code, read ahead and this will be easy to understand moving forward.

In React, you don't manage the DOM, you manage the state.

Frameworks like React solve this process by automating stuff, i.e. React automates the process of efficiently updating the actual HTML DOM whenever your application's data changes, so you don't have to manually manipulate it.
You define UI with reusable **components** and declare how it should look like based on current state. This is more declarative and managable way to build user interfaces.

### What is Virtual DOM?

One of the key concepts that makes React so fast is the Virtual DOM. Before we dive into building components, it's helpful to know what this is.

The Virtual DOM is a lightweight, in-memory representation of the actual DOM. React uses it to compare the current UI with the previous UI, calculating the most efficient way to update only the necessary parts of the real DOM (called [diffing](https://www.geeksforgeeks.org/reactjs/what-is-diffing-algorithm/)), which leads to faster performance.
[This blog](https://blog.logrocket.com/the-virtual-dom-react/) will help you understand the concept of VDOM.

### ReactJS

We will provide a topic list so that you have a nice roadmap to follow through.

1. Learn JSX and how its different from HTML.
2. Functional Components
3. Props (how do we pass data to a react component)
4. Conditional Rendering
5. Lists and Keys
6. React Hooks ([Official Doc Link, read this first](https://react.dev/reference/react/hooks))
- `useState`: to give your component own 'memory' or 'state'
- `useEffect`: To perform actions like fetching data from a server after the component has rendered.
- This [Youtube Video](https://www.youtube.com/watch?v=LOH1l-MP_9k) is a great introduction to Hooks.
7. React Router ([reactrouter.com](https://reactrouter.com))
Since React is a library for building single-page applications (SPAs), you'll need an extra library to handle navigation. React Router is the standard choice for creating a multi-page feel with different URLs.

### Assignment for Day 2

You won't learn anything just by looking at code snippets. Here is a small assignment for you based on what we have learnt till now.

#### Create a simple To-Do Application

##### Core Requirements
1. User can add/delete/rename a To-Do
2. Display all added todos
3. A way to mark a todo as completed
4. Persistent State (use browser's `localStorage` to save the to-do list) (Hint: this is the perfect use case for `useEffect` hook)
##### Bonus Challenges

1. Conditional Styling (eg. a ~~line-through~~ on completed tasks)
2. Task Counter (Display a message to show number of tasks left)

---
### Resources for learning React
1. [Scrimba | Learn React](https://scrimba.com/learn-react-c0e) is a very good and interactive way to learn react. We suggest you to complete atleast the first 3 chapters.
2. Official React Documentation ([react.dev](https://react.dev)). Start with the quick start tutorial and then read the **Thinking in React** guide. This is the best source. Most of the points mentioned above are covered here.
3. [Every React concept explained in 12 minutes](https://www.youtube.com/watch?v=wIyHSOugGGw), good overview and concepts to deep dive into.

## Day 3

What are APIs :
https://www.postman.com/what-is-an-api/ , http://aws.amazon.com/what-is/api/
How APIs work :
https://github.com/resources/articles/software-development/what-is-an-api
How integration works :
1. [Link](https://www.frontendmentor.io/articles/integrating-with-apis-a-beginners-guide-for-frontend-developers-u_xfEadBc-)
2. [Link](https://www.frontendmentor.io/articles/integrating-with-apis-a-beginners-guide-for-frontend-developers-u_xfEadBc-)

## Day 4 | **Build Your Own APIs and Server. An Introduction to full stack Integration**
1. **Node.js Basics**
* What is Node.js?
* Setting up a simple HTTP server.
* Handling requests & responses.
2. **Express.js Basics**
* Why use Express instead of pure Node?
* Setting up routes (GET, POST).
3. **Tools & Important Packages**
* Thunder Client (VS Code Extension) → for testing APIs easily.
* Nodemon (auto-reload server during development).

---
* **Resources (Run the code, don’t just read)**
• How to Create Your First Node.js Server ([How to Create Your First Node.js Server](https://medium.com/@madanbelbase927/how-to-create-your-first-node-js-server-1fea2f153660) | by Madan Belbase | Medium)
• Creating Your First Express Server ([Creating Your First Express server](https://dev.to/devtanmay/creating-your-first-express-server-3fj5) - DEV Community)
• Thunder Client (https://youtube.com/shorts/desKmJ8EAIU?si=DhJkK5eh2r_tqDwl)
• Explore CORS to allow frontend ↔ backend communication.(https://dev.to/dipakahirav/mastering-cors-the-definitive-guide-with-practical-examples-eml)

### Assignments
**These assignments are quite simple, so try to finish them.**
**1. Assignment 1 – Pure Node.js Server**
• Create a simple server using only Node.js (no frameworks).

* Listen on http://localhost:3000
* Handle GET / → respond with "Hello from Node.js"
* GET /about → "This is the about page"
* POST /data → return { success: true, data: req.body }
* Test it using Thunder Client.

**2. Assignment 2 – Express Server**
• Create a simple API using Express.js.

* GET / → "Hello from Express"
* GET /about → "This is the about page"
* POST /data → return { success: true, data: req.body }
* Test all routes using Thunder Client.

---

### Bonus Assignment – Simple Frontend + Backend
• Create a basic frontend.
• send a request to your backend.through this frontend.

---

### Next steps / Want to explore more?

Pclub Roadmap for web development : https://pclub.in/roadmap/2024/06/06/webdev-roadmap/

important topics to start with:
Get a basic understanding with these helpful resource.
1. Parameters ,queries & headers
https://developerchandan.substack.com/p/difference-between-headers-and-query
2. Validation + error handling
https://echobind.com/post/data-validation-error-handling-best-practices
3. DB basics
https://www.freecodecamp.org/news/learn-relational-database-basics-key-concepts-for-beginners/

4. Explore Authentication (hashing, sessions/JWT) and then Move toward production skills: Docker , backend deployement so on.......