Forem: Gourav Ghosal

The Rise of the Specialist: Why Small Language Models are the Future of Enterprise AI

Gourav Ghosal — Thu, 06 Nov 2025 16:37:07 +0000

Part I: Redefining the Landscape - Beyond the Hype of Scale

Introduction: The Paradigm Shift from "Bigger is Better" to "Fit for Purpose"

The artificial intelligence landscape has been dominated by a compelling narrative: bigger is better. The proliferation of Large Language Models (LLMs), characterized by an "arms race" among technology giants to develop ever-larger systems, has cemented the idea that model scale is the primary determinant of capability. However, as the AI market matures, this paradigm is being challenged. A more nuanced, strategic approach is emerging, centered on the principle of "fit for purpose". For a significant and growing number of enterprise applications, the massive scale of LLMs represents not just overkill, but a strategic and economic liability.

This report posits that Small Language Models (SLMs) represent the next frontier of value creation in enterprise AI. This shift is not a rejection of the power of LLMs, but rather an evolution toward a more sophisticated, portfolio-based strategy where specialized, efficient, and controllable SLMs handle the majority of defined business tasks. The initial focus on sheer model size is giving way to a more pragmatic emphasis on domain-specific accuracy, operational efficiency, cost-effectiveness, and governance—areas where SLMs provide a decisive advantage.

Deconstructing the Models: An Architectural and Operational Comparison

Defining the Terms

LLMs: Vast scale and general-purpose, parameter counts ranging from tens of billions to over a trillion, trained on massive, diverse datasets from the internet.
SLMs: Comparatively smaller size (few million to <10B parameters), specialized focus, trained/fine-tuned on curated datasets for specific tasks.

The Architectural Divide

Parameter Count: GPT-4 (~1.76T parameters) vs. Phi-3 (3.8B) or Mistral 7B (7.3B).
Neural Network Depth: LLMs often 48+ layers, SLMs 6–12 layers optimized for efficiency.
Attention Mechanisms: LLMs use full self-attention (quadratic costs); SLMs use efficient alternatives (sliding window, sparse attention).

Divergent Training Philosophies

LLMs: Internet-scale, broad datasets.
SLMs: Domain-specific, curated datasets → higher accuracy, less noise.

The SLM Creation Toolkit

Knowledge Distillation: Teacher-student model compression.
Pruning: Remove redundant weights/neurons/layers.
Quantization: Reduce precision (e.g., FP32 → INT8) for smaller, faster models.

Deeper Insights: The "Quality over Quantity" Training Revolution

Recent SLMs like Llama 3 8B and Phi family show that training data quality outweighs raw parameter counts. For example:

Phi-3 Mini (3.8B) rivals Mixtral 8x7B and GPT-3.5.
Llama 3 8B outperforms Llama 2 70B on reasoning and coding benchmarks.

This democratizes AI development—quality curation over sheer compute resources—and reframes enterprise proprietary data as a strategic asset for building competitive SLMs.

Part II: The Strategic Imperative - Quantifying the SLM Advantage

The Economic Case: Drastic Reductions in Total Cost of Ownership (TCO)

Training/Fine-Tuning Costs: LLM training costs tens/hundreds of millions. SLM fine-tuning can cost as little as \$20/month.
Inference/Operational Costs: 7B SLMs are 10–30x cheaper to serve than 70–175B LLMs.
Infrastructure Costs: LLMs need high-end GPU clusters. SLMs can run on CPUs or consumer GPUs.

Performance and Efficiency: Speed, Latency, and Sustainability

Inference Speed: SLMs <300ms vs. LLMs >1s.
Edge Deployment: SLMs run offline on devices (smartphones, IoT, vehicles).
Sustainability: Lower energy consumption and carbon footprint.

Control and Governance: Enhancing Security, Privacy, and Compliance

Privacy/Security: On-premise/private cloud deployment keeps data in-house.
Bias/Safety: Smaller curated datasets → easier auditing and fairness.
Transparency: Simpler architecture → better interpretability.
Independence: Avoid lock-in with external API providers.

Deeper Insights: The Compounding Value of On-Device AI

On-device deployment resolves LLM trade-offs in latency, privacy, and cost. Applications become:

Faster (real-time interactions).
Safer (no cloud data transmission).
Cheaper (fixed deployment cost vs. per-token fees).

