codedamn

Top 10 HTML Projects for Beginners (with Code)

  • Prabal Gupta's profile image
    Prabal Gupta
    Author
Top 10 HTML Projects for Beginners (with Code)

As a beginner, finding the proper suit of HTML Projects ideas that match your skill and expertise levels could be difficult. Hence, I have created a list of top 10 HTML projects for beginners to give you the push to get begin with the HTML journey.

Because, when it comes to getting started inside the coding, the majority select to begin with the primary language as, HTML and CSS, as a result, in terms of developing a unique software or internet site, you could make the best static web pages if your fundamentals are very clear. In this way, you may come up with progressive HTML projects listed below.

10 HTML projects for beginners

Registration Form

The survey form is one of the most basic HTML projects for beginners, you may start with. In this project, you can create a simple survey form and then post the records captured.

HTML

<!DOCTYPE html> <html> <head> <h1>Registration Form</h1> </head> <body> <form> <table> <tr> <td> Email Address: </td> <td> <input type=”text” email=””> </td> </tr> <tr> <td> Password: </td> <td> <input type=”Password” name=””> </td> </tr> </table> </form><br> <input type="checkbox" name="Male" value="Male"> Male <input type="checkbox" name="Female" value="Female"> Female <br> <button class="submit">Register</button> </body> </html>
Code language: HTML, XML (xml)

Result

Technical Documentation Page

Every language, software, hardware, and many others, all have technical documentation for data and to assist. Here is how you may create a simple documentation web page, with inner linking from the left navigation to the content at the proper of the web page. You can take a look at the documentation for Python, Java, and so forth. For reference to how those pages appear. Most technical documentation has more than one hierarchy and pages; however, for simplicity, we’ve got created a simple challenge to start. You can make bigger it further and upload it as per your wish. Technical documentation might be a useful and top HTML project if you are just beginning your HTML career.

HTML

<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main-body"> <nav id="navbar"> <header>Documentation Menu</header> <a href="#Topic-1" class="nav-link"> Topic 1</a> <a href="#Topic-2" class="nav-link"> Topic 2</a> <a href="#Topic-3" class="nav-link"> Tpoic 3</a> <a href="#Topic-4" class="nav-link"> Topic 4</a> <a href="#Topic-5" class="nav-link"> Topic 5</a> <a href="#Topic-6" class="nav-link"> Topic 6</a> </nav> <main id="main-doc"> <section class="main-section" id="Topic-1"> <header> Topic-1 </header> <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias repellat corporis, dolore alias nam deleniti itaque dolores debitis assumenda, praesentium ipsum? Nihil accusamus aspernatur dignissimos, voluptates quis velit quibusdam ad sapiente beatae pariatur ipsa ducimus natus, eum, laborum adipisci esse quia iusto. Incidunt possimus provident recusandae, veritatis porro ab. Repellat magni vitae nisi cum officiis reiciendis fugiat error rerum nesciunt fugit eum nostrum soluta ipsam modi architecto, corrupti nemo perspiciatis nobis laborum. Quasi ipsam excepturi officiis voluptates atque vel aut. Dolorum nulla, dignissimos enim obcaecati, asperiores veniam, voluptates eveniet ex totam officiis veritatis reiciendis quisquam porro corrupti quidem ab unde! </p> <p>he “Hello World” program is the first step towards learning any programming language and also one of the simplest programs you will learn. All you have to do is display the message “Hello World” on the screen. <br><br>Let us now look at the program :<br> </p> <code> #include<iostream> <br> using namespace std; <br> int main() <br> { <br> cout〈〈"Hello World"; <br> return 0; <br> } </code> <br> <p>C++ is an Object Oriented Programming Language. <br> The main pillars of Object Oriented Programming are : </p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam laborum nemo doloremque totam expedita officiis, cum recusandae ea soluta saepe mollitia eaque excepturi at temporibus. </section> <section class="main-section" id="Topic-2"> <header> Topic-2 </header> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur fugit accusamus amet quisquam praesentium. Est eos fugit molestias, commodi, ad fugiat eius explicabo at nam magni maxime, repellat repudiandae? Totam. </p> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius itaque cum sit non? Facilis fuga ipsum eaque, pariatur eligendi dolorem odit cupiditate, sed ducimus animi ullam qui doloribus ipsa deserunt corrupti vitae. Consequatur magni sed quam sunt fugit officiis aut eveniet error iusto dolorem, harum repellendus eum aliquam eligendi omnis deserunt reiciendis voluptate praesentium eos incidunt. Sed quisquam optio explicabo perferendis culpa nostrum possimus expedita consequatur! Amet atque voluptatem illo, quaerat corrupti id repellendus ab ex eum natus sint culpa alias. Quae, assumenda magni totam labore quisquam vel, voluptatem deserunt nostrum quia ipsam tempore vero libero, beatae tenetur mollitia nam. </p> </section> <section class="main-section" id="#Topic-3"> <header> #Topic-3 </header> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem temporibus distinctio quaerat praesentium quo, eos hic odit mollitia quos? Quia minima officia debitis velit dolorum, voluptate fuga optio minus ratione. <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt eius voluptates dolores fugiat molestiae atque corrupti rem commodi quasi, earum ea provident aspernatur saepe quam cupiditate, eveniet totam quidem itaque. </p> </section> <section class="main-section" id="#Topic-4"> <header> #Topic-4 </header> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione cumque voluptates sit cupiditate perferendis magnam doloribus qui, tempore quisquam numquam aut maxime corrupti incidunt veritatis blanditiis id quas quod molestias, natus voluptatem? Deserunt minima distinctio molestias a autem hic voluptate, sint ipsum cumque ipsa voluptatem adipisci, earum dolore nostrum! Nemo exercitationem ea, doloribus, fuga aliquid doloremque rem adipisci optio aperiam suscipit ipsum ex, in at ipsam natus unde mollitia? Doloremque, quas laborum quis ut ratione incidunt iste quidem veniam pariatur aspernatur nihil earum consequuntur animi eveniet quae, veritatis eius. Accusantium iusto, quod omnis enim totam dicta veritatis sed. Fuga, dignissimos. <br> </p> </section> <section class="main-section" id="#Topic-4"> <header> #Topic-5 </header> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate odit doloribus magnam impedit neque suscipit, animi excepturi consequatur nihil veritatis officiis. Voluptatem perspiciatis sapiente, corrupti facilis dolorum atque ab dolorem? </p> </section> <section class="main-section" id="#Topic-6"> <header> Topic-6 </header> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos incidunt et id eveniet nihil ipsa debitis tenetur nulla, facere dolore, expedita sit quo accusantium natus ducimus sed, odit reprehenderit est? </p> </section> </main> </div> </body> </html>
Code language: HTML, XML (xml)

