DEV Community

Cover image for How Modern Websites Work: A Beginner’s Guide to Frontend, Backend, and Browsers
Muhammad Zaheer
Muhammad Zaheer

Posted on

How Modern Websites Work: A Beginner’s Guide to Frontend, Backend, and Browsers

#webdev #javascript #beginners #programming

1. What Happens When a User Enters a URL?

When you type a URL like:

https://example.com
Enter fullscreen mode Exit fullscreen mode

your browser doesn’t magically know where that website lives. Several steps happen behind the scenes.

Step 1: Understanding the URL

The browser breaks the URL into parts:

  • https → the protocol (rules for communication)
  • example.com → the domain name
  • / → the path (which resource to request)

The browser now knows how to communicate and what it’s looking for, but not where the server is.

2. Browser and DNS: Finding the Server

Computers don’t use domain names. They use IP addresses (numbers).

DNS Lookup

The browser asks the Domain Name System (DNS):

“What is the IP address for example.com?”

DNS responds with something like:

93.184.216.34
Enter fullscreen mode Exit fullscreen mode

Now the browser knows the exact server location on the internet.

Why DNS Matters

DNS allows humans to use readable names instead of memorizing numbers. Without DNS, the web would be extremely difficult to use.

3. Sending the Request

Once the IP address is known, the browser sends an HTTP request to the server.

Example (simplified):

  • GET /
  • This request means:
  • I want data (GET)
  • From the homepage (/)

If the site uses HTTPS, the connection is encrypted before any data is exchanged.

4. What the Server Does (Backend Responsibilities)

The server receives the request and runs backend code.

The backend is responsible for:

  • Handling requests
  • Applying business logic
  • Communicating with the database
  • Returning the correct response

Backend Tasks in Simple Terms

  • Check who the user is
  • Decide what data they can access
  • Fetch or update data in a database
  • Send data back to the browser

The server might respond with:

  • HTML (for a web page)
  • JSON (for data)
  • An error message

5. Frontend Responsibilities (What Runs in the Browser)

The frontend is everything that runs in the user’s browser.

HTML – Structure

HTML defines the structure:

  • Headings
  • Text
  • Images
  • Forms
  • Buttons

HTML answers the question: What is on the page?

CSS – Appearance

CSS controls:

  • Colors
  • Layout
  • Spacing
  • Fonts
  • Responsive design

CSS answers the question: How does it look?

JavaScript – Behavior

JavaScript controls:

  • User interactions
  • Button clicks
  • Form validation
  • Fetching data from APIs

Updating content without reloading

JavaScript answers the question: How does it behave?

6. How the Browser Builds the Page

After the server sends HTML:

  1. Browser reads the HTML
  2. Builds a page structure in memory (DOM)
  3. Downloads CSS and JavaScript files
  4. Applies styles
  5. Runs JavaScript
  6. Displays the page on the screen

This process is called rendering.

7. How Frontend and Backend Communicate

Frontend and backend communicate using HTTP requests, usually through APIs.

Common Flow

  1. User clicks a button
  2. JavaScript sends a request to the backend
  3. Backend processes the request
  4. Backend returns data (often JSON)
  5. Frontend updates the page

Example:

  1. Frontend asks for a list of products
  2. Backend fetches products from the database
  3. Backend sends them as JSON
  4. Frontend displays them

This separation allows:

  1. Cleaner code
  2. Better scalability
  3. Independent development

8. How Data Flows in a Modern Website

A simple data flow looks like this:

Browser → Backend → Database
Database → Backend → Browser
Enter fullscreen mode Exit fullscreen mode

Important point:

The browser never talks directly to the database
The backend controls access and security

9. Basic Performance Concepts

Performance is about how fast and smooth a website feels.

Key factors:

  • Size of images and files
  • Number of network requests
  • Server response time
  • Caching
  • Efficient code

Basic good practices:

  • Compress images
  • Reduce unnecessary files
  • Load only what’s needed
  • Cache repeated data

Better performance improves:

  • User experience
  • Accessibility
  • Search engine ranking

10. Basic Security Concepts

Security protects users and data.

Essential ideas:

  • HTTPS encrypts data in transit
  • Input validation prevents malicious data
  • Authentication verifies users
  • Authorization controls access

Common risks:

  • Exposing sensitive data
  • Accepting unvalidated input
  • Trusting the client too much

Rule of thumb:

Never trust data coming from the browser.

11. A Simple Mental Model

You can think of a modern website like this:

  • Browser: Displays and interacts
  • Frontend: Structure, style, behavior
  • Backend: Logic and rules
  • Database: Data storage
  • APIs: Communication layer

Each part has a clear responsibility.

Final Thoughts

Modern websites are not magic. They follow a clear and predictable flow:

  • Request
  • Processing
  • Response
  • Rendering
  • Interaction

Understanding this flow is more important than learning any specific framework.Once the fundamentals are clear, tools and technologies start making sense naturally.

Muhammad Zaheer

I work on web fundamentals, frontend–backend architecture, and performance.Connect with me on LinkedIn and see my work at the company website.

Top comments (0)