Part III: The Evidence - Benchmarks and Performance in the Real World

The Proof in the Numbers

Table 1: Llama 3 8B vs. Llama 2 Family

Benchmark	Llama 3 8B (Instruct)	Llama 2 70B (Instruct)	Llama 2 13B (Instruct)	Llama 2 7B (Instruct)
MMLU (5-shot)	68.4	52.9	47.8	34.1
GPQA (0-shot)	34.2	21.0	22.3	21.7
HumanEval (0-shot)	62.2	25.6	14.0	7.9
GSM-8K (8-shot, CoT)	79.6	57.5	77.4	25.7
MATH (4-shot, CoT)	30.0	11.6	6.7	3.8

Table 2: Phi-3 vs. GPT-4/3.5

Benchmark	Phi-3.5-MoE-instruct	GPT-4 (0613)	Phi-3-mini (3.8B)
MMLU	78.9%	86.4%	69.0%
HumanEval	70.7%	67.0%	--
MATH	59.5%	42.0%	--

Table 3: Gemma vs. Llama 3 (SLM Variants)

Benchmark	Llama 3.2 1B	Gemma 3 1B
MMLU (5-shot)	49.3%	38.8%
GSM8K (8-shot, CoT)	44.4%	62.8%

Table 4: Quantifying Operational Gains

Metric	SLM	LLM
Inference Cost	10–30x cheaper	10–30x more expensive
Example Monthly Cost	Mistral-7B: \$300–\$515 / 100M tokens	GPT-4: \$9,000 / 100M tokens
Inference Latency	<300ms	>1s
Energy Efficiency (Code Gen)	Same or less in >52% of outputs	Higher per output
VRAM Usage	~6 GB (quantized Mistral-7B)	High-end GPUs required

From Lab to Live: Enterprise Case Studies

Case Study 1: Microsoft Supply Chain Optimization

Challenge: Natural language interface for Azure logistics APIs.
Solution: Fine-tuned Phi-3, Llama 3, and Mistral with 1,000 examples.
Result: Phi-3 mini (3.8B) achieved 95.86% accuracy vs. GPT-4-turbo's 85.17% (20-shot).
Key Takeaway: SLMs can outperform LLMs in structured, API-driven enterprise tasks.

Case Study 2: Airtrain in Healthcare & E-commerce

Healthcare: On-premise patient intake chatbot, GPT-3.5-like quality, but compliant and cost-effective.
E-commerce: Product recommendation engine → reduced latency + cost, improved personalization.
Key Takeaway: SLMs deliver accuracy + privacy + efficiency in regulated and customer-facing industries.

Conclusion

SLMs are not merely a lightweight alternative to LLMs; they are the future of enterprise-grade AI. Their advantages in cost, speed, governance, and privacy make them the natural choice for specialized, scalable, and sustainable deployments. The strategic imperative is clear: fit-for-purpose SLMs will define the next era of enterprise AI innovation.

Create a fullstack Next.js 15 app with Drizzle ORM, Postgresql, Docker

Gourav Ghosal — Sat, 15 Mar 2025 17:10:30 +0000

In modern web development, integrating a robust backend with a responsive frontend is crucial for building powerful and scalable applications. With Next.js, creating dynamic full stack applications have become easier with the usage of server components. No dynamic application can work without a scalable and powerful database. While NoSQL databases like MongoDB, are widely used, many industries still stick to SQL databases.

In this guide, we'll explore how to set up a full stack Next.js application using Drizzle ORM for database interactions, PostgreSQL for relational data storage, and Docker for environment consistency.

What well build

In this tutorial, we will create a simple task manager application that allows users to:

Create, read, update, and delete tasks.
Persist data using PostgreSQL.
Use Drizzle ORM to simplify database queries.
Leverage Docker for seamless development and deployment.

Prerequisites

To get started with this project, we will need the following to be installed:

Node.js(v18 or later)
Docker
An IDE (e.g. VS Code)

and some basic knowledge of Typescript.

Step 1: Setup the Next.js project

To setup the Next.js project, we need to run the following commands

npx create-next-app@latest next-drizzle-docker --use-pnpm

We will be using pnpm as our package manager. Ensure you select Typescript and App Router during installation.

Navigate into the project directory and install dependencies

cd next-drizzle-dockerpnpm install

Install additional dependencies