CSS

div.main-body { display: grid; grid-template-columns: minmax(300px , auto)1fr; grid-template-areas: "navbar mainContent"; grid-gap: 20px; } nav#navbar { grid-area: navbar; position: fixed; } nav#navbar a { display: block; border: 1px solid black; padding: 5px; margin: 10px 0; text-decoration: none; color: black; } main#main-doc { grid-area: mainContent; } header { font-size: 1.5rem; font-weight: bold; } code { background-color: #CCC; display: block; padding: 20px; }
Code language: CSS (css)

Result

Video Background Site

This project explains with complete source code, how we are able to add a video to our web page. Also, will use CSS to design our page and make it more attractive.

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> <div class="main"> <h1>FULL SCREEN VIDEO BACKGROUND DEMO <br /><span style="font-size:10px;">film by https://madcowfilms.co.uk/ </span></h1> </div> <video autoplay loop id="video-background" muted> <source src="https://media-us-westslateappcom.s3.us-west-1.amazonaws.com/madcowfilms/production/clips/514ebae1-ebbb-4477-addd-d52a30cd28c1-1280x720.2500.webm" type="video/webm"> </video> </body> </html>
Code language: HTML, XML (xml)

CSS

body { margin: 0; padding: 0; background: #333; background-attachment: fixed; background-size: cover; } #video-background { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; } h1 { position: absolute; bottom: 1%; left:5%; width: 94%; font-size: 36px; letter-spacing: 3px; color: #fff; font-family: Montserrat, sans-serif; text-align: left; }
Code language: CSS (css)

Result

Image gallery

The next project on the list is an image gallery. This is an interesting project and will help you to revise and learn how to manage your images in an interactive way. Along with that, we will see how we can apply some CSS effects to make it more beautiful and engaging.

Here is how our final project will look like.

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> How to make image Gallery Using HTML & CSS? </title> <!--Style CSS--> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Image gallery</h1> <div class="myProducts"> <div class="myProducts-gallery"> <img src= "https://images.unsplash.com/photo-1663058512232-800d8c617f4d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" alt="click here" onclick="myImageFunction(this)"> <img src= "https://images.unsplash.com/photo-1661956602868-6ae368943878?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="click here" onclick="myImageFunction(this)"> <img src= "https://images.unsplash.com/photo-1663058512232-800d8c617f4d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" alt="click here" onclick="myImageFunction(this)"> <img src= "https://images.unsplash.com/photo-1662581872277-0fd0bf3ae8f6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=386&q=80" alt="click here" onclick="myImageFunction(this)"> </div> <div class="image-container"> <img id="img-Box" src= "https://images.unsplash.com/photo-1647085215540-ba65ac35f182?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="click here"> </div> </div> <script> function myImageFunction(productSmallImg) { var productFullImg = document.getElementById("img-Box"); productFullImg.src = productSmallImg.src; } </script> </body> </html>
Code language: HTML, XML (xml)

CSS

* { margin: 0; padding: 0; font-family: 'Yaldevi', sans-serif; } h1 { color: rgb(254, 195, 0); font-size: 80px; font-weight: bold; text-align: center; padding-top: 22px; } .myProducts-gallery img{ height: 92px; margin: 10px 0; cursor: pointer; display: block; opacity: .5; } .myProducts-gallery img:hover { opacity: 1; } .myProducts-gallery { float: left; } .myProducts { top: 50%; left: 50%; transform: translate(-50% , -50%); position: absolute; } .image-container img { height: 400px; transition: transform 1s; } .image-container img:hover{ transform: scale(1.5); cursor: zoom-in; } .image-container { float: right; padding: 10px; }
Code language: CSS (css)

A Tribute Page

In this project, you are going to embark on one of the most basic HTML projects you will ever do. As implied by the name, a tribute web page is created to honor someone who has stimulated you or a person you adore and revere. To create a memorial web page, you need to be familiar with the fundamentals of HTML. A tribute page is a web page that may be prolonged to many pages or sections. This project will help you to revise your HTML basics. Also, we will use some CSS to make sure that the website’s history shade is visually attractive.

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Tribute Page</title> <!--Style CSS--> <link rel="stylesheet" href="style.css"> </head> <body> <main id="main"> <!-- Title of the page --> <h1 id="title"> A. P. J. Abdul Kalam </h1> <div id="img"> <!--Image of the Tribute Person--> <img src="https://imgs.search.brave.com/WNHo92gcmX2sKY9nAHJkFzblXcbTf4-Pd8C163S11jU/rs:fit:866:1024:1/g:ce/aHR0cHM6Ly9pbmRp/ZXNlZHVjYXRpb24u/Y29tL3dwLWNvbnRl/bnQvdXBsb2Fkcy8y/MDIwLzA1L0EuX1Au/X0ouX0FiZHVsX0th/bGFtLTg2NngxMDI0/LmpwZw" id="image"><br> <small id="caption"> Great Indian scientist and politician who played a leading role in the development of India’s missile and nuclear weapons programs. </small> </div> <div id="tribute-data"> <!--Achievements and other details of the person--> <h1 class="title-APJ"> About the Legend </h1> <p> ☛ A.P.J. Abdul Kalam, in full Avul Pakir Jainulabdeen Abdul Kalam, was born on October 15, 1931, in Rameswaram, Tamil Nadu, India.<br><br> ☛ He served as the 11th President of India from 2002 to 2007.<br><br> ☛ Kalam earned a degree in aeronautical engineering from the Madras Institute of Technology and in 1958 joined the Defence Research and Development Organisation (DRDO).<br><br> ☛ In 1969, he moved to the Indian Space Research Organisation, where he was project director of the SLV-III, the first satellite launch vehicle that was both designed and produced in India. <br><br> ☛ Rejoining DRDO in 1982, Kalam planned the program that produced a number of successful missiles, which helped earn him the nickname <strong> “Missile Man.”</strong> <br><br> ☛ Among those successes was Agni, India’s first intermediate-range ballistic missile, which incorporated aspects of the SLV-III and was launched in 1989. <br><br> ☛ He also played a pivotal organisational, technical, and political role in India's Pokhran-II nuclear tests in 1998, the first since the original nuclear test by India in 1974. <br><br> ☛ From 1992 to 1997 Kalam was scientific adviser to the defense minister, and he later served as principal scientific adviser (1999–2001) to the government with the rank of cabinet minister. <br><br> ☛ His prominent role in the country’s 1998 nuclear weapons tests solidified India as a nuclear power and established Kalam as a national hero, although the tests caused great concern in the international community. <br><br> ☛ In 1998 Kalam put forward a countrywide plan called Technology Vision 2020, which he described as a road map for transforming India from a less-developed to a developed society in 20 years. The plan called for, among other measures, increasing agricultural productivity, emphasizing technology as a vehicle for economic growth, and widening access to health care and education. <br><br> ☛ Kalam received <b>7</b> honorary doctorates from <b>40</b> universities. The Government of India honoured him with the <b>Padma Bhushan in 1981</b> and the <b>Padma Vibhushan in 1990</b> for his work with ISRO and DRDO and his role as a scientific advisor to the Government. <br><br> ☛ In 1997, Kalam received India's highest civilian honour, the Bharat Ratna, for his contribution to the scientific research and modernisation of defence technology in India. <br><br> ☛ In 2013, he was the recipient of the Von Braun Award from the National Space Society "to recognize excellence in the management and leadership of a space-related project". <br><br> ☛ While delivering a lecture at the Indian Institute of Management Shillong, Kalam collapsed and died from an apparent cardiac arrest on <b>27 July 2015</b>, aged 83. <br><br> ☛ Wheeler Island, a national missile test site in Odisha, was renamed <b>Kalam Island</b> in September 2015. <br><br> ☛ A prominent road in New Delhi was renamed from Aurangzeb Road to <b>Dr APJ Abdul Kalam Road</b> in August 2015. <br><br> ☛ In February 2018, scientists from the Botanical Survey of India named a newly found plant species as Drypetes kalamii, in his honour. <br><br><br> </p> </div> <br> For more information, check out <a id="tribute-link" href="#"> <b>A.P.J. Abdul Kalam</b> on Wikipedia. [ <small>Developed by @<a href="#"> Sushant Gaurav.</a></a> </small>] </main> </body> </html>
Code language: HTML, XML (xml)

CSS

body { background-color: #fac800; margin: 20%; } #title { text-align: center; text-shadow: 5px 5px 10px white; font-size: 7vh; } img { display: inline-block; width: 100%; } #image { align-items: center; justify-content: center; width: 50%; } #caption { font-size: 17px; font-family: Gill Sans; color: black; } div#tribute-data { background-color: rgb(46, 139, 87, 0.25); font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; padding: 25px 25px; margin: 11px; margin-top: 50px; } h1.title-APJ { font-size: 35px; color: white; text-align: center; } #tribute-link { text-decoration: none; color: black; }
Code language: CSS (css)

Result

Event Info Page

This is one of the handy projects which you can use on several occasions. You can make a simple page to inform or announce your event timeline or any information you may want to inform your users. It is a simple HTML project, which you can make interactive with CSS as per your use case.

HTML

<!DOCTYPE html> <html lang="en"> <head> <title>Event Page</title> <link rel="stylesheet" href="style.css"> </head> <body> <section> <div class="leftBox"> <div class="content"> <h1> Events and Shows </h1> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores soluta sint, labore molestias dignissimos quo ullam, eligendi reprehenderit iusto dolor nemo. Molestiae quibusdam officiis voluptatibus reiciendis excepturi. Quas aliquam atque dolor, magni earum eligendi reiciendis dignissimos doloribus quo cum, corrupti natus odit laudantium assumenda nihil, perferendis quam vero? Voluptas totam, quos ut quis a commodi error iusto amet sint delectus unde! Dolorum ut possimus adipisci impedit similique! Qui excepturi quibusdam beatae quia veniam doloremque error officia quidem tempora dolor assumenda nihil aperiam, officiis cum neque ab ad nesciunt! Vero obcaecati sequi nemo maiores, aliquam cum at dolorem aut modi repellat! </p> </div> </div> <div class="events"> <ul> <li> <div class="time"> <h2> 10 <br><span>Sep</span> </h2> </div> <div class="details"> <h3> Where is the event happening? </h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero mollitia tempora adipisci quo? Cumque deserunt alias, enim vitae optio consectetur similique officiis quidem cum quas, harum laudantium quos, consequatur temporibus. </p> <a href="#">View Details</a> </div> <div style="clear: both;"></div> </li> <li> <div class="time"> <h2> 20 <br><span>Sep</span> </h2> </div> <div class="details"> <h3> Where is the event happening? </h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus fugiat, rerum, saepe non aut ratione dignissimos veritatis vitae soluta eos odit assumenda. Facilis esse rem nemo eaque, cupiditate quam? Aliquam. <a href="#">View Details</a> </div> <div style="clear:both;"></div> </li> <li> <div class="time"> <h2> 29 <br><span>Sepaa</span> </h2> </div> <div class="details"> <h3> Where is the event happening? </h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil officia a ex saepe doloribus? Autem eveniet qui, enim at a sit deserunt debitis, unde ad, voluptatum cumque itaque commodi fuga? </p> <a href="#">View Details</a> </div> <div style="clear:both;"></div> </li> </ul> </div> </section> </body> </html>
Code language: HTML, XML (xml)

CSS

body { margin: 0; padding: 0; } section { width: 100%; height: 100vh; } section .leftBox { width: 50%; height: 100%; float: left; padding: 50px; box-sizing: border-box; } section .leftBox .content { color: #fff; background: rgba(0, 0, 0, 0.5); padding: 40px; transition: .5s; } section .leftBox .content h1 { margin: 0; padding: 0; font-size: 50px; text-transform: uppercase; } section .events { position: relative; width: 50%; height: 100%; background: rgba(0, 0, 0, 0.5); float: right; box-sizing: border-box; } section .events ul { position: absolute; top: 50%; transform: translateY(-50%); margin: 0; padding: 40px; box-sizing: border-box; } section .events ul li { list-style: none; background: rgb(250, 250, 250); box-sizing: border-box; height: 200px; margin: 15px 0; } section .events ul li .time { position: relative; padding: 20px; background: #32bdb7; box-sizing: border-box; width: 30%; height: 100%; float: left; text-align: center; transition: .5s; } section .events ul li .time h2 { position: absolute; margin: 0; padding: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 60px; line-height: 30px; } section .events ul li .time h2 span { font-size: 30px; } section .events ul li .details { padding: 20px; background: #fff; box-sizing: border-box; width: 70%; height: 100%; float: left; } section .events ul li .details h3 { position: relative; margin: 0; padding: 0; font-size: 22px; } section .events ul li .details p { position: relative; margin: 10px 0 0; padding: 0; font-size: 16px; }
Code language: CSS (css)

Result

Image slider

Another way to showcase your pictures on your website, is an image slider. This project is good to give you an option to project your images with a sidebar. It is a good handy project for beginners. We will use HTML and try to add some CSS to our project.

HTML

<!DOCTYPE html> <html> <head> <title>Image Slider</title> <style> * { box-sizing: border-box; } .slider { width: 300px; text-align: center; overflow: hidden; } .slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .slides::-webkit-scrollbar { width: 10px; height: 10px; } .slides::-webkit-scrollbar-thumb { background: #666; border-radius: 10px; } .slides::-webkit-scrollbar-track { background: transparent; } .slides > div { scroll-snap-align: start; flex-shrink: 0; width: 300px; height: 300px; margin-right: 50px; border-radius: 10px; background: #eee; transform-origin: center center; transform: scale(1); transition: transform 0.5s; position: relative; display: flex; justify-content: center; align-items: center; font-size: 100px; } .slider > a { display: inline-flex; width: 1.5rem; height: 1.5rem; background: white; text-decoration: none; align-items: center; justify-content: center; border-radius: 50%; margin: 0 0 0.5rem 0; position: relative; } .slider > a:active { top: 1px; color: #1c87c9; } .slider > a:focus { background: #eee; } /* Don't need button navigation */ @supports (scroll-snap-type) { .slider > a { display: none; } } html, body { height: 100%; overflow: hidden; } body { display: flex; align-items: center; justify-content: center; background: linear-gradient(to right, #1c87c9, #ffcc00); font-family: 'Ropa Sans', sans-serif; } </style> </head> <body> <div class="slider"> <a href="#slide-1">1</a> <a href="#slide-2">2</a> <a href="#slide-3">3</a> <a href="#slide-4">4</a> <a href="#slide-5">5</a> <div class="slides"> <div id="slide-1">1</div> <div id="slide-2">2</div> <div id="slide-3">3</div> <div id="slide-4">4</div> <div id="slide-5">5</div> </div> </div> </body> </html>
Code language: HTML, XML (xml)

Survey Form

Survey forms, this is an absolutely essential project which every beginner should try. This project will make you understand the concepts of form fields like text, numbers, radio buttons, checkboxes, etc.. Try to play with as many options as you can to figure out several form elements in HTML. This is a pure HTML project.

This is how our survey form looks like:

HTML

<!DOCTYPE HTML> <html> <head> <title>Students Survey Form</title> </head> <body> <form action="http://google.co.in"> <div align="center"> <h1>Students Survey Form</h1> Full Name: <input type="text" name="UserName" size=35 maxlength=35 value=""> </br></br> Enrollment no.: <input type="text" name="Deptt" size=35 maxlength=35 value=""> </br> </br> Why you want to persu this course: <textarea name="Comments" cols=30 rows=4></textarea> </br> </br> Are you eligible for scholarship? <input type="radio" name="exe" value=1>Yes <input type="radio" name="exe" value=2>No </p> Your favorite programming language? <p> <input type="checkbox" name="Books">C/C++ <input type="checkbox" name="Web">Python <input type="checkbox" name="Phone">Javascript <input type="checkbox" name="Magazines">Java </p> What technology do you like? <select name="moviepref" ><option> <option value=1 selected = "true">Web Development <option value=2 >Blockchain <option value=3 >Frontend <option value=4 >Backend <option value=5 >Database </select> </br></br> <input type=submit value="Submit"> </div> </form> </body> </html>
Code language: HTML, XML (xml)

Parallax website

This is a project which you may have seen on some high-level websites. Parallax scrolling is a web website trend in which the historical past content material (i.e. An image) is moved at an exclusive speed than the foreground content material even as scrolling. This is a simple HTML project with some simple CSS use cases.

HTML

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .parallax { /* The image used */ background-image: url("https://images.unsplash.com/photo-1564622537004-6862d6bc6a72?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fGFwaiUyMGFiZHVsJTIwa2FsYW18ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60"); /* Set a specific height */ min-height: 500px; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } </style> </head> <body> <p>Scroll Up and Down this page to see the parallax scrolling effect.</p> <div class="parallax"></div> <div style="height:1000px;background-color:rgb(177, 171, 171);font-size:36px"> Scroll Up and Down this page to see the parallax scrolling effect. This div is just here to enable scrolling. Tip: Try to remove the background-attachment property to remove the scrolling effect. Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa id suscipit fugit necessitatibus, quidem fugiat nulla soluta odio ipsa officiis assumenda inventore voluptas pariatur! Non hic pariatur dolore quidem dolor. </div> </body> </html>
Code language: HTML, XML (xml)

Try to play around with this project, add some CSS to make it attractive.

User profile card

This project is something every beginner will love to do. A user profile card that contains a picture, name, and brief details about the user. You can use these profile cards on various projects, they have ample of use cases. Also, this project will help you to play around same advanced CSS concept along with your HTML code. Along with that you will know how to manage elements in the dev box seamlessly.

HTML

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); max-width: 300px; margin: auto; text-align: center; font-family: arial; } .title { color: grey; font-size: 18px; } button { border: none; outline: 0; display: inline-block; padding: 8px; color: white; background-color: rgb(63, 10, 10); text-align: center; cursor: pointer; width: 100%; font-size: 18px; } a { text-decoration: none; font-size: 22px; color: black; } button:hover, a:hover { opacity: 0.7; } </style> </head> <body> <h2 style="text-align:center">User Profile Card</h2> <div class="card"> <img src="https://images.unsplash.com/photo-1529248236319-f679e0ba552d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8dG9ueSUyMHN0YXJrfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="Tony" style="width:100%"> <h1>Tony Stark</h1> <p class="title">CEO & Founder, Example</p> <p>Stark Ind.</p> <div style="margin: 24px 0;"> <a href="#"><i class="fa fa-dribbble"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a> <a href="#"><i class="fa fa-facebook"></i></a> </div> <p><button>Contact</button></p> </div> </body> </html>
Code language: HTML, XML (xml)

Result:

Conclusion

Congrats, for making till here! In this blog, I listed and discussed the top 10 HTML projects for beginners which every beginner must try. These projects will help you to understand basic HTML concepts along with CSS to beautify your web pages. After this, you may try out some intermediate and advanced projects to test your skills and explore creativity.

Also if want to learn frontend development, check-out Frontend Web Developer Learning Path on codedamn.

That’s it for today! Thanks.

Learn programming on codedamn

Codedamn is an interactive coding platform with tons of sweet programming courses that can help you land your first coding job. Here's how:

Programming is one of the most in-demand jobs today. Learning to program can change your future. All the best!