codedamn
Loading...

Top 10 HTML Projects for Beginners (with Code)

Top 10 HTML Projects for Beginners (with Code)

HTML is the foundation of all web pages. It is the bare minimum of what any web page should have and thus is a great place for beginners to start their coding journey. The good news is that there are a ton of HTML projects for beginners out there. But here is a catch- it is really tough for a beginner to find the right projects that will help him/her master development using HTML. That’s why we’ve put together a list of the Top 10 HTML projects for beginners along with code. These projects are perfect for those just starting to learn HTML. They cover the basics of the language, and they’re fun to boot.

Basic HTML Page

The first project on this list is simple: build a basic HTML page. This project will teach you the very basics of HTML. You’ll learn how to create a page, add headings and paragraphs, and how to style your page with CSS (Cascading Style Sheets). Here is a sample code for a basic HTML website. You also try out this project here in the playground.

<!DOCTYPE HTML>
<html>
    <head>
        <title>Basic HTML Page</title>
    </head>
    <body>
      <div style="text-align: center">
        <h1>Hey, this is the heading for the page</h1>
      </div>
      <div style="text-align: center">
        <p>This is a part of main content area of the page. I can hold any content of any length here</p>
      </div>
      <div style="text-align: right">
        <p>This is the content for right sidebar</p>
      </div>
      <div style="text-align: center; bottom: 0">
        <p>This is the basic footer content</p>
      </div>
    </body>
</html>
Code language: HTML, XML (xml)

Simple Image Gallery

One of the common uses for web pages is to display images. For this project, you’ll create an image gallery. You’ll learn to use the <img> tag to display images on your page. You’ll also learn how to use CSS to style your gallery. Here is the code for a simple image gallery. You also try out this project here in the playground.

<!DOCTYPE HTML>
<html>
<head>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Arial;
    }

    /* The grid: Four equal columns that floats next to each other */
    .column {
      float: left;
      width: 25%;
      padding: 10px;
    }

    /* Style the images inside the grid */
    .column img {
      opacity: 0.8;
      cursor: pointer;
    }

    .column img:hover {
      opacity: 1;
    }

    /* Clear floats after the columns */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }

    /* The expanding image container */
    .container {
      position: relative;
      display: none;
    }

    /* Expanding image text */
    #imgtext {
      position: absolute;
      bottom: 15px;
      left: 15px;
      color: white;
      font-size: 20px;
    }

    /* Closable button inside the expanded image */
    .closebtn {
      position: absolute;
      top: 10px;
      right: 15px;
      color: white;
      font-size: 35px;
      cursor: pointer;
    }
  </style>
</head>

<body>

  <h2>Image Gallery</h2>

  <!-- The four columns -->
  <div class="row">
    <div class="column">
      <img src="https://source.unsplash.com/random/400x200" alt="Image 1" style="width:100%">
    </div>
    <div class="column">
      <img src="https://source.unsplash.com/random/400x200" alt="Image 2" style="width:100%">
    </div>
    <div class="column">
      <img src="https://source.unsplash.com/random/400x200" alt="Image 3" style="width:100%">
    </div>
    <div class="column">
      <img src="https://source.unsplash.com/random/400x200" alt="Image 4" style="width:100%">
    </div>
  </div>

</body>
</html>
Code language: HTML, XML (xml)

Simple HTML Form

Forms are another common use for web pages. They’re how we input data into our web applications. Forms can be used for various purposes, primarily to take user input on the website. For this project, you’ll build a form. You’ll learn how to use the <form> tag to create a form. You’ll also learn how to use the <input> tag to create form fields. Here is the code for a form using HTML. You also try out this project here in the playground.

<!DOCTYPE HTML>
<html>
<head>
  <title>A simple form</title>
</head>
<body>
  <form>
    <!-- Code example of some standard fields in form -->
    <input type="text" name="firstName" placeholder="First name">
    
    <input type="text" name="lastName" placeholder="Last name">
    
    <input type="text" name="username" placeholder="Username">
    
    <!-- Code example of a password field in form -->
    <input type="password" name="password" placeholder="Password">
    

    <!-- Code example of a submit button in form -->
    <input type="submit" value="Submit">
  </form>