pnpm add postgres drizzle-orm drizzle-kit

Step 2 : Configure PostgreSQL with Docker Compose

Create a docker-compose.yaml file in the root directory to set up a PostgreSQL Database

version: '3.8'services: postgres: image: postgres:15 container_name: next_postgres environment: POSTGRES_USER: admin POSTGRES_PASSWORD: admin POSTGRES_DB: tasks_db ports: - "5432:5432" volumes: - postgres_data:/var/lib/postgresql/datavolumes: postgres_data:

Spin up the PostgreSQL service with the following command:

docker-compose up -d

Verify that the database is running:

docker ps

Step 3: Set Up Drizzle ORM

Initialize Drizzle ORM

Create a drizzle.config.ts file in the project root:

import { defineConfig } from 'drizzle-kit';export default defineConfig({ out: './drizzle', schema: './db/schema.ts', dialect: 'postgresql', dbCredentials: { url: process.env.DATABASE_URL || "postgres://admin:admin@localhost:5432/your_db", },});

In the package.json file, create a new script to perform migrations.

"scripts": { // other required scripts "migrate": "drizzle-kit generate && drizzle-kit push"}

Create a PostgreSQL instance

In the root of the project create a config folder and a db subfolder (can vary according to your file conventions). In the db subfolder, create an index.ts file and create a postgres instance.

import { drizzle } from "drizzle-orm/postgres-js";import postgres from "postgres";import type { PostgresJsDatabase } from "drizzle-orm/postgres-js";// Dev environment solve for "sorry, too many clients already"declare global { // eslint-disable-next-line no-var -- only var works here var db: PostgresJsDatabase | undefined;}let db: PostgresJsDatabase;if (process.env.NODE_ENV === "production") { db = drizzle(postgres(`${process.env.DATABASE_URL}`));} else { if (!global.db) global.db = drizzle(postgres(`${process.env.DATABASE_URL}`)); db = global.db;}export { db };

Create the Database Schema

In the root of the project directory, create a db/schema.ts file where the data schema will be stored.

import { pgTable, serial, text, boolean } from "drizzle-orm/pg-core";export const tasks = pgTable("tasks_table", { id: serial("id").primaryKey(), title: text().notNull(), description: text().notNull(), completed: boolean().default(false),});

Step 4: Create the backend logic

We will write all the database operations in side a repositories folder.

import { db } from "@/config/db"import { tasks } from "@/config/db/schema"import { determinePagination } from "@/lib/utils"import { count, eq, sql } from "drizzle-orm"const taskReponseBody = { id: tasks.id, title: tasks.title, description: tasks.description, completed: tasks.completed}// create prepared statements for optimized queriesconst allTasksCount = db.select({ total: count() }) .from(tasks).prepare("all_tasks_count")const allTasksQuery = db.select(taskReponseBody) .from(tasks) .limit(sql.placeholder('size')) .offset((Number(sql.placeholder('page')) - 1) * Number(sql.placeholder('size'))) .prepare("all_tasks")const getAllTasks = async (page = 1, size = 10) => { try { const [totalResult, data] = await Promise.all([allTasksCount.execute(), allTasksQuery.execute({ page, size }),]); const total = totalResult[0].total return { total, data, ...determinePagination(total, page, size) }; } catch (error: unknown) { if (error instanceof Error) throw new Error(error.message); }}

The determinePagination function helps communicating to the frontend regarding pagination status.

function determinePagination(total: number, page: number, page_size: number) { if (total <= 0 || page <= 0) { // No pages available if total is 0 or negative or page number is invalid return { hasNextPage: false, hasPrevPage: false }; } const totalPages = Math.ceil(total / page_size); // Total number of pages const hasPrevPage = page > 1 && page <= totalPages; const hasNextPage = page < totalPages; return { hasNextPage, hasPrevPage };}

Similarly, we can write the functions to create, update and delete tasks.

const createNewTask = async (data: typeof tasks.$inferInsert) => { if (!data.title) throw new Error("Title is required") const createdTask = await db.insert(tasks).values({ title: data.title, description: data.description, completed: data.completed }).returning(); return createdTask;}const deleteTask = async (id: number) => { const deletedTask = await db.delete(tasks).where(eq(tasks.id, id)).returning(); return deletedTask;}type UpdateTaskType{ id: number, title?: string, description?: string, completed?: boolean }const updateTask = async (data: ) => { if (!data.id) throw new Error("Task id is required") const updatedTask = await db.update(tasks).set(data).where(eq(tasks.id, data.id)).returning(); return updatedTask;}

Step 5: Create APIs to communicate with frontend

In the app directory, create a new folder named api and a sub folder tasks to create the route.

app/ api/ tasks/ [taskId]/ route.ts route.ts

In the tasks/route.ts file, we will write the code for listing all tasks and creating a new task.

import { NextRequest, NextResponse } from "next/server";import { createNewTask, getAllTasks } from "@/repositories/tasks.repositories";// GET tasksexport async function GET(req: NextRequest) { const searchParams = req.nextUrl.searchParams try { const page = Number(searchParams.get('page')) || 1; const size = Number(searchParams.get('size')) || 1; const allTasks = await getAllTasks(page, size); return NextResponse.json(allTasks); } catch (error) { if (error instanceof Error) { return NextResponse.json({ message: error.message }, { status: 500 }); } }}// POST taskexport async function POST(req: Request) { try { const { title, description, completed } = await req.json(); const newTask = await createNewTask({ title, description, completed }); return NextResponse.json(newTask); } catch (error) { if (error instanceof Error) { return NextResponse.json({ message: error.message }, { status: 500 }); } }}

When we want to update the task, or delete the task, we would be using the path parameters.

In the [taskId]/route.ts, we will write the PATCH and DELETE methods.

export async function PATCH(req: Request, { params }: { params: Promise<{ taskId: string }> }) { try { const taskId = (await params).taskId if (!taskId || isNaN(Number(taskId))) throw new Error("Task id is required to delete record") const data = await req.json(); const updateObject: { id: number, title?: string, description?: string, completed?: boolean } = { id: Number(taskId) }; if (data.title !== undefined) updateObject.title = data.title; if (data.description !== undefined) updateObject.description = data.description; if (data.completed !== undefined) updateObject.completed = data.completed; const updatedTask = await updateTask(updateObject) return NextResponse.json({ message: "Task updated", data: updatedTask }); } catch (error) { if (error instanceof Error) { console.log(error) return NextResponse.json({ message: error.message }, { status: 500 }); } }}// DELETE taskexport async function DELETE(req: Request, { params }: { params: { taskId: string } }) { try { const id = params.taskId; if (!id || isNaN(Number(id))) throw new Error("Task id is required to delete record"); await deleteTask(Number(id)); return NextResponse.json({ message: "Task deleted" }); } catch (error) { if (error instanceof Error) { return NextResponse.json({ message: error.message }, { status: 500 }); } }}

Step 6 : Integrate the frontend

Below is a very rudimentary code for integrating the APIs. For a more detailed and better version, please checkout the GitHub repository here !

"use client";import { useState, useEffect } from "react";const TaskManager = () => { const [tasks, setTasks] = useState([]); const [newTask, setNewTask] = useState(""); const fetchTasks = async () => { const res = await fetch("/api/tasks"); const data = await res.json(); setTasks(data); }; const addTask = async () => { await fetch("/api/tasks", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ title: newTask }), }); setNewTask(""); fetchTasks(); }; const deleteTask = async (id: number) => { await fetch("/api/tasks", { method: "DELETE", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id }), }); fetchTasks(); }; useEffect(() => { fetchTasks(); }, []); return ( <div> <h1>Task Manager</h1> <input value={newTask} onChange={(e) => setNewTask(e.target.value)} placeholder="New task" /> <button onClick={addTask}>Add Task</button> <ul> {tasks.map((task: any) => ( <li key={task.id}> {task.title}{" "} <button onClick={() => deleteTask(task.id)}>Delete</button> </li> ))} </ul> </div> );};export default TaskManager;

