Blog

You are currently viewing MERN Stack: A Beginner’s Guide to Web Development and Internet Fundamentals

MERN Stack: A Beginner’s Guide to Web Development and Internet Fundamentals

Leave a Reply

MERN stack is one of the most popular technology stacks used in modern web development. But before diving into what MERN stands for and how it works, it’s essential to understand the fundamentals of the internet, web technologies, and the building blocks of web applications. In this guide, we’ll cover everything from how the internet works to the basics of HTML, giving you a strong foundation for learning the MERN stack.

How the Internet Works

At its core, the internet is a global network of computers that communicate with each other. When you type a website address into your browser, your request travels through different layers:

  1. Browser request – You type a URL like www.google.com.
  2. DNS resolution – The domain name is translated into an IP address.
  3. Server communication – Your request reaches the server where the website is hosted.
  4. Data transfer – The server responds with HTML, CSS, and JavaScript files.
  5. Rendering – Your browser renders the content so you can interact with the website.

🔗 External resource: How the Internet Works – Mozilla

Fundamentals of Web Technology

Web technology is built on three main layers:

  • HTML (HyperText Markup Language): The structure of a webpage.
  • CSS (Cascading Style Sheets): The design and layout.
  • JavaScript: The interactivity and logic.

Together, these make up the frontend of websites. The backend handles server logic, databases, and APIs.

Software Development Life Cycle (SDLC) in Web Development

Like any software project, web applications follow the SDLC process:

  1. Requirement analysis – What problem does the app solve?
  2. Design – Wireframes, UI/UX mockups, database design.
  3. Development – Writing code (frontend + backend).
  4. Testing – Checking for bugs and errors.
  5. Deployment – Hosting the app on servers.
  6. Maintenance – Updates and bug fixes.

The MERN stack fits neatly into this process by providing JavaScript-based tools for both frontend and backend development.

Different Web Development Stacks

  • LAMP stack: Linux, Apache, MySQL, PHP.
  • MEAN stack: MongoDB, Express.js, Angular, Node.js.
  • MERN stack: MongoDB, Express.js, React.js, Node.js.
  • Django stack: Django (Python) + PostgreSQL.

The MERN stack stands out because developers can use JavaScript everywhere — from frontend to backend.

URL and Protocols

A URL (Uniform Resource Locator) is the address of a web resource. Example:

https://www.example.com/blog/article
  • Protocol: https (secure version of HTTP).
  • Domain name: example.com.
  • Subdomain: blog.example.com.
  • Path: /article.

Top-Level Domains (TLDs) Examples:

  • .com → commercial
  • .org → organizations
  • .edu → education
  • .in → India

🔗 External resource: ICANN – Domain Names & TLDs

Server, Domain Name, and Subdomain

  • Server: A computer that stores your website files and delivers them when requested.
  • Domain Name: A human-readable address (like google.com).
  • Subdomain: A prefix that organizes or separates content (mail.google.com is Gmail).

Online Code Editors

If you’re just starting out, you don’t need heavy tools. Some popular online editors include:

These editors allow you to experiment with HTML, CSS, and JavaScript directly in the browser.

Basics of Web Applications

A web application is a software program that runs on a web server and is accessed through a browser. Examples include:

  • Gmail (email web app)
  • Facebook (social media app)
  • Amazon (e-commerce app)

The MERN stack is widely used to build scalable web applications like these.

Introduction to HTML

HTML is the backbone of web pages. Every web page starts with an HTML document. Example:

<!DOCTYPE html>
<html>
<head>
  <title>My First Page</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is my first webpage.</p>
</body>
</html>

HTML Tags

Tags are the building blocks of HTML. They usually come in pairs:

<p>This is a paragraph.</p>

Some common tags:

  • <h1> to <h6> → Headings
  • <p> → Paragraph
  • <a> → Hyperlink
  • <img> → Image
  • <ul>, <ol>, <li> → Lists

Elements, Attributes, and Comment Lines

  • Element: Combination of start tag, content, and end tag. <p>Hello World</p>
  • Attribute: Extra information inside a tag. <a href="https://google.com">Google</a>
  • Comment: Used for notes inside code. <!-- This is a comment -->

Heading Tags in HTML

Headings range from <h1> (most important) to <h6> (least important).

Example:

<h1>Main Title</h1>
<h2>Sub Title</h2>
<h3>Section Heading</h3>

Search engines (like Google) give more importance to <h1> and <h2> tags, making them critical for SEO.

Why Learn the MERN Stack?

  • One language (JavaScript) across frontend, backend, and database.
  • Scalability – Perfect for startups and enterprise apps.
  • Strong community support – Huge ecosystem of libraries and frameworks.
  • Full-stack power – React for frontend, Node + Express for backend, and MongoDB for database.

External resource: MERN Stack Guide – FreeCodeCamp

Final Thoughts

Learning the MERN stack is not just about learning four technologies (MongoDB, Express, React, and Node). It’s about understanding how the internet works, how web applications are built, and the fundamentals of web technologies. Once you master HTML, CSS, and JavaScript, diving into the MERN stack will be much easier.

Whether you’re building a personal portfolio, a business app, or a social media platform, MERN provides the flexibility and scalability you need.

My Handwritten Notes

MERN Stack NotesDownload

You May Also Like

Post Views: 4
Tags: , , , ,