Code With Ajnas

The Essential Technologies Behind Modern Websites

Ajnas Ahammed — Mon, 21 Sep 2026 09:42:25 GMT

A modern website is much more than a collection of HTML pages.

Today, websites need to be fast, responsive, secure, accessible, search-engine friendly, and capable of delivering a smooth experience across different devices. Behind that experience is a combination of technologies working together.

Whether you're learning web development or building websites for businesses, understanding these technologies gives you a much clearer picture of how the web actually works.

1. HTML: The Structure of the Web

HTML, or HyperText Markup Language, provides the basic structure of a webpage.

It defines elements such as:

Headings
Paragraphs
Images
Links
Forms
Tables
Navigation

For example:

Welcome to My Website
This is a simple webpage.
About Me

HTML isn't responsible for making a website visually attractive. Its main job is to describe the content and structure.

Using semantic HTML is also important for accessibility and SEO.

2. CSS: Making Websites Look Good

CSS, or Cascading Style Sheets, controls the appearance of a website.

With CSS, developers can control:

Colors
Typography
Spacing
Layout
Animations
Responsive design
Dark and light themes

Modern CSS includes powerful features such as Flexbox, Grid, custom properties, media queries, and container queries.

For example:

.card {
    display: flex;
    gap: 20px;
    padding: 20px;
    border-radius: 12px;
}

CSS allows the same website to adapt to phones, tablets, laptops, and large displays.

3. JavaScript: Adding Interaction

HTML creates the structure and CSS controls the appearance. JavaScript adds behavior.

JavaScript can be used to create:

Interactive menus
Form validation
Dynamic content
Search functionality
Animations
Real-time applications
API integrations

A simple example:

const button = document.querySelector("button");

button.addEventListener("click", () => {
    alert("Hello!");
});

JavaScript has also evolved far beyond browser scripting. With technologies such as Node.js, it can be used to build backend applications as well.

4. Frontend Frameworks

As applications become more complex, writing everything with plain JavaScript can become difficult to maintain.

That's where frameworks and libraries come in.

Popular technologies include:

React
Vue
Angular
Svelte
Next.js

These tools help developers organize large applications into reusable components.

For example, instead of repeatedly creating the same button, card, or navigation structure, developers can create reusable components.

This makes development more organized and scalable.

5. Backend Technologies

The frontend is only one part of a modern website.

Many websites need a backend to handle things such as:

User authentication
Database operations
Payments
File uploads
APIs
Business logic
Admin dashboards

Popular backend technologies include:

Node.js
Python
Java
PHP
Go
C#

For example, Node.js allows developers to build server-side applications using JavaScript.

An Express.js application might expose an API like:

app.get("/api/users", (req, res) => {
    res.json({
        message: "Users endpoint"
    });
});

The frontend can then communicate with this API.

6. Databases

Web applications often need to store information.

This could include:

User accounts
Products
Orders
Blog posts
Messages
Analytics data

Databases generally fall into two major categories: relational and non-relational.

Relational databases

Examples include:

PostgreSQL
MySQL
MariaDB

They organize information into tables and relationships.

NoSQL databases

Examples include:

MongoDB
Redis
DynamoDB

They use different data models and can be useful for applications with particular scalability or data-structure requirements.

Choosing a database depends on the application's requirements rather than simply choosing the most popular option.

7. APIs

APIs allow different parts of a system to communicate.

For example:

Frontend
   ↓
API
   ↓
Backend
   ↓
Database

A website might request:

GET /api/products

The server processes the request and returns data, often in JSON format:

{
    "name": "Laptop",
    "price": 75000
}

APIs are fundamental to modern web applications because they allow different services and applications to communicate with each other.

8. Git and Version Control

Writing code is only part of development. Managing changes is equally important.

Git allows developers to track changes in their projects.

Common commands include:

git init
git add .
git commit -m "Initial commit"
git push

Platforms such as GitHub and GitLab make it easier to collaborate, review code, manage issues, and deploy projects.

Version control becomes especially important when multiple developers are working on the same project.

9. Web Hosting and Deployment

Once a website is built, it needs to be accessible on the internet.

Depending on the project, developers can use platforms such as:

Vercel
Netlify
Cloudflare
Render
Traditional web hosting

The deployment process can involve:

Code
 ↓
Git Repository
 ↓
Build
 ↓
Deployment
 ↓
Production Website

Modern deployment platforms can also automate this process whenever new code is pushed to a repository.

10. Performance Matters

A website can look great and still provide a poor experience if it loads slowly.

Performance optimization can involve:

Compressing images
Using modern image formats
Minimizing unnecessary JavaScript
Caching resources
Optimizing database queries
Using a CDN
Reducing unnecessary network requests

Performance isn't just a technical concern. It directly affects how users experience a website.

11. Security

Security should be considered from the beginning of development.

Common practices include:

Using HTTPS
Hashing passwords
Validating user input
Protecting authentication sessions
Preventing SQL injection
Using secure cookies
Managing secrets with environment variables
Keeping dependencies updated

For example, database credentials should never be hard-coded into publicly accessible source code.

Instead, developers commonly use environment variables:

DATABASE_URL=your_database_connection

12. SEO Is Still Important

Building a website isn't enough if nobody can discover it.

Search engine optimization helps search engines understand your website and its content.

Important technical SEO elements include:

Semantic HTML
Page titles
Meta descriptions
Canonical URLs
XML sitemaps
Robots.txt
Mobile responsiveness
Page performance
Structured data

SEO should not be treated as something added after development. It can be considered during the architecture and content planning stages.

Bringing Everything Together

