10+ HTML Projects with Code | Beginner to Pro

The best way to learn web development? Build real websites.

When you create projects hands-on, you understand concepts faster, stay motivated, and develop skills that actually matter. No more just memorizing HTML tags—you’ll be designing and building real web pages from day one.

The only challenge? Finding the right project ideas.

That’s why I’ve put together these real-world, portfolio-worthy HTML projects — from beginner-friendly layouts to advanced, interactive sites. Each project comes with step-by-step tutorials, so whether you’re just starting out or leveling up, you’ll build something impressive.

Let’s start coding!

HTML Projects for Beginners

If you're learning HTML, these projects are the perfect starting point. Designed by me to be step-by-step tutorials, they’ll help you grasp the fundamentals of web development while building real, functional web pages.

These HTML projects for beginners also get more challenging as you work through them, with the idea of layering your new HTML skills with each successive project

Personal Bio Page

This project walks you through the steps for building a personal bio page using HTML and CSS, focusing on structuring content with semantic HTML and enhancing design with modern CSS techniques like Flexbox and Grid.

You'll create a responsive layout that looks great on any device while applying styling principles to make your bio page visually engaging and professional. The final result is a polished, portfolio-worthy webpage that showcases your skills and experience.  

Want to sharpen your web development skills and build a real-world HTML project? This personal bio page is the perfect challenge.

Animated Business Card

This HTML project walks you through creating an animated business card using HTML and CSS, combining structured content with modern styling techniques to make your card visually engaging and interactive.

You'll use semantic HTML to build a clean and accessible layout, then apply CSS for styling, responsiveness, and smooth animations that bring your business card to life. By the end, you'll have a polished, professional digital card that stands out to employers, clients, or professional contacts.  

Want to take your web development skills to the next level with an interactive project? This animated business card is the perfect challenge.

Recipe Page

This project guides you through creating a recipe page using HTML and CSS, focusing on structuring content with semantic HTML and enhancing the design with modern styling techniques.

You'll build a well-organized layout that includes a recipe header, an ingredients list, and step-by-step instructions while incorporating meta information for search engines. CSS will be used to improve readability, add visual appeal, and ensure the page is responsive across different devices. By the end, you'll have a polished, portfolio-worthy recipe page that showcases both your HTML and CSS skills.  

Want to level up your web development skills with a practical and engaging project? This recipe page is the perfect challenge.

Interactive Photo Gallery

Product Landing Page

Professional Portfolio Page

This project walks you through creating a professional portfolio page using HTML, CSS, and Bootstrap. You'll structure your page with semantic HTML to ensure clarity and accessibility while using Bootstrap's responsive grid system and components to create a sleek, modern design.

The portfolio will feature key sections such as an introduction, project showcase, skills, testimonials, and a contact section, helping you present your work and expertise in an engaging and professional manner. By the end, you'll have a fully functional, mobile-friendly portfolio that you can use to impress potential employers or clients and enhance your web development skills.  

Want to build a professional portfolio and refine your HTML and Bootstrap knowledge? This project is the perfect way to do it.

Professional HTML Projects

In this section, I’ve created advanced HTML projects to test and stretch you, regardless of your skill level and experience.

As I mentioned earlier, each project has been designed to be more challenging than the last.

So, if you feel like you’re out of your depth, rewind a few steps and try an earlier project to build your skills

Interactive Quiz App

The main goal here is to create a dynamic and interactive quiz. 

We’ll be presenting the user with a series of questions, and we’ll be providing immediate feedback on their answers. To do this, we’ll be using some JavaScript.

We’ll also be using Bootstrap in this project. The further you go in web development, the more you’ll see CSS frameworks being used, so it doesn’t hurt to get even more practice. 

Without a doubt, this HTML project is another step up in complexity, so let’s look at the different skills you’ll be using to tackle it:

• HTML5: Structuring the quiz page content with semantic HTML5.
• JavaScript: Using JS to manage the quiz logic, event handling, and DOM manipulation.
• Bootstrap: Using Bootstrap components for a polished UI with modals and buttons.
• CSS: Styling the quiz interface and layout while including a responsive design.

