✅ How to Build a Personal Portfolio Website 🌐💼

This project shows your skills, boosts your resume, and helps you stand out. Follow these steps:

1️⃣ Setup Your Environment
• Install VS Code
• Create a folder named portfolio
• Add index.html, style.css, and script.js

2️⃣ Create the HTML Structure (index.html)

html
<!DOCTYPE html>
<html>
<head>
  <title>Your Name</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Your Name</h1>
    <nav>
      <a href="#about">About</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <section id="about">
    <h2>About Me</h2>
    <p>Short intro, skills, and goals</p>
  </section>

  <section id="projects">
    <h2>Projects</h2>
    <div class="project">Project 1</div>
    <div class="project">Project 2</div>
  </section>

  <section id="contact">
    <h2>Contact</h2>
    <p>Email: your@email.com</p>
  </section>

  <footer>© 2025 Your Name</footer>
</body>
</html>

3️⃣ Add CSS Styling (style.css)

css
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background: #f5f5f5;
  color: #333;
}

header {
  background: #222;
  color: white;
  padding: 1rem;
  text-align: center;
}

nav a {
  margin: 0 1rem;
  color: white;
  text-decoration: none;
}

section {
  padding: 2rem;
}

.project {
  background: white;
  padding: 1rem;
  margin: 1rem 0;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

footer {
  text-align: center;
  padding: 1rem;
  background: #eee;
}

4️⃣ Add Interactivity (Optional - script.js)
• Add smooth scroll, dark mode toggle, or animations if needed

5️⃣ Host Your Site
• Push code to GitHub
• Deploy with Netlify or Vercel (connect repo, click deploy)

6️⃣ Bonus Improvements
• Make it mobile responsive (media queries)
• Add a profile photo and social links
• Use icons (Font Awesome)

💡 Keep updating it as you learn new things!

Web Development Roadmap: https://whatsapp.com/channel/0029VaiSdWu4NVis9yNEE72z/1287

💬 Tap ❤️ for more!

Now, let's understand the next web development project:

🚀 Project 3: Weather Application Beginner to Intermediate

A Weather Application is one of the best projects to learn how websites communicate with external services. It introduces you to APIs, asynchronous JavaScript, and working with JSON data.

By the end of this project, you'll build a responsive weather app that displays real-time weather information for any city.

🎯 Project Goal

Build a weather application where users can:

• 🌍 Search weather by city

• 🌡️ View current temperature

• 💧 View humidity

• 🌬️ View wind speed

• ☁️ View weather condition

• 📅 View a 5-day forecast

• 🕒 View local date and time

• 📱 Use the app on mobile devices

🛠 Technologies Used

Frontend:

• HTML5

• CSS3

• JavaScript ES6

API:

• OpenWeather API or any free weather API

📂 Project Folder Structure

weather-app/

├── index.html

├── style.css

├── script.js

├── assets/

│ ├── clear.png

│ ├── cloudy.png

│ ├── rain.png

│ └── snow.png

└── README.md

🎨 Application Layout

    Weather App

+--------------------------+

| Search City |

+--------------------------+

[ Search ]

📍 City Name

🌡️ Temperature

☁️ Weather

💧 Humidity

🌬️ Wind Speed

5-Day Forecast

Mon ☀️ 30°C

Tue 🌧️ 27°C

Wed ☁️ 29°C

Thu 🌦️ 28°C

Fri ☀️ 31°C

📌 Features

✅ Search Weather

Allow users to enter a city name.

Example HTML:

Search

✅ Weather Display Section



City



Temperature



Humidity



Wind Speed



Weather Condition

✅ Fetch Weather Data

Example JavaScript:

const apiKey = "YOUR_API_KEY";

async function getWeather(city) {

const response = await fetch(

https://api.openweathermap.org/data/2.5/weather?q=city appid={apiKey}&units=metric

);

const data = await response.json();

console.log(data);

}

Never hardcode real API keys in your project. Store them securely, for example, in environment variables if you later build a backend.

✅ Search Button

const button = document.getElementById("searchBtn");

button.addEventListener("click", () => {

const city = document.getElementById("city").value;

getWeather(city);

});

✅ Display Weather Data

Example:

document.getElementById("weather").innerHTML =

${data.name}

${data.main.temp} °C

${data.main.humidity}%

${data.wind.speed} m/s

${data.weather[0].description}

;

✅ Display Weather Icon

Use the icon code returned by the API.

const icon = data.weather[0].icon;

const image = https://openweathermap.org/img/wn/${icon}@2x.png;

Display it inside an tag.

✅ Handle Errors

If the user enters an invalid city:

if(data.cod === "404") {

alert("City not found");

}

🎨 CSS Example

body {

font-family: Arial;

background: #f5f5f5;

text-align: center;

}

input {

padding: 10px;

width: 250px;

}

button {

padding: 10px 20px;

cursor: pointer;

}

📱 Responsive Design

@media(max-width:768px) {

input {

width: 90%;

}

}

🌟 Bonus Features

Take your project further by adding: