Understand web developing languages in a hierarchical way

• The Basics (1990s - 2000s) : webpages were static (reload for new data) and simple (few hundred lines of code).

  • HTML (structure)

    • purpose: Tell the browser what is on the page.

  • CSS (style)

    • purpose: Control how it looks (colors, layout)

  • JavaScript[JS] (interaction)

    • purpose: Add behavior (buttons, forms, animations)

  • Issues

    • Pages became bigger and interactive (e.g. Facebook, Gmail).

    • Writing long JS code was messy: spaghetti code, hard to maintain.

    • Reusing UI parts (buttons, forms) was difficult.

    • Developers wanted faster updates without page reloads.

• Frameworks & Libraries (2010s)

  • Frontend: React, Angular, Vue

    • purpose: Need to reuse components (not rewrite same code).

      • Manage state (data that changes with user actions).

      • Build Single Page Applications [SPA] -> pages update instantly without reloading.

    • Example: React lets you write a Button component once and reuse it everywhere.

  • Backend: Node.js

    • JavaScript originally only worked inside browsers.

    • Node.js allows running JS on servers -> so you can use one language (JS) for both frontend & backend.

    • Make it easier to handle real-time apps (chat, games).

• Modern Enhancements

  • Next.js

    • purpose: React is great, but setting up routing, SEO, and performance optimization is hard.

      • Next.js adds server-side rendering (SSR) and static site generation (SSG)-> fast, SEO-friendly,

      • It also adds API routes -> so frontend and backend can live in one project.

  • TypeScript

    • purpose: JavaScript is dynamic -> easy to make bugs.

      • TypeScript adds static typing -> safer, better for large projects.

•