DEV Community: Gaurav Mehra

Make Your Website Responsive | Media Queries, Overflow, Box Shadows

Gaurav Mehra — Tue, 16 Sep 2025 17:21:58 +0000

When you build a website, it should look good on mobile, tablet, and desktop. This is called responsive design. In this post, we’ll learn three important CSS tools that help with responsiveness:

Media Queries
Overflow
Box Shadows (with spread-radius)

1. Difference between `max-width` and `min-width`

max-width → Styles apply when the screen is up to that size or smaller.

Example: @media (max-width: 600px) applies CSS for screens ≤ 600px.

👉 Good for shrinking layouts (desktop → mobile).
min-width → Styles apply when the screen is that size or bigger.

Example: @media (min-width: 601px) applies CSS for screens ≥ 601px.

👉 Good for growing layouts (mobile → desktop).

💡 Tip: Use min-width (mobile-first approach) because it is easier to scale designs as the screen grows.

2. Overflow

Sometimes content is bigger than its container. The overflow property controls how extra content behaves.

.box {
  width: 200px;
  height: 100px;
  overflow: auto; /* adds scrollbar if needed */
}
**

Types of Overflow**

visible → Default, content goes outside.
hidden → Cuts extra content.
scroll → Always shows scrollbars.
auto → Shows scrollbars only when needed.

3. Box Shadows (with Spread Radius)
Box shadows add depth and make elements look like cards or floating blocks.

.card {
  width: 250px;
  height: 150px;
  background: white;
  box-shadow: 0 4px 8px 5px rgba(0,0,0,0.2);
}

📌 Syntax:

box-shadow: offset-x offset-y blur-radius spread-radius color;**

offset-x → horizontal shadow (left/right)
offset-y → vertical shadow (top/bottom)
blur-radius → softness of the shadow
spread-radius → grows/shrinks the shadow in all directions
color → shadow color (with transparency)

👉 If spread-radius = 10px, shadow grows outward.
👉 If spread-radius = -5px, shadow shrinks inward.

*🎯 Demo Project: Responsive Card
*
Here’s a small demo project using all three concepts:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Card</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="card">
    <h2>Responsive Card</h2>
    <p>This card resizes on different screens. Try shrinking or growing the window!</p>
  </div>
</body>
</html>

CSS (style.css)

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f4f4f4;
  margin: 0;
  font-family: Arial, sans-serif;
}