</body>
</html>
Code language: HTML, XML (xml)

Note that in the input tag, we are using an attribute name. It is basically used for assigning a name to the field, which we can use in the backend.

Blog Page

Blogs are one of the most popular use cases for web pages. They’re a great way to share your thoughts with the world. For this project, you’ll create a blog. You’ll learn how to use HTML to structure your posts. You’ll also learn how to use CSS to style your blog. Here is a sample code for creating a blog page. You also try out this project here in the playground.

<!DOCTYPE HTML>
<html>
<head>
  <style>
    body {
      background-color: lightblue;
    }

    h1 {
      color: white;
      text-align: center;
    }

    p {
      font-family: verdana;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <div class="blog1">
    <h1>My First Blog</h1>
    <p>Welcome to my first blog! I'm so excited to finally have my own little space on the internet to share my thoughts and musings with the world.</p>
    <p>I'll be posting about all sorts of things that interest me, from books and movies to current events and my own personal experiences. I hope you'll enjoy reading and please feel free to leave me your own thoughts and feedback in the comments.</p>
    <p>Thanks for stopping by!</p>
  </div>
  <hr></hr>
  <div class="blog2">
  <!--  Write another blog post here  -->
  </div>
</body>
</html>
Code language: HTML, XML (xml)

You can write as many blogs as you want by creating a <div> tag (writing class is not mandatory, but it helps in adding CSS by selecting elements by their class). Also, you can modify the style and the layout of the page, as the given code is just an example of how you can use HTML and CSS to create a basic blog page.

Multipage Website

Up until now, all our projects have been single pages. But most websites are multi-page. For this project, you’ll create a multi-page website. You’ll learn how to use the <a> tag to create a link between pages.

For this project, we’ll create a website that will have a navigation bar and four links that will help us to navigate to different pages.

<!DOCTYPE HTML>
<html>
<head>
  <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    }

    li {
      float: left;
    }

    li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    li a:hover {
      background-color: #111;
    }
  </style>
</head>

<body>

  <ul>
    <li><a href="/home.html">Home</a></li>
    <li><a href="/news.html">News</a></li>
    <li><a href="/contact.html">Contact</a></li>
    <li><a href="/about.html">About</a></li>
  </ul>

</body>
</html>
Code language: HTML, XML (xml)

In the above code example, we have linked our page with 4 other HTML pages- home.html, news.html, contact.html and about.html. You can simply create these pages in the same directory where you created the example HTML code file. As a next step, you can add links inside the home.html, news.html, contact.html and about.html to get you back to the original page. You can see this project in the playground by clicking here

Loading Bar

The next project which you can try is building a loading bar. Loading bars are one of the essential elements of a website. These help in populating the page while the content is being loaded. As soon as content gets loaded, the loading bar gets full and then disappears. In this project, we will implement a simple loading bar. Here is the code for the project.

<!DOCTYPE HTML>
<html>

<head>
  <style>
    #myProgress {
      width: 100%;
      background-color: #ddd;
    }

    #myBar {
      width: 0%;
      height: 30px;
      background-color: #4CAF50;
    }
  </style>
</head>

<body>

  <h1>JavaScript Progress Bar</h1>

  <div id="myProgress">
    <div id="myBar"></div>
  </div>

  <be>
    <button onclick="move()">Click Me</button>

    <script>
      function move() {
        var elem = document.getElementById("myBar");
        var width = 1;
        var id = setInterval(frame, 10);

        function frame() {
          if (width >= 100) {
            clearInterval(id);
          } else {
            width++;
            elem.style.width = width + '%';
          }
        }
      }
    </script>

</body>

</html>
Code language: HTML, XML (xml)

The above code implementation does not load any content after the loading bar is full. You can try adding some content that is shown only after loading is full. You can play around with this code in this playground

Add To Cart Page