Step 7: Run Your Application

Start the Next.js development server:

pnpm run dev

Visit http://localhost:3000 to view your application.

Step 8: Deploy with Docker

To prepare your app for deployment, create a Dockerfile in your project root:

# Use an official Node.js runtime as the base imageFROM node:20-alpine# Set the working directory in the containerWORKDIR /app# Copy package.json and pnpm-lock.yaml (if you have one)COPY package*.json pnpm-lock.yaml* ./# Install pnpmRUN npm install -g pnpm# Install dependenciesRUN pnpm install # Copy the rest of the application codeCOPY . .# Build the Next.js applicationRUN pnpm build# Expose the port the app runs onEXPOSE 3000# Start the applicationCMD ["pnpm", "start"]

Build and run your Docker container:

docker build -t next-drizzle-app .docker run -p 3000:3000 next-drizzle-app

Conclusion

Youve successfully built and containerized a fullstack Next.js application using Drizzle ORM , PostgreSQL , and Docker. This setup provides a scalable foundation for more complex applications while maintaining flexibility and ease of development.

Whats next? You could:

Add user authentication with Auth.js.
Extend the database schema to support relationships.
Deploy the app to platforms like Cloud Run, Digital Ocean etc.

Anthropic's Model Context Protocol (MCP): A New Era in AI Integration