.card {
  width: 90%;
  max-width: 400px;
  padding: 20px;
  background: white;
  border-radius: 10px;
  overflow: auto;
  box-shadow: 0 6px 12px 4px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

/* Mobile first */
@media (min-width: 600px) {
  .card {
    max-width: 600px;
    box-shadow: 0 8px 16px 8px rgba(0,0,0,0.2);
  }
}

@media (min-width: 900px) {
  .card {
    max-width: 800px;
    box-shadow: 0 10px 20px 12px rgba(0,0,0,0.2);
  }
}

✅ On mobile, the card is small and clean.
✅ On tablet, the card grows wider with a bigger shadow.
✅ On desktop, the card expands more with a stronger shadow effect.

Final Words

Use media queries to make your site look good on all devices.

Use overflow to handle content properly.

Use box shadows with spread-radius to add style and depth.

These simple tricks make your website look professional and responsive. 🚀

🌤️ Weather App using JavaScript – API Project

Gaurav Mehra — Wed, 30 Jul 2025 16:28:59 +0000

Hey DEV Community! 👋

I'm excited to share a project I recently completed — a Weather Application built using HTML, CSS, and JavaScript.
This was my first real experience working with APIs, and I learned a lot about how to fetch and display real-time data dynamically on a webpage.

🔗 Live Demo
Check it out here 👉 https://weather-app-gaurav-s-projects-d25bef28.vercel.app

- 💻 GitHub Repository
Source code available here 👉 https://github.com/Gaurav-creater317/Weather-App

- 🚀 About the Project

The weather app allows users to:
Search for any city 🌍
Get real-time temperature 🌡️
View weather conditions with icons ☁️
See humidity and wind speed 💧🌬️
Handle errors like "city not found" ❌

- 🛠️ Technologies Used

HTML – Structure
CSS – Styling
JavaScript – App Logic
OpenWeatherMap API – Weather Data
Vercel – Deployment

🧪 Key Features

✅ Fetch weather by city name

✅ Display weather icon, temperature, and description

✅ Shows humidity and wind speed

✅ Error handling for invalid inputs

✅ Responsive design

- 🧠 What I Learned

This project helped me understand:
Working with fetch() and async/await .
Parsing and using JSON data .
Dynamically updating the DOM .
Handling API errors gracefully.
Deploying projects using Vercel .

📸 Screenshots

🔍 Sample Code Snippet

async function getWeather(city) {
  const response = await fetch(
    `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY&units=metric`
  );

  if (!response.ok) {
    showError("City not found!");
    return;
  }

  const data = await response.json();
  updateUI(data);
}

- 💬 Final Thoughts

Building this weather app really boosted my confidence with JavaScript and API integration. 🌟
If you're just starting out with web development, I highly recommend trying out a project like this. It’s simple, useful, and gives you a hands-on experience working with real-world data.
Feel free to check out the app, explore the code, and let me know what you think. Feedback and suggestions are always welcome! 😊

*- Want help with your first API project? Drop a comment! Let’s connect and grow together 🚀
*

Project - Pic Discover App

Gaurav Mehra — Mon, 28 Jul 2025 11:37:33 +0000

🖼️ Pic Discover App – Search and Explore Beautiful Images with Unsplash API

Hey DEV community! 👋

I'm excited to share a fun and visually engaging project I recently built – Pic Discover App 🎉

It’s a simple and responsive web app that lets users search and browse stunning images using the Unsplash API.

🔍 What Is Pic Discover?

Pic Discover is a web-based image search engine where users can:

🔎 Type in any keyword (e.g., mountains, cats, coding)
🖼️ Instantly see high-quality photos from Unsplash
➕ Load more results with a "Show More" button
📱 Enjoy a responsive design across desktop and mobile

It’s ideal for photographers, designers, bloggers, or anyone looking for image inspiration.

🛠️ Built With

✅ HTML – Semantic layout
🎨 CSS – Fully responsive and stylish UI with hover animations
⚙️ JavaScript – Fetching and rendering images dynamically
🌐 Unsplash API – Free access to a huge collection of images

📸 App Features

✨ Real-time image search based on user input
🧭 Pagination with “Show More” feature
💡 Auto-clears previous results when a new search begins
🎯 Clickable image links that redirect to the full image on Unsplash
🧼 Clean and minimal UI with smooth animations

🚀 How It Works

User types a keyword in the input box
The app calls the Unsplash Search API with that query
Images are displayed dynamically using JavaScript
Users can click "Show More" to fetch the next page of results

📷

🧪 Live Demo

🔗 Try it out live

💻 View Source Code on GitHub

🧠 What I Learned

This project helped me understand:

How to work with third-party APIs
Making asynchronous requests using fetch()
DOM manipulation and dynamic rendering in vanilla JS
Creating a responsive layout with media queries
Optimizing UX with pagination and loading controls

💡 Future Improvements

Add loading spinners
Add dark/light theme toggle
Allow users to download or favorite images
Save recent search history in local storage

🙌 Final Thoughts

Pic Discover App was a great way to dive deeper into frontend development while building something interactive and useful.

If you’re looking to learn APIs or just want a fun UI project, try recreating this — it’s a rewarding experience!

Thanks for reading, and let me know your thoughts or suggestions in the comments 💬

Project - Prompt Mate (Your Personal AI Conversation Campaign )

Gaurav Mehra — Mon, 28 Jul 2025 11:16:06 +0000

🚀 Prompt Mate – Your Personal AI Conversation Companion using Next.js & Gemini API 💬

Hey DEV community! 👋

I'm thrilled to introduce my latest project – Prompt Mate – an AI-powered chat interface built using Next.js and Google Cloud’s Gemini API via Google AI Studio.

💡 What is Prompt Mate?

Prompt Mate is a Next.js web application that enables users to:

🧠 Chat with an AI assistant powered by Google’s Gemini model.
✍️ Send custom prompts and get intelligent, real-time responses.
📱 Experience a responsive and clean UI across devices.
🔐 Interact securely with Google Cloud-hosted functions.

Whether you're a developer, student, or AI enthusiast, Prompt Mate is designed to demonstrate the power of LLMs in a full-stack web application.

🛠️ Tech Stack

⚛️ Next.js – Full-stack React framework.
☁️ Google Cloud Gemini API – Used via API key.
🧪 Google AI Studio – For prompt testing and optimization .
🌐 Tailwind CSS – For styling the UI.
🔐 .env.local – Securing API keys in environment variables.
🔁 API Routes – To safely call Gemini from the server side.

🔧 Key Features

✅ Fully responsive chat interface.
🧠 Gemini AI-generated responses.
🔒 API key protected backend route in Next.js.
🌙 Dark mode ready (optional toggle).
🧼 Clean code structure and modular components.

📸

🔗 Live Demo & Code

🔍 Live Preview: Visit Prompt Mate

💻 GitHub Repo: View Source on GitHub

🧠 What I Learned

Seamlessly integrating Gemini API with Next.js serverless routes
Protecting API keys using .env.local and getServerSideProps
Building clean and intuitive UIs using Tailwind CSS
Testing and refining prompts with Google AI Studio

🎯 Final Thoughts

Working on Prompt Mate gave me a practical dive into generative AI development and deploying it on a modern full-stack framework.

It’s amazing how quickly you can build something powerful with the right APIs and tools.

I’d love your feedback and thoughts! 🌟

Feel free to fork, remix, or collaborate with me on future versions.

The Arcade Facilitator Program (Google Cloud)

Gaurav Mehra — Mon, 28 Jul 2025 10:50:45 +0000

🚀 About the Program ☁️

The Google Cloud Arcade Facilitator Program is a cloud learning initiative that helps students and developers gain practical knowledge by completing real-world labs and quests on Google Cloud Platform (GCP) using Cloud Skills Boost (Qwiklabs).

Throughout the program, I explored key areas like:

Compute Engine and Virtual Machines
Cloud Functions and Serverless
Kubernetes Engine and Containers
Cloud Storage and Databases
BigQuery and Data Analytics
IAM, Monitoring, and Logging

🧠 Experience

✨ Hands-on experience with GCP

✨ Real-world cloud infrastructure scenarios

✨ How to deploy, monitor, and manage cloud apps

✨ The importance of scalability, security, and automation in the cloud

These skills have boosted my confidence in using cloud tools effectively and solving industry-relevant challenges.

🏅 My Badges

You can view my public cloud profile here - https://www.cloudskillsboost.google/public_profiles/2c5d3eef-648d-40e7-a4d9-99eb59823e4e

🌟 Final Thoughts

This program has given me a deeper understanding of cloud computing and the confidence to work with Google Cloud in real projects. I'm excited to apply these skills in future internships and collaborations.

If you’re a student or developer interested in cloud computing, I highly recommend enrolling in this program when it's available!

How I Built a BMI Calculator

Gaurav Mehra — Mon, 28 Jul 2025 07:57:55 +0000

💡 Introduction

As part of my web development learning journey, I created a fun and useful project — a BMI (Body Mass Index) Calculator. This helped me practice HTML form inputs, JavaScript logic, and CSS styling in a real-world mini-project.

In this blog, I'll walk you through the complete HTML, CSS, and JavaScript code I used to build it — and share what I learned along the way.

⚙️ What is BMI?

BMI stands for Body Mass Index. It is a simple formula used to check if a person has a healthy weight.

📌 Formula:

BMI = weight (kg) / [height (m)]²

Based on your BMI, you can be categorized as underweight, normal, overweight, or obese.

🧱 HTML Structure

Here’s the complete HTML I used:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BMI Calculator</title>
  <link rel = "stylesheet" href = "style.css">
</head>
<body>
  <div class="container">
    <h1 class="heading">Body Mass Index(BMI) Calculator</h1>
    Your Height (cm):
    <input type="number" class="input" id="height" value="180" placeholder="Enter your height in cm...">
    Your Weight (kg):
    <input type="number" class="input" id="weight" value="80" placeholder="Enter your weight in kg...">
    <button class="btn" id="btn">Calculate BMI</button>
    <input disabled type="text" class="input" id="bmi-result">
     <h4 class="info-text">Weight Condition: <span id ="weight-condition"></span></h4>
  </div>
  <script src = "index.js"></script>

</body>
</html>

🎨 CSS Styling
Here’s how I styled the calculator using CSS:

body{
  margin:0;
  background:  linear-gradient(to left bottom, lightgreen , lightblue);
  display : flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  font-family: 'Courier New', Courier, monospace;
}

.container{
  background: rgba(255,255,255,.3);
  padding: 20px;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0,0,0,.3);
  margin: 5px;
}