A modern web application can look something like this:

                 User
                  │
                  ▼
            Web Browser
                  │
                  ▼
         Frontend Application
                  │
                  ▼
                 API
                  │
                  ▼
          Backend Application
                  │
          ┌───────┴───────┐
          ▼               ▼
       Database        External APIs

Each layer has a different responsibility.

The frontend focuses on the user experience.

The backend handles application logic.

The database stores information.

APIs connect different systems.

Infrastructure makes the application available to users.

SEO and performance help people discover and use the website effectively.

Final Thoughts

Modern web development isn't about mastering one technology.

It's about understanding how different technologies work together.

You don't need to learn everything at once. A strong learning path can start with:

HTML → CSS → JavaScript → Git → Backend → Database → APIs → Deployment → Performance → SEO

Once you understand these fundamentals, frameworks and advanced technologies become much easier to learn.

The tools will continue to change, but the underlying concepts of the web remain incredibly valuable.

If you're interested in web development, SEO, and digital marketing, you can also explore more of my work on my website.

Building a Secure REST API with Node.js and Express

Ajnas Ahammed — Thu, 17 Sep 2026 05:54:16 GMT

Modern web applications often depend on APIs to communicate between the frontend, backend, and databases. Whether you're building a dashboard, mobile application, or SaaS product, understanding how REST APIs work is an important backend skill.

In this article, we'll build a simple REST API using Node.js and Express.js, while following a structure that can later be extended with authentication and a database.

What We're Building

Our API will have endpoints for managing users:

GET     /api/users
GET     /api/users/:id
POST    /api/users
PUT     /api/users/:id
DELETE  /api/users/:id

The basic architecture looks like this:

Client
  │
  ▼
Express Server
  │
  ├── Routes
  │
  ├── Controllers
  │
  ├── Middleware
  │
  ▼
Database

Create the Project

Start by creating a new Node.js project:

mkdir node-rest-api cd node-rest-api npm init -y

Install Express:

npm install express

For development, you can also install Nodemon:

npm install --save-dev nodemon 2. Create the Server

Create an app.js file:

const express = require("express");

const app = express(); const PORT = 3000;

app.use(express.json());

app.get("/", (req, res) => { res.json({ message: "API is running 🚀" }); });

app.listen(PORT, () => { console.log(Server running on port ${PORT}); });

Run it:

node app.js

Visit:

http://localhost:3000

You should get:

{ "message": "API is running 🚀" } 3. Create Some Data

For now, we'll use an array instead of a database.

let users = [ { id: 1, name: "Ajnas", email: "ajnas@example.com" }, { id: 2, name: "John", email: "john@example.com" } ]; 4. GET All Users

We can create an endpoint that returns all users:

app.get("/api/users", (req, res) => { res.json(users); });

Request:

GET /api/users

Response:

[ { "id": 1, "name": "Ajnas", "email": "ajnas@example.com" }, { "id": 2, "name": "John", "email": "john@example.com" } ] 5. GET a Single User

Route parameters allow us to retrieve a specific user.

app.get("/api/users/:id", (req, res) => { const id = Number(req.params.id);

const user = users.find(user => user.id === id);

if (!user) {
    return res.status(404).json({
        message: "User not found"
    });
}

res.json(user);
});

Now:

GET /api/users/1

returns:

{ "id": 1, "name": "Ajnas", "email": "ajnas@example.com" }

6. Creating a User

For creating resources, we use POST.

app.post("/api/users", (req, res) => { const { name, email } = req.body;

if (!name || !email) {
    return res.status(400).json({
        message: "Name and email are required"
    });
}

const newUser = {
    id: users.length + 1,
    name,
    email
};

users.push(newUser);

res.status(201).json(newUser);

});

The request body:

{ "name": "Charlie", "email": "charlie@example.com" }

The API responds with:

{ "id": 3, "name": "Charlie", "email": "charlie@example.com" }

7. Updating a User

We can use PUT to update an existing resource:

app.put("/api/users/:id", (req, res) => { const id = Number(req.params.id);

const user = users.find(user => user.id === id);

if (!user) {
    return res.status(404).json({
        message: "User not found"
    });
}

user.name = req.body.name ?? user.name;
user.email = req.body.email ?? user.email;

res.json(user);

});

This lets us update only the fields we provide.

Deleting a User

Finally, we can implement DELETE:

app.delete("/api/users/:id", (req, res) => { const id = Number(req.params.id);

const exists = users.some(user => user.id === id);

if (!exists) {
    return res.status(404).json({
        message: "User not found"
    });
}

users = users.filter(user => user.id !== id);

res.json({
    message: "User deleted successfully"
});

}); A Better Project Structure

Once an application grows, keeping everything inside app.js becomes difficult.

A more maintainable structure could look like:

node-rest-api/
│
├── controllers/
│   └── userController.js
│
├── routes/
│   └── userRoutes.js
│
├── middleware/
│   └── errorHandler.js
│
├── models/
│   └── userModel.js
│
├── app.js
├── package.json
└── .env

This separation makes the application easier to maintain and extend.

What's Next?

The array we're using isn't suitable for a real production application.

The next step would be connecting the API to a database such as PostgreSQL or MongoDB.

From there, we could add:

Database
   ↓
Authentication
   ↓
Authorization
   ↓
Input Validation
   ↓
Error Handling
   ↓
Rate Limiting
   ↓
Logging
   ↓
Production Deployment

That's where a simple REST API starts becoming a real backend application.

Final Thoughts

Building a REST API is one of those projects that looks simple at first but teaches a lot about backend development.

You learn how HTTP methods work, how requests and responses are structured, how routing works, how to handle errors, and eventually how different parts of a backend application communicate.

I'm still exploring backend development myself, and projects like this are helping me understand what happens behind the interface of the applications we use every day.

More of my projects and experiments:

ajnasahammed.com