Gourav Ghosal — Sat, 15 Mar 2025 17:02:26 +0000

Advancements in AI are progressing faster than anyone expected. What seemed like a game-changing move by DeepSeek has now been eclipsed by Anthropic’s latest breakthrough — the Model Context Protocol (MCP).

In this blog, I'll walk you through what MCP is, why it matters, and how you can build your own MCP host and tools to enhance AI capabilities.

What is Model Context Protocol?

Anthropic’s Model Context Protocol is a new standard for connecting AI assistants to real-world data sources — including content repositories, business tools, and development environments. Its goal is to enable AI models to produce more accurate and context-aware responses by integrating them with live, structured data.

Why Choose MCP?

AI assistants have become mainstream, but their performance has been inconsistent across industries. While some sectors have seen significant improvements, others remain skeptical due to AI's inability to provide accurate responses based on specific data sources.

Several methods have been used to address this issue:

Model Fine-Tuning

After pretraining, LLMs are fine-tuned on specific datasets to adapt to specialized domains (e.g., medical or legal texts). Fine-tuning helps models understand niche terminology and context.
Retrieval-Augmented Generation (RAG)

Instead of relying solely on internal knowledge, RAG allows models to query external databases or APIs for real-time information. This improves accuracy and keeps the model updated without retraining.
Prompt Engineering

Carefully structuring prompts improves the quality of responses by defining roles, providing context, and setting clear instructions.

MCP doesn’t aim to replace these methods — it enhances them.

Advantages of MCP:

✅ Structured information exchange between applications and LLMs

✅ Standardized input/output formats for consistent interactions

✅ Reduced hallucinations and increased reliability through structured prompting

✅ Easy to implement without extensive infrastructure

✅ Works with existing models without requiring modifications

Architecture

MCP follows a client-server architecture designed for seamless communication between AI models and external systems.

Core Components:

Hosts – LLM applications (e.g., Claude Desktop or IDEs) that initiate connections
Clients – Maintain 1:1 connections with servers inside the host application
Servers – Provide context, tools, and prompts to the client

Fig. MCP Architecture (Source: Model Context Protocol Docs)

MCP Clients

MCP clients are the software that connect to your server and gives users response. The following documentation lists some of the majorly used and supporting clients:

https://modelcontextprotocol.io/clients

Build Your Own MCP Server

For this example, I'll use TypeScript to set up an MCP server. To keep things simple, we'll focus on servers, tools, and transport. More advanced configurations will be covered in a future post.

Step 1: Set Up the Server

Create a basic MCP server using TypeScript:

// src/index.js
const server = new Server({
    name: "gourav-mcp-server",
    version: "1.0.0",
});

Step 2: Define the Tools

Tools are functions that allow the LLM to perform specific actions, like making API calls, fetching data, or processing inputs. In this example, we'll create a tool that fetches a random fact and provides a snarky analysis.

// src/index.js
server.setRequestHandler(ListToolsRequestSchema, async () => {
    return {
        tools: [{
            name: "random_facts",
            description: "returns random facts",
            inputSchema: {
                type: "object",
                properties: {
                    fact: { type: "string" }
                }
            }
        }]
    };
});

Step 3: Configure the Tool

Next, configure the tool to fetch the random fact:

