Projects
We’ll introduce you to five exciting HTML projects that you can dive into. Whether you’re a beginner or looking to expand your web development repertoire, these projects will help you solidify your understanding of HTML
1. Personal Portfolio Page
Your online presence starts with a personal portfolio page. Showcase your skills, experiences, and projects in a well-structured HTML page. Use headings, paragraphs, and links to make it attractive. As you progress, you can always add CSS for a visually appealing touch.
<!DOCTYPE html> <html> <head> <title>My Portfolio</title> </head> <body> <header> <h1>John Doe</h1> </header> <nav> <ul> <li><a href="#about">About Me</a></li> <li><a href="#projects">Projects</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> <section id="about"> <h2>About Me</h2> <p>This is a brief introduction about me.</p> </section> <section id="projects"> <h2>Projects</h2> <ul> <li><a href="project1.html">Project 1</a></li> <li><a href="project2.html">Project 2</a></li> </ul> </section> <section id="contact"> <h2>Contact</h2> <p>Email: john@example.com</p> <p>Phone: 123-456-7890</p> </section> <footer> <p>© 2023 John Doe</p> </footer> </body> </html>
2. Recipe Book
If you love cooking, why not create your digital recipe book? Each recipe can be a separate HTML page with its description, ingredients, and instructions. Use lists and images to display the recipes and, of course, you can always jazz it up with CSS.
<!DOCTYPE html> <html> <head> <title>My Recipe Book</title> </head> <body> <header> <h1>My Favorite Recipes</h1> </header> <section> <h2>Pancakes</h2> <p>Here's how to make delicious pancakes:</p> <ul> <li>Ingredients: <ul> <li>1 cup all-purpose flour</li> <li>1 tablespoon sugar</li> <li>1 teaspoon baking powder</li> <li>1/2 teaspoon salt</li> <li>1 cup milk</li> <li>1 egg</li> </ul> </li> <li>Instructions: <ol> <li>In a bowl, mix the dry ingredients.</li> <li>In another bowl, whisk the milk and egg.</li> <li>Pour the wet mixture into the dry mixture, and stir until smooth.</li> <li>Heat a griddle or skillet and cook the pancakes until golden brown.</li> </ol> </li> </ul> </section> <section> <h2>Spaghetti Bolognese</h2> <p>Learn how to prepare a classic spaghetti bolognese:</p> <!-- Include the ingredients and instructions here --> </section> <footer> <p>© 2023 My Recipe Book</p> </footer> </body> </html>
3. Basic Blog
Blogging is an excellent way to share your thoughts and insights. Create a basic blog with multiple articles. Each article can be a separate HTML page with a title, date, and content. Use headings, paragraphs, and links to navigate between articles. Once your content is ready, you can work on styling it using CSS.
<!DOCTYPE html> <html> <head> <title>My Blog</title> </head> <body> <header> <h1>My Blog</h1> </header> <section> <h2>Post 1 - Introduction</h2> <p>This is the first post in my blog. It's all about getting started.</p> <a href="post1.html">Read more</a> </section> <section> <h2>Post 2 - HTML Basics</h2> <p>Learn the fundamentals of HTML and how to create web pages.</p> <a href="post2.html">Read more</a> </section> <section> <h2>Post 3 - Building with Tables</h2> <p>Explore how to structure content with HTML tables.</p> <a href="post3.html">Read more</a> </section> <footer> <p>© 2023 My Blog</p> </footer> </body> </html>
4. FAQ Page
Every website or service needs an FAQ (Frequently Asked Questions) page. Practice your HTML skills by structuring questions and answers with headings, lists, and paragraphs. Make it user-friendly and accessible.
<!DOCTYPE html> <html> <head> <title>FAQ</title> </head> <body> <header> <h1>Frequently Asked Questions</h1> </header> <section> <h2>Question 1: What is HTML?</h2> <p>HTML (Hypertext Markup Language) is the standard markup language used to create web pages.</p> </section> <section> <h2>Question 2: How do I create a hyperlink?</h2> <p>To create a hyperlink, use the <a> tag and specify the URL in the href attribute.</p> </section> <section> <h2>Question 3: What is the latest HTML version?</h2> <p>The latest HTML version as of 2021 is HTML5.</p> </section> <footer> <p>© 2023 FAQ Page</p> </footer> </body> </html>
5. Simple Quiz
Quizzes are engaging and fun. Develop a simple quiz with multiple-choice questions using HTML forms. It’s an excellent way to learn about forms in HTML.
<!DOCTYPE html> <html> <head> <title>HTML Quiz</title> </head> <body> <header> <h1>HTML Quiz</h1> </header> <section> <h2>Question 1</h2> <p>What does HTML stand for?</p> <form> <input type="radio" name="q1" value="a"> Hypertext Markup Language<br> <input type="radio" name="q1" value="b"> Hyper Transfer Markup Language<br> <input type="radio" name="q1" value="c"> High Text Markup Language<br> </form> </section> <section> <h2>Question 2</h2> <p>Which tag is used to create a hyperlink?</p> <form> <input type="radio" name="q2" value="a"> <a><br> <input type="radio" name="q2" value="b"> <link><br> <input type="radio" name="q2" value="c"> <url><br> </form> </section> <footer> <p>© 2023 HTML Quiz</p> </footer> </body> </html>