.heading {
  font-size: 30px;
}

.input {
  padding: 10px 20px;
  font-size: 18px;
  background: rgba(255,255,255,.4);
  border-color: rgba(255,255,255,.5);
  margin: 10px;
}

.btn{
  background-color: lightgreen;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  margin: 10px;
  font-size: 20px;
  box-shadow: 0 0 4px rgba(0,0,0,.3);
  cursor: pointer;
}

.btn:hover{
  box-shadow: 0 0 8px rgba(0,0,0,.3);
  transition: all 300ms ease;
}

.info-text{
  font-size: 20px;
  font-weight: 500;
}

🧠 JavaScript Logic
This is the JavaScript code that powers the BMI calculation and updates the result on the screen:

const btnEl = document.getElementById("btn");
const bmiInputEl = document.getElementById("bmi-result");
const weightConditionEl = document.getElementById("weight-condition")

function calculateBMI(){
    const heightValue = document.getElementById("height").value / 100;
    const weightValue = document.getElementById("weight").value;


    const bmiValue = weightValue / (heightValue * heightValue);

    bmiInputEl.value = bmiValue;

    if(bmiValue < 18.5){
             weightConditionEl.innerText = "Under Weight";
    } else if ( bmiValue >= 18.5 && bmiValue <= 24.9){
      weightConditionEl.innerText = "Normal Weight";
    } else if ( bmiValue >= 25 && bmiValue <= 29.9){
      weightConditionEl.innerText = "Over Weight";
    } else if (bmiValue >= 30 ){
      weightConditionEl.innerText  = "Obesity";
    }

}