An Add To Cart page is one of the most important elements of any E-Commerce website. In this project, we will create a very minimalistic Add To Cart page, where we will be able to add an item to the cart and remove it. If an item is added more than once, then the item is replicated on the page. Here is the code for a minimalistic Add to Cart page. You can try out this project in the playground by clicking here.

<!DOCTYPE HTML>
<html>

<head>
  <style>
    .item {
      border: 1px solid black;
      border-radius: 5px;
      padding: 16px;
      text-align: center;
    }

    .cart {
      border: 1px solid black;
      border-radius: 5px;
      padding: 16px;
      text-align: center;
    }
  </style>
</head>

<body>

  <h1>E-Commerce Store</h1>

  <div class="item">
    <img src="https://via.placeholder.com/150x80">
    <p>Some text about the item..</p>
    <button onclick="addToCart(this)">Add to Cart</button>
    <button onclick="removeFromCart(this)">Remove from Cart</button>
  </div>

  <div class="item">
    <img src="https://via.placeholder.com/150x80">
    <p>Some text about the item..</p>
    <button onclick="addToCart(this)">Add to Cart</button>
    <button onclick="removeFromCart(this)">Remove from Cart</button>
  </div>

  <div class="item">
    <img src="https://via.placeholder.com/150x80">
    <p>Some text about the item..</p>
    <button onclick="addToCart(this)">Add to Cart</button>
    <button onclick="removeFromCart(this)">Remove from Cart</button>
  </div>

  <div class="cart">
    <h2>Cart</h2>
    <div class="cart-item">
      <img src="https://via.placeholder.com/150x80">
      <p>Some text about the item..</p>
      <button onclick="removeFromCart(this)">Remove from Cart</button>
    </div>
  </div>

  <script>
    function addToCart(btn) {
      var item = btn.parentElement;
      var cart = document.querySelector(".cart");
      var cloneItem = item.cloneNode(true);
      cart.appendChild(cloneItem);
      cloneItem.querySelector("button").innerText = "Remove from Cart";
    }

    function removeFromCart(btn) {
      var item = btn.parentElement;
      item.parentElement.removeChild(item);
    }
  </script>

</body>

</html>
Code language: HTML, XML (xml)

Weather Web App

Web applications are becoming more and more common. They’re how we do things like check the weather or play games. For this project, you’ll build a web application that will help us to get the weather of any place using WeatherAPI, which is provided by Open Weather Map. You’ll learn how to use JavaScript to make your page interactive. You’ll also learn how to use APIs to get data from other websites. Here is the code for this project. You can play around with this code here in the playground

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <title>Fetch Weather Details</title>
</head>

<body>
  <div id="weather-container">
    <h1>Weather Details</h1>
    <p id="weather-data"></p>
  </div>
  <script>
    const fetchWeatherData = () => {
      const apiKey = 'Your API Key';
      const city = 'Your City';
      const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;
      fetch(apiUrl).then((response) => response.json()).then((data) => {
        console.log(data);
        const {
          main,
          name
        } = data;
        const weatherData = `It is currently ${main.temp} degrees in ${name}`;
        document.getElementById('weather-data').textContent = weatherData;
      });
    };
    fetchWeatherData();
  </script>
</body>

</html>
Code language: HTML, XML (xml)

For this project to work, you will need an API key from Open Weather Map, which you can use in the above code example. You also need to use a valid city name in the above code so that the API returns you with a 200 status code, which means that the API call was successful. If you get any error status code, it means that you might have made some mistake(s) while calling the API. You can add more features to this web app by utilizing the full potential of WeatherAPI. You can learn more from their documentation.

Portfolio