// src/index.js
server.setRequestHandler(CallToolRequestSchema, async (request) => {
    if (request.params.name === "random_facts") {
        const req = request.params.arguments;
        console.log(req?.fact);
        try {
            const res = await fetch('https://uselessfacts.jsph.pl/api/v2/facts/random', {
                method: 'GET',
                headers: {
                    "Content-Type": "application/json"
                }
            });
            return {
                toolResult: await res.json(),
            };
        } catch (error) {
            console.error("Error fetching random fact:", error);
            throw new McpError(ErrorCode.InternalError, "Failed to fetch random fact");
        }
    }
    throw new McpError(ErrorCode.MethodNotFound, "Tool not found");
});

Finally, register the transport mechanism, and then you're ready to test.

const transport = new StdioServerTransport();
await server.connect(transport);

Step 5: Register the Server

Add the server configuration to claude_desktop_config.json so that Claude Desktop can recognize and use it:

{
  "mcpServers": {
    "gourav-mcp-server-2": {
      "command": "node",
      "args": [
        "path/to/index.js"
      ]
    }
  }
}

Step 6: Test the Integration

Restart Claude Desktop, and you should see the MCP tool listed:

When you query the LLM for a random fact, it will now use the configured MCP tool rather than relying solely on its internal knowledge:

Conclusion

The Model Context Protocol (MCP) represents a significant step forward in AI integration. By enabling structured communication between LLMs and real-world data sources, MCP makes AI more reliable, accurate, and context-aware.

With the example above, you’ve seen how easy it is to create your own MCP server and tool. By configuring MCP to access specialized data sources, you can significantly enhance the performance and usefulness of AI models in real-world applications.

MCP isn’t just another tool — it’s a foundational layer for the next generation of AI-powered systems.

A Beginner’s approach to Responsive Design

Gourav Ghosal — Sun, 16 Feb 2025 13:05:09 +0000

If you’re reading this blog, let us assume you already have some basic knowledge and practical knowledge on how to structure your website using HTML and basic CSS.

In this blog, we’ll be covering some aspects of responsive design, why it is needed, and how to implement such a design.

What is Responsive Design?

Responsive Design is an approach where layouts become fluid and can automatically mold themselves according to the screen sizes and viewports.

It does not require any additional technology and can be implemented with the existing stylesheet.

In this blog, we’ll be talking about Responsive Web Design.

Responsive Web Design

Imagine a scenario — You’ve created an amazing website with great design ideas and good content. But that is limited to your computer screen only. The minute you take out your phone to test it, the design is all broken. There is a huge scroll or even unreadable content. No one wants to see that.

To give the most fulfilling client experience, you need to ensure that your site looks similarly great on screens of every kind. That is the reason why having a site with a responsive design is significant.

The facts confirm that most of the online traffic is coming from portable yet the work area is as yet a nearby second, and a responsive plan will assist you with defeating the two universes. It keeps up with the respectability of your site content yet adjusts it to deliver fittingly as per the points of interest of various gadgets, making it easier to understand.

Fig: Representation of responsive vs non-responsive design.

website:www.galleria-de-artiste.netlify.app

How to implement Responsive Web Design(RWD)?

In this blog, we’ll talk about 5 ways to implement RWD.

1. using media queries

2. using flexbox

3. using grid

4. using relative units

5. using packages/frameworks/libraries

Media Queries:

Media queries allow developers to apply CSS styles depending on a device’s general type (such as print vs. screen) or other characteristics such as screen resolution or browser viewport width. Media queries are used for the following:

· To conditionally apply styles with the CSS @media and @import at-rules.

· To target specific media for the <style>, <link>, <source>, and other HTML elements with the media= attribute.

· To test and monitor media states using the Window.matchMedia() and MediaQueryList.addListener() JavaScript methods.

A media query is composed of an optional media type and any number of media feature expressions, which may optionally be combined in various ways using logical operators. Media queries are case-insensitive.

A common approach when using Media Queries is to create a simple single-column layout for narrow-screen devices (e.g. smartphones), then check for wider screens and implement a multiple-column layout when you know that you have enough screen width to handle it. Designing for mobile first is known as mobile-first design.

Media type includes: all, screen, print (default is all)

To begin with, you can simply start by writing the syntax as such:

@media {}

Since this is a beginner's guide, let's focus on using the screen as a media type only.

We can specify some targeted features, i.e. we can specify some particular device width for which the designs will be different.

h1 {
font-size: 50px;
}
@media (max-width:480px)
{
 h1 {
    font-size:20px; 
    }
}