So, while it may seem quite simple, this project is a great chance to test out the skills you’ve honed in the previous projects in a new way.

If I had to pick one stand-out feature of this project, it’s probably the greater use of JavaScript to provide immediate user feedback.

We’ll also be using JS to handle user input, validate answers, and keep their score.

As we move on to the more advanced HTML projects, you’ll see that we have no choice but to make greater use of JavaScript.

The TL-DR is that when you reach a certain level, the natural extension is to include interactivity. And right now, JavaScript is the best and most popular way to do this.

Let’s take a look at the HTML, CSS, and JavaScript source code for our quiz app.

You’ll notice that the HTML code itself is not very long! That’s because we’re using JavaScript to dynamically output questions one by one.

This is quite similar to the Single Page Application (SPA) approach that you tend to see when building with React. Just check out any React course to see what I mean.

Overall, if you have your heart set on becoming a pro web developer, this is good to know! 

You’ll also see that our CSS file is relatively short, as we’re relying a lot on Bootstrap for its default styling. This is not uncommon when building with a CSS framework.

Finally, the JS source code is definitely the longest we’ve included so far!

Don’t be daunted by this, as it’s not super technical or complicated. Overall, we have some event listeners, a function to serve up questions, and a function to process a user's answer.

Note also that right now, I’ve only added one question. You might want to add to this!

Similarly, as I’ve said throughout, now’s also the time to experiment with this code and to test yourself.

Try something different with Bootstrap, see if you can improve the JS code, and make some changes to the HTML. Whatever you do, just have fun with it!

These projects are designed to help you learn new skills and showcase them, but they’re also designed to let you try new things and express yourself as a web developer.

So have fun, and get creative!

HTML Source Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive Quiz</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="quiz-styles.css">
</head>
<body>

<div class="container mt-5">
  <div id="quiz-container" class="text-center">
      <h1 id="question">Question Text</h1>
      <div id="options" class="my-4">
          <!-- Options will be populated here by JavaScript -->
      </div>
      <button id="next-button" class="btn btn-primary">Next Question</button>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="quiz-scripts.js"></script>
</body>
</html>

CSS Source Code:

body {
  background-color: #f8f9fa;
}

#quiz-container {
  background: #ffffff;
  border-radius: 10px;
  padding: 40px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#question {
  font-size: 24px;
}

#options .btn-option {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 10px;
}

#next-button {
  margin-top: 20px;
}

 JavaScript Source Code:

document.addEventListener('DOMContentLoaded', (event) => {
  const questionElement = document.getElementById('question');
  const optionsElement = document.getElementById('options');
  const nextButton = document.getElementById('next-button');
  let currentQuestionIndex = 0;

  const questions = [
      {
          question: "What is the capital of France?",
          options: ["New York", "London", "Paris", "Dubai"],
          answer: "Paris"
      },
      // More questions...
  ];

  function loadQuestion(questionIndex) {
      const question = questions[questionIndex];
      questionElement.textContent = question.question;
      optionsElement.innerHTML = '';
      question.options.forEach(option => {
          const button = document.createElement('button');
          button.textContent = option;
          button.classList.add('btn', 'btn-option');
          button.onclick = () => selectOption(option);
          optionsElement.appendChild(button);
      });
  }

  function selectOption(selected) {
      const question = questions[currentQuestionIndex];
      if (selected === question.answer) {
          alert('Correct!');
      } else {
          alert('Wrong!');
      }
  }

  nextButton.addEventListener('click', () => {
      currentQuestionIndex++;
      if (currentQuestionIndex < questions.length) {
          loadQuestion(currentQuestionIndex);
      } else {
          alert('Quiz completed!');
          currentQuestionIndex = 0;
      }
      loadQuestion(currentQuestionIndex);
  });

  // Load the first question
  loadQuestion(currentQuestionIndex);
});

How did you find that? 

By the end of this HTML project, you should be feeling ready to make the leap to our advanced HTML projects, as you’ll have even more hands-on experience!

Let’s now recap the skills you had to use in this project:

1. Using HTML5 to create a semantic structure.
2. Using Bootstrap to quickly develop a responsive interface while adding buttons and modals.
3. Writing more challenging JavaScript for quiz logic, navigation, and answer validation.
4. Using JavaScript to interact with DOM-based user events and to update the UI in real time.

You’re now ready to dive into our final three advanced HTML projects, where we take all of the skills you’ve learned so far to the next level! Let’s go!

Interactive Event Page

In this advanced HTML project, we’re going to test ourselves by mixing HTML, CSS, JavaScript, and an external API to create an event page for a tech conference.

Yep, we’re going to be using the Google Maps API to create an interactive map for users to see where our conference is located. Pretty cool, I know!

So, while you might have thought, huh, this is a basic task, an event or conference page is actually a really engaging HTML project as it combines various real-world web dev skills.

In particular, integrating with an external API like Google Maps is great practice for real-world projects, as this is the type of thing you’d need to do all the time.

And yes, I know we’re using JavaScript again in this project, but trust me, you need to learn JavaScript to be a pro web developer with HTML.

We’ll also be using Bootstrap again here to create a responsive design, as this is often essential for event attendees who want to access information on different device types.

So, get ready to use the following skills in this HTML project:

• HTML5: Use semantic elements to structure the webpage.
• CSS3 & Bootstrap: Use Bootstrap's grid system and components to create a pro layout.
• Google Maps API: Integrate Google Maps to display the event location.
• JavaScript: Create an interactive Google Map in an external JS file.
• Form Handling: Create a registration form to allow users to sign up for the event.

Just like before, we’ll only be using a very small amount of simple JavaScript in this project.

Also, super important but remember to replace the API Key placeholder text with your own Google Maps API key in the script tag for the Google Maps API call.

If you’re new to this, you need to do the following:

• Setup a Google Cloud Platform (GCP) Account
• Create a new project
• Enable Billing on your project
• Enable the Google Maps Platform APIs
• Create an API Key

It’s all fairly standard stuff for working with GCP, but if you are still learning web development or you haven’t worked in the cloud before, it could be new to you.

Then again, I’m hoping that you’ll be excited to take on new challenges like this, as it’s a great way to add real-world, marketable web development skills to your portfolio! 

Let’s now take a look at the HTML, CSS, and JavaScript source code for this cool project.

You’ll notice that our CSS file is not as short as the last time we used BootStrap, but that’s just because we wanted to override some of the default styles.

As always, please experiment with this code! There’s so much you can do here, whether that’s altering the navbar, altering the section layout, or playing with the CSS styling.

Also, have a play with the GPS coordinates in the JS file to see how the map changes.

HTML Source Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Event Conference Page</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="event-styles.css">
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">TechConf 2024</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse"
  data-target="#navbarNav" aria-controls="navbarNav"
  aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
              <a class="nav-link" href="#details">Details</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#schedule">Schedule</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#speakers">Speakers</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#register">Register</a>
          </li>
      </ul>
  </div>
</nav>

<main>
  <section id="details" class="py-5">
      <div class="container">
          <h2 class="text-center mb-3">Event Details</h2>
          <!-- Event details go here -->
      </div>
  </section>

  <section id="schedule" class="py-5 bg-light">
      <div class="container">
          <h2 class="text-center mb-3">Event Schedule</h2>
          <!-- Schedule details go here -->
      </div>
  </section>

  <section id="speakers" class="py-5">
      <div class="container">
          <h2 class="text-center mb-3">Speakers</h2>
          <!-- Speaker details go here -->
      </div>
  </section>

  <section id="register" class="py-5 bg-light">
      <div class="container">
          <h2 class="text-center mb-3">Registration</h2>
          <form id="registration-form">
              <div class="form-group">
                  <label for="fullName">Full Name</label>
                  <input type="text" class="form-control" id="fullName"
                  name="fullName" placeholder="Enter full name" required>
              </div>
              <div class="form-group">
                  <label for="emailAddress">Email address</label>
                  <input type="email" class="form-control" id="emailAddress"
                  name="emailAddress" placeholder="Enter email" required>
              </div>
              <div class="form-group">
                  <label for="ticketType">Ticket Type</label>
                  <select class="form-control" id="ticketType" name="ticketType" required>
                      <option value="">Select ticket type</option>
                      <option value="general">General Admission</option>
                      <option value="vip">VIP</option>
                      <option value="student">Student</option>
                  </select>
              </div>
              <button type="submit" class="btn btn-primary">Submit Registration</button>
          </form>
      </div>
  </section>

  <section id="location" class="py-5">
      <div class="container">
          <h2 class="text-center mb-3">Location</h2>
          <div id="map"></div>
      </div>
  </section>