A portfolio is a great way to showcase your work. For this project, you’ll create a portfolio. You’ll learn how to use HTML it to showcase your projects. You’ll also learn how to use CSS to style your portfolio. Here is the code for this project. You can also play around with this code here in the playground.

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <title>Single-page portfolio</title>

  <style>
    body {
      background-color: #fff;
      color: #333;
      font-family: 'Open Sans', sans-serif;
      font-size: 16px;
      line-height: 1.5;
    }

    a {
      color: #00b7ff;
      text-decoration: none;
    }

    a:hover {
      color: #333;
    }

    .wrapper {
      width: 90%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .section {
      padding: 60px 0;
    }

    .section-heading {
      text-align: center;
      margin-bottom: 30px;
    }

    .section-heading h2 {
      font-size: 42px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 2px;
    }

    .section-heading p {
      font-size: 18px;
      font-weight: 400;
    }

    .projects {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .projects li {
      margin-bottom: 30px;
    }

    .projects li img {
      max-width: 100%;
    }

    .projects li h3 {
      font-size: 24px;
      font-weight: 600;
      margin-top: 10px;
    }

    .projects li p {
      font-size: 16px;
      font-weight: 400;
      margin-bottom: 0;
    }
  </style>
</head>

<body>

  <div class="wrapper">
    <div class="section section-1">
      <div class="section-heading">
        <h2>Welcome to my Portfolio</h2>
        <p>Hello, I am Navyansh Kesarwani, and I am a programmer.</p>
      </div>
    </div>
    <div class="section section-1">
      <div class="section-heading">
        <h2>Projects</h2>
        <p>Here are some of the projects I've been working on.</p>
      </div>

      <ul class="projects">

        <li>
          <img src="https://source.unsplash.com/random/400x200" alt="">
          <h3>Project 1</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel justo quis nunc vehicula condimentum. Nulla facilisi. Quisque id nunc diam.</p>
        </li>

        <li>
          <img src="https://source.unsplash.com/random/400x200" alt="">
          <h3>Project 2</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel justo quis nunc vehicula condimentum. Nulla facilisi. Quisque id nunc diam.</p>
        </li>

        <li>
          <img src="https://source.unsplash.com/random/400x200" alt="">
          <h3>Project 3</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel justo quis nunc vehicula condimentum. Nulla facilisi. Quisque id nunc diam.</p>
        </li>

      </ul>

    </div>
  </div>

</body>
</html>
Code language: HTML, XML (xml)

For this project, dummy text is used in the <p> and heading tags, which you can replace. Also, you can replace the dummy image address in the <img>.

Landing Page for a Product

Every business nowadays requires a landing page for its product. A product’s landing page describes everything about the product, which helps advertise that product to visitors. For this project, we will build a simple landing page of a website, which will contain images and a short description of that product. Here is the code for this project. You can also play around with this code here in the playground.

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Sample Product Landing Page</title>
  <style>
    /* Product name and image */
    .product-name {
      text-align: center;
      font-size: 24px;
    }

    .product-image {
      display: block;
      text-align: center;
      margin-top: 5%;
      margin-bottom: 5%;
    }

    /* Product description */
    .product-description {
      padding: 20px;
      font-size: 16px;
      text-align: center;
    }

    /* Product price */
    .product-price {
      text-align: center;
      font-size: 18px;
    }

    /* Add to cart button */
    .add-to-cart {
      text-align: center;
    }

    .button {
      display: inline-block;
      padding: 10px 20px;
      border: 1px solid #333;
      border-radius: 3px;
      background-color: #fff;
      color: #333;
      text-decoration: none;
    }
  </style>
</head>

<body>
  <div class="product-name">Sample Product</div>
  <div class="product-image"><img src="https://source.unsplash.com/random/400x200" alt="Sample Product"></div>
  <div class="product-description">
    This is a sample product. It is great!
  </div>
  <div class="product-price">$10.00</div>
  <div class="add-to-cart">
    <a href="#" class="button">Add to Cart</a>
  </div>
</body>

</html>
Code language: HTML, XML (xml)

Conclusion

So this was my pick for the Top 10 HTML Projects for Beginners. These are just a few project ideas. These projects will teach you the basics of HTML, CSS and JavaScript and help you to strengthen your knowledge of core concepts one requires in Web Development. They’re also great examples of common uses for web pages. Once you’ve completed these Top 10 HTML projects, you’ll be well on your way to becoming a web developer.

Sharing is caring

Did you like what Navyansh Kesarwani wrote? Thank them for their work by sharing it on social media.

0/10000

No comments so far