In this snippet, 50px is applied to the h1 tag across all screens. However, whenever the device width is less than 480px (generally considered for small screens such as smartphones), the font size for all h1 tags would become 20px.

Combining multiple types or features:

The and keyword combines a media feature with a media type or other media features. This example combines a media type screen and two media features to restrict styles to portrait-oriented devices with a width of at most 480px:

h1 {
font-size: 50px;
}
@media screen and (max-width:480px) and (orientation:potrait)
{
 h1 {
    font-size:20px ;
    }
}

Testing for multiple queries

You can use a comma-separated list to apply styles when the user’s device matches any one of various media types, features, or states. For instance, the following query will apply styles if the user’s device has either a minimum height of 780px or is a screen device in portrait mode:

h1 {
font-size: 50px;
}
@media (min-height:780px), screen and (orientation:potrait)
{
 h1 {
    font-size:20px ;
    }
}

Flexbox:

Flex layout offers a row/column-based one-dimensional layout where the items can flex(expand) or shrink based on layout requirements.

According to the available space in their container, flex elements in Flexbox can grow or shrink, redistributing space between them as necessary. You may specify how you want the objects to react when they meet more or less space by adjusting the values for flex-grow and flex-shrink.

The following example shows the container to occupy the entire width available based on the space. The children are distributed in a 1:2:1 ratio of width.

If you’re new to Flexbox, I suggest reading about it from here.

.container
{
flex: 1;
}
.child1,.child3
{
flex: 1;
}
.child2
{
flex:2;
}

CSS Grid:

In CSS Grid Layout the fr unit allows the distribution of available space across grid tracks. This example creates a grid container with three tracks sized at 1fr. This will create three column tracks, each taking one part of the available space in the container.

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

The alignment can be changed to rows by simply replacing grid-template-columns with grid-template-rows.

If you’re not familiar with the layout and structure of a grid, it’s recommended to learn more about it from here.

Using relative units

While mentioning sizes, we generally should avoid the use of absolute units like px, pt, etc.

Rather, the usage of relative units such as %,vw,vh,em,rem should be encouraged to increase responsiveness with minimal amounts of code redundancy.

Here are the relative units and their definitions, sourced from https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

em : Font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width.

ex: x-height of the element’s font.

ch : The advance measure (width) of the glyph “0” of the element’s font.

rem: Font size of the root element.

lh: Line height of the element.

rlh: Line height of the root element. When used on the font-size or line-height properties of the root element, it refers to the properties’ initial value.

vw: 1% of the viewport’s width.

vh: 1% of the viewport’s height.

vmin: 1% of the viewport’s smaller dimension.

vmax: 1% of the viewport’s larger dimension.

vb: 1% of the size of the initial containing block in the direction of the root element’s block axis.

vi: 1% of the size of the initial containing block in the direction of the root element’s inline axis.

svw, svh: 1% of the small viewport’s width and height, respectively.

lvw, lvh : 1% of the large viewport’s width and height, respectively.

dvw, dvh: 1% of the dynamic viewport’s width and height, respectively.

An example might clear out any doubts about the usage of these units.

.wrapper {
    font-size: lem;
}
.box
{
    background: #007bff ;
    margin:20px;
    width: auto;
    color:#fff;
}
.px {
    width: 200px;
}
.vw {
    width: 10vw;
}
.em {
    width: 10em;
}
.rem { 
    width: 10rem;
}
.vh {
    height:l0vh;
}

Using frameworks/libraries/packages

Several libraries like Bootstrap or Tailwind have predefined class names that enable the usage of responsive design.

<!-- tailwind css !-->
<div class="w-96 bg-white shadow rounded">
    w-96
</div>
<!-- bootstrap css !-->
<div class="row">
    <div class="col-md-6">
        col-md-6
    </div>
</div>

You can explore more on these on the official docs of Bootstrap and Tailwind.

Summary

A website or application that adapts to the environment in which it is viewed is said to have a responsive design. It includes many CSS and HTML capabilities and approaches and is now practically the only way we create webpages.

With the aid of the layout techniques you have learned in these classes, it has also become much simpler to create responsive designs. Today, web developers have access to a far wider range of tools than they had in the early days of responsive design. Even while the older tutorials are still helpful, it is far simpler to develop beautiful and practical designs using contemporary CSS and HTML, regardless of the device a visitor is using to access the website.