</main>

<footer class="bg-dark text-white text-center py-3">
  <p>(c) 2024 TechConf. All Rights Reserved.</p>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="event-scripts.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>
</html>

CSS Source Code:

/* Basic reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
}

/* Navigation styles */
.navbar {
  margin-bottom: 30px;
}

/* Section Styles */
section {
  padding: 60px 0;
}

/* Event details styles */
#details .container {
  text-align: center;
}

/* Schedule styles */
#schedule .container {
  text-align: center;
}

/* Speakers styles */
#speakers .container {
  text-align: center;
}

/* Registration Form Styles */
#register .container {
  text-align: center;
  max-width: 600px; /* Makes the form not too wide on larger screens */
  margin: auto;
}

#registration-form {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

#registration-form .form-group {
  margin-bottom: 1rem;
}

#registration-form label {
  text-align: left;
  display: block;
  margin-bottom: .5rem;
}

#registration-form .form-control {
  height: 40px;
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

#registration-form .btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

#registration-form .btn-primary:hover {
  background-color: #0056b3;
  border-color: #004085;
}

/* Location Map Styles */
#map {
  height: 400px;
  width: 100%;
}

/* Footer Styles */
footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}

JavaScript Source Code:

// Google Maps API initialization
function initMap() {
  // The location of the event
  var eventLocation = {lat: 37.4429964, lng: -122.1545229};
  // The map, centered at the event location
  var map = new google.maps.Map(
      document.getElementById('map'),
      {zoom: 15, center: eventLocation});
  // The marker, positioned at the event location
  var marker = new google.maps.Marker(
      {position: eventLocation, map: map});
}

By the end of this project, you should be feeling like a real web developer!

That said, if you’re starting to feel more confident in your skills, maybe consider including some more JavaScript to add interactivity to the schedule and speakers' sections.

Equally, check out some more Bootstrap components, like modals for the speaker bios or session details.

The possibilities for tinkering are endless, and they’re a great way to make a project your own and showcase your skills in your HTML portfolio.

Let’s now recap the skills you’ll have used by building this HTML project:

1. Using Bootstrap to create a responsive and accessible layout for an event page.
2. Implementing the grid with Bootstrap.
3. Integrating with the Google Maps API to provide location details.
4. Collect user data with a registration form.

Music Player App

This is a really fun project if you like music! That’s right, we’re going to build our own HTML music player.

Sure, we’re not going to be competing with Spotify, but this advanced HTML project is an excellent way to level up your existing skills when dealing with multimedia.

The goal here is to create a functional and stylish interface for our music player. We’ll also include a playlist to list songs and controls for play, pause, next, and previous.

Let’s take a look at the skills we’ll need to use to build our music player:

• HTML5 Audio: Control audio playback with JavaScript and the<audio> element.
• Custom Audio Controls: Create and style audio controls rather than relying on default browser controls.
• CSS3 Animations and Transitions: Use CSS to animate the play/pause button and the progress bar.
• JavaScript Event Handling: Use JavaScript to handle play, pause, and track change events and update the UI.
• Responsive Design: Ensure the music player is usable across different screen sizes.

You’ve probably noticed that we’re using JavaScript again here. This is going to be a recurring theme from this point onward.

Trust me; you just have to get comfortable with JS if you want to be a pro HTML developer. Like peanut butter and jelly, they are very often found together!

And seeing as we’re working on advanced projects, the JS code in this project is the longest we’ve used so far.

But don’t let this put you off, as it’s fairly straightforward when you get to grips with basic JavaScript.

Let’s now take a look at the source code for this project.

Remember to change the paths to your MP3 files in both the HTML and JS code, and as always, have fun playing around with this code.

In particular, see what happens when you make changes to the JS functionality. You might also want to try out a different color scheme or overall user interface to match your personality.

I’ve said it many times in this article, but the best way to learn how these projects work is to get stuck in, make changes, break things, and then fix them. 

It really is amazing how much you can learn by trying to deconstruct a project.

HTML Source Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Player Interface</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div id="music-player" class="player">
  <audio id="audio-element">
      <source src="path-to-your-first-song.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
  </audio>
  <div class="controls">
      <button id="play-pause" onclick="togglePlayPause()">Play</button>
      <button id="prev" onclick="playPreviousTrack()">Prev</button>
      <button id="next" onclick="playNextTrack()">Next</button>
  </div>
  <div class="progress-bar">
      <div id="progress" class="progress"></div>
  </div>
  <div class="playlist">
      <ul id="playlist">
          <li onclick="changeTrack('path-to-your-first-song.mp3', this)">First Song Title</li>
          <li onclick="changeTrack('path-to-your-second-song.mp3', this)">Second Song Title</li>
          <li onclick="changeTrack('path-to-your-third-song.mp3', this)">Third Song Title</li>
          <!-- More songs can be added here -->
      </ul>
  </div>
</div>

<script src="script.js"></script>
</body>
</html>

CSS Source Code:

/* General Styles */
body {
  font-family: 'Arial', sans-serif;
  background: #f8f8f8;
  color: #333;
  line-height: 1.6;
  padding: 20px;
}

/* Music Player Styles */
.player {
  background: #fff;
  border: 1px solid #ddd;
  padding: 20px;
  margin: 20px auto;
  width: 300px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Control Button Styles */
.controls button {
  background: #ff9800;
  border: none;
  padding: 10px 20px;
  margin-right: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s ease;
}

.controls button:hover {
  background: #e68900;
}

/* Progress Bar Styles */
.progress-bar {
  background: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  height: 10px;
  margin-top: 20px;
}

.progress {
  background: #ff9800;
  height: 10px;
  width: 0%;
}

/* Playlist Styles */
.playlist {
  margin-top: 20px;
  background: #f7f7f7;
  border: 1px solid #ddd;
  padding: 10px;
}

#playlist li {
  padding: 10px;
  background: #fff;
  border-bottom: 1px solid #ddd;
}

#playlist li:last-child {
  border-bottom: none;
}

#playlist li:hover, #playlist li.playing {
  background: #ff9800;
  color: #fff;
  cursor: pointer;
}

/* Responsive Media Queries */
@media (max-width: 600px) {
  .player {
      width: auto;
      padding: 10px;
  }

  .controls button {
      padding: 5px 10px;
      font-size: 14px;
  }
}

JavaScript Source Code:

// JavaScript for Custom Music Player Controls
var audio = document.getElementById('audio-element');
var playlistItems = document.querySelectorAll('#playlist li');
var tracks = [
  'path-to-your-first-song.mp3',
  'path-to-your-second-song.mp3',
  'path-to-your-third-song.mp3',
  // ...add more tracks here
];

function togglePlayPause() {
  if (audio.paused) {
      audio.play();
      updatePlayPauseButton(true);
  } else {
      audio.pause();
      updatePlayPauseButton(false);
  }
}

function updatePlayPauseButton(isPlaying) {
  var playPauseButton = document.getElementById('play-pause');
  playPauseButton.innerText = isPlaying ? 'Pause' : 'Play';
}

function playNextTrack() {
  currentTrackIndex = (currentTrackIndex + 1) % tracks.length;
  changeTrack(tracks[currentTrackIndex], playlistItems[currentTrackIndex]);
}

function playPreviousTrack() {
  currentTrackIndex = (currentTrackIndex - 1 + tracks.length) % tracks.length;
  changeTrack(tracks[currentTrackIndex], playlistItems[currentTrackIndex]);
}

function changeTrack(source, element) {
  audio.src = source;
  audio.play();
  updatePlayPauseButton(true);
  updatePlaylistHighlight(element);
}

function updatePlaylistHighlight(element) {
  if (element) {
      playlistItems.forEach(li => li.classList.remove('playing'));
      element.classList.add('playing');
  }
}

audio.addEventListener('ended', playNextTrack);

audio.addEventListener('timeupdate', function() {
  var progressBar = document.getElementById('progress');
  var percentage = Math.floor((100 / audio.duration) * audio.currentTime);
  progressBar.style.width = percentage + '%';
});

// Adding click event listeners to playlist items
playlistItems.forEach((item, index) => {
  item.addEventListener('click', function() {
      currentTrackIndex = index;
      changeTrack(tracks[currentTrackIndex], this);
  });
});

By the end of this advanced HTML project, you’ll have built a truly portfolio-worthy piece that showcases your ability to work with multimedia on the web.

Let’s recap the skills you will have used to make this all happen:

1. Using the HTML5 <audio> element and controlling it with JavaScript
2. Developing a set of custom control elements for the audio player with a unique UI.
3. Applying CSS animations to enhance the player interface.
4. Managed user interactions such as play, pause, and track selection with JavaScript.
5. Designed a music player that is fully functional and attractive on mobile and desktop.

Weather Forecast App

Now, we’re going to create a weather forecast app! This will allow a user to enter a city, which we’ll then use to fetch and display a weather forecast for them.

The final product may look simple, but this is a deceptively challenging project, as we’ll be interacting with an external weather API to fetch and parse the weather data.

As you’ve probably already guessed, this project is going to blend HTML with CSS, JavaScript, and the CSS framework Bootstrap.

I really wanted to tie in everything we’ve done so far for the grand finale, including a brand-new external API provider!

Let’s take a look at the skills we’ll be using to create our HTML weather app: 

• Fetching API Data: Making HTTPS requests to external APIs to fetch weather data.
• Asynchronous JavaScript: Using async and await to handle asynchronous API requests.
• DOM Manipulation: Updating HTML dynamically weather data using JavaScript.
• Bootstrap Grid System: Use Bootstrap's responsive grid system to present forecast data.
• Event Handling: Capture user input and manage click events to trigger data fetching and UI updates.
• Error Handling: Implement error handling for API requests and manage network issues or user errors.

The first thing you should notice is that we’re including error handling to ensure our project is professional. 

This is ideal if you want to add this project to your portfolio, as it shows you know how to think and code like a professional web developer.

When it comes to the standout feature of this project, it has to be the external API integration to fetch weather data. This is super fun and really rewarding. 

Of course, you’ll need to sign up with OpenWeatherMap to get your own API key, but this is really straightforward.

Simply sign up for the free account, verify your email, and you’ll receive your API key to use within a couple of hours. 

Then remember to add this to the JS code instead of the placeholder, and you will be all set.

Let’s now dive into the HTML, CSS, and JavaScript source code for our final HTML project.

You’ll notice that it uses a lot of JavaScript. 

As I mentioned earlier, we cannot avoid it at this point, especially if we want to include dynamic and interactive content.

This is particularly important for the weather data fetching, which is all handled within the JS code.

We simply collect the city and country of interest and send this data in our API request to fetch weather forecast data.

This is a simple RESTful API request to OpenWeatherMap to collect the forecast data.

Depending on how confident you feel, this might all sound very complicated.

But once you’ve looked at the code, you’ll see it’s nothing more than an HTTP request and some string manipulation.

Of course, we also have some asynchronous code processing and error handling, but again, these are fairly standard once you get to grips with JavaScript, so don't be afraid of them!

The final step involves using Bootstrap to neatly package the weather data into a card component, which is dynamically rendered within the HTML.

You’ll see that we’ve barely used any CSS in this example as we’ve chosen to depend on Bootstrap.

That said, I highly recommend and encourage you to make changes to the styling and to experiment with all of the code.

This is especially important if you feel like you’re out of your comfort zone, as it will help you to truly understand what is happening under the hood!