btnEl.addEventListener("click", calculateBMI)

** Sample Output 🎉**

✨ What I Learned

How to build a clean and responsive UI with HTML & CSS.
How to get values from form inputs using document.getElementById().
How to calculate values and show the result dynamically using JavaScript.
How to categorize results using conditional statements.

🔗 Live Demo
Check it out here 👉 https://bmi-analyzer-gaurav-s-projects-d25bef28.vercel.app/

DEV Community: Gaurav Mehra

Make Your Website Responsive | Media Queries, Overflow, Box Shadows

1. Difference between max-width and min-width

2. Overflow

🌤️ Weather App using JavaScript – API Project

Project - Pic Discover App

🖼️ Pic Discover App – Search and Explore Beautiful Images with Unsplash API

🔍 What Is Pic Discover?

🛠️ Built With

📸 App Features

🚀 How It Works

📷

🧪 Live Demo

🧠 What I Learned

💡 Future Improvements

🙌 Final Thoughts

Project - Prompt Mate (Your Personal AI Conversation Campaign )

🚀 Prompt Mate – Your Personal AI Conversation Companion using Next.js & Gemini API 💬

💡 What is Prompt Mate?

🛠️ Tech Stack

🔧 Key Features

📸

🔗 Live Demo & Code

🧠 What I Learned

🎯 Final Thoughts

The Arcade Facilitator Program (Google Cloud)

🚀 About the Program ☁️

🧠 Experience

🏅 My Badges

🌟 Final Thoughts

How I Built a BMI Calculator

💡 Introduction

⚙️ What is BMI?

🧱 HTML Structure

1. Difference between `max-width` and `min-width`