Maybe add some elements we haven’t used yet, like radio buttons or checkboxes? Perhaps you can add a survey form to get user feedback?

HTML Source Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Dashboard</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container mt-5">
  <h1 class="text-center">Weather Forecast</h1>
  <div class="row justify-content-center my-4">
      <div class="col-md-6">
          <!-- Input group for city and country -->
          <div class="input-group mb-3">
              <input type="text" id="city-input" class="form-control"
              placeholder="City" aria-label="City">
              <input type="text" id="country-input" class="form-control"
              placeholder="Country Code (e.g., UK)" aria-label="Country Code">
              <div class="input-group-append">
                  <button class="btn btn-outline-secondary" type="button"
                  id="search-btn">Get Forecast</button>
              </div>
          </div>
          <!-- Weather display area -->
          <div id="weather-result" class="text-center">
              <!-- Weather information will be displayed here -->
          </div>
      </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="weather.js"></script>
</body>
</html>

CSS Source Code:

.weather-day {
  margin-bottom: 10px;
}

JavaScript Source Code:

const apiKey = 'YOUR_API_KEY'; // Replace with your API key
const weatherApiUrl = 'https://api.openweathermap.org/data/2.5/weather';

async function fetchWeather(city, country) {
  const queryParams = new URLSearchParams({
      q: `${city},${country}`,
      appid: apiKey,
      units: 'metric' // Or 'imperial' for Fahrenheit
  });

  try {
      const response = await fetch(`${weatherApiUrl}?${queryParams}`);
      if (!response.ok) throw new Error(`Weather data fetch failed: ${response.statusText}`);
      const weatherData = await response.json();
      updateWeatherUI(weatherData);
  } catch (error) {
      console.error(error);
      alert(error.message);
  }
}

function updateWeatherUI(weatherData) {
  const weatherResultDiv = document.getElementById('weather-result');
  // Clear previous results
  weatherResultDiv.innerHTML = '';
  // Bootstrap card for weather data
  const weatherCard = `
      <div class="card">
          <div class="card-body">
              <h5 class="card-title">${weatherData.name}</h5>
              <h6 class="card-subtitle mb-2 text-muted">${weatherData.weather[0].main}</h6>
              <p class="card-text">Temperature: ${weatherData.main.temp}°C</p>
              <p class="card-text">Feels like: ${weatherData.main.feels_like}°C</p>
              <p class="card-text">Wind Speed: ${weatherData.wind.speed} m/s</p>
              <p class="card-text">Humidity: ${weatherData.main.humidity}%</p>
          </div>
      </div>
  `;
  weatherResultDiv.innerHTML = weatherCard;
}

document.getElementById('search-btn').addEventListener('click', () => {
  const cityInput = document.getElementById('city-input').value.trim();
  const countryInput = document.getElementById('country-input').value.trim().toLowerCase();
  if (cityInput && countryInput) {
      fetchWeather(cityInput, countryInput);
  } else {
      alert('Please enter both city and country code.');
  }
});

Huge congrats on making it this far and completing this advanced HTML project. Your portfolio will most definitely thank you!

You should now have a solid understanding of how to create interactive web applications that can respond to user input and display real-time data from external sources. 

This skill set is a cornerstone of modern web development, which is ideal if you have aspirations to become a professional web developer.

Let’s now recap the skills and hands-on experience you’ve gained in this project:

1. Integrating with third-party APIs to fetch real-time data.
2. Managing asynchronous operations and network requests in JavaScript.
3. Dynamically updating the DOM based on user input and fetched data.
4. Creating responsive layouts with Bootstrap that adapt to different screen sizes.
5. Developing a user-friendly interface that provides interactive feedback for user actions.

What Is HTML?

Created in 1993 by Tim Berners-Lee, HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications. But what is a markup language? Well, this just means that HTML uses tags to mark up content and provide structure for web pages.

Despite being around for three decades, HTML is always evolving, and the most current version is HTML5, which was released in 2014. This was a big step forward for HTML, as it introduced new features like semantic tags and audio and video support.

In 2024, HTML is one of the key components of the modern Internet, and it tends to be used alongside web dev technologies like CSS and JavaScript. With this combination, web developers can create rich and interactive web pages, web applications, and other web development projects. 

The exponential rise in mobile devices and increasing importance for accessibility has also helped HTML to remain relevant, as proper use of HTML tags and attributes can make websites accessible to all users while also making them easy to view on all types of devices.

Key Features of HTML

Let’s take a quick look at some of the key features of HTML.

• HTML documents are saved with .html or .htm file extensions.
• HTML is closely related to other web technologies like CSS and JavaScript, with CSS styling and formatting HTML content and JavaScript adding interactivity and dynamic behavior.
• HTML tags are defined by angled brackets (< >) to define the structure and content of web pages. They can also contain attributes or additional information about the tag.
• HTML elements are the building blocks of a web page. These are defined by a start tag, content, and end tag, with common examples being paragraph <p> tags and more complex elements like images and videos via <img> and <video> tags.
• HTML attributes are extra bits of information that you can add to HTML elements to modify behavior or provide additional information.
• HTML is platform-independent, meaning you can use it on any device or operating system, and popular web browsers like Chrome, Firefox, Safari, and Edge can render content.
• HTML nesting allows one HTML element to be placed inside another, creating a hierarchical element structure ideal for grouping related content and providing additional structure. 
• HTML has built-in accessibility features to ensure web content is accessible to all users, including support for screen readers, magnifiers, and text descriptions for images and media.
• HTML uses semantic markup elements to add meaning and structure to web content, with common examples of semantic tags being <header> and <footer>. This can also be useful for SEO, allowing search engines to understand web page structure better.

Why Build Projects with HTML?

Whether you’re looking to start a career in web development or enhance your portfolio, these HTML projects are perfect for leveling up your skills, and you can do it all by following along in our online HTML compiler.

Plus, to help you build your skills, I’ve designed these HTML projects to be more challenging as you make your way through the list. This is great for leveling up and building your portfolio.

These HTML projects also include complementary skills for modern web development, like CSS frameworks, JavaScript, and external APIs from Google Maps and more. 

Wrapping Up

Building projects is the best way to master HTML — and now you have a range of real-world, portfolio-worthy ideas to explore.

Pick a project, start coding, and bring your web development skills to life. And remember, I’m always adding new projects, so bookmark this page and check back for more.

Happy coding!

Frequently Asked Questions

1. Where Can I Create an HTML Project?

The easiest way to create and work on HTML CSS projects is to create a .html or .htm file and then edit this in a simple text editor like Notepad. However, working on HTML projects in a fully-featured code editor, like Sublime Text or Visual Studio Code, is often easier.

2. How Do I Practice HTML and CSS Projects?

If you’re a beginner, the best way to practice HTML website projects is to check out the first half of our list and work through the HTML CSS projects for beginners. When you’re confident in your skills, try some of the more advanced HTML projects. Alternatively, if you’re an experienced dev, try any of our advanced HTML projects.

3. Is HTML Easy for Beginners?

Absolutely, HTML is easy for beginners to learn because of its simple syntax and structure, which makes it easy to quickly build your own websites. It’s also a great stepping stone for other languages, like JavaScript, often used with HTML for front-end development.

4. Why Do We Use HTML in Projects?

HTML is used in projects because it provides structure to static pages and dynamic web pages, it separates content and presentation via CSS, it has accessibility features, it has cross-platform compatibility, and it is ideal for SEO due to semantic tags.

5. Where Can I Run HTML Code?

You can run HTML code by opening your .html file with any popular web browser app, like Chrome, Firefox, Edge, Safari, etc. Alternatively, you can use online code editors to create and view HTML pages or set up a local web server on your own computer with something like Apache HTTP server.

References

1. Google Developers. Get an API Key for Google Maps JavaScript API [Internet]. Google; [date unknown; cited 2024 Jan 15]. Available from: https://developers.google.com/maps/documentation/javascript/get-api-key

2. OpenWeather. How to start [Internet]. OpenWeather; [date unknown; cited 2024 Jan 15]. Available from: https://openweathermap.org/appid