You've journeyed through building a well-structured About Me webpage, adding valuable content along the way. Congratulations! Now, it’s time to bring everything together elegantly. In this lesson, we'll integrate all the elements you've learned: the navigation menu, sections, images, links, and the skills table. Additionally, we’ll add a link to a separate books page to enrich your About Me webpage further.
To make your About Me webpage more dynamic, you can include a link to a separate page that lists the books you've read recently. This page will contain a list of books, each with a title, author, and a brief description. Here's a simple example of what the books page might look like:
HTML, XML1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Books</title> 6</head> 7<body> 8 <h1>Books I've Read Recently</h1> 9 <ul> 10 <li> 11 <h2>Animal Farm</h2> 12 <p>George Orwell</p> 13 <p>A satirical allegorical novella, in the form of a beast fable</p> 14 </li> 15 <li> 16 <h2>1984</h2> 17 <p>George Orwell</p> 18 <p>A dystopian social science fiction novel</p> 19 </li> 20 <li> 21 <h2>Brave New World</h2> 22 <p>Aldous Huxley</p> 23 <p>An English social science fiction dystopian novel</p> 24 </li> 25 </ul> 26 <p>Back to <a href="solution.html">Main Page</a></p> 27</body>
Now, let’s integrate the books page link into your About Me webpage. You can add the link to the books page in the About Me section. Here’s the updated About Me webpage with the books page link:
HTML, XML1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>About Me - Website</title> 6</head> 7<body> 8 <header> 9 <h1>Welcome to My Website</h1> 10 <nav> 11 <ul> 12 <li><a href="#home">Home</a></li> 13 <li><a href="#about">About</a></li> 14 <li><a href="#skills">My Skills</a></li> 15 </ul> 16 </nav> 17 </header> 18 <main> 19 <section id="home"> 20 <h2>Home</h2> 21 <p>This is the homepage of my personal website.</p> 22 <img src="https://codesignal-staging-assets.s3.amazonaws.com/uploads/1718974161470/e877015c-32db-4655-bd20-46aa93158a4f.jpg" alt="A photo of myself" width="300"> 23 <p>Learn more about me <a href="https://en.wikipedia.org/wiki/About.me" target="_blank">here</a></p> 24 </section> 25 <section id="about"> 26 <h2>About Me</h2> 27 <p>Hi! I'm a web development enthusiast, eager to learn more.</p> 28 <p>Learn more about the books I read recently <a href="books.html">here</a></p> 29 </section> 30 31 <section id="skills"> 32 <h2>Skills</h2> 33 <p>Below is a table showcasing my skills and proficiency levels:</p> 34 <table border="1"> 35 <thead> 36 <tr> 37 <th>Skill</th> 38 <th>Proficiency</th> 39 <th>Years of Experience</th> 40 </tr> 41 </thead> 42 <tbody> 43 <tr> 44 <td>HTML</td> 45 <td>Intermediate</td> 46 <td>1</td> 47 </tr> 48 <tr> 49 <td>CSS</td> 50 <td>Intermediate</td> 51 <td>1</td> 52 </tr> 53 <tr> 54 <td>JavaScript</td> 55 <td>Beginner</td> 56 <td><0.5</td> 57 </tr> 58 </tbody> 59 </table> 60 </section> 61 </main> 62 <footer> 63 <p>© 2024 My Personal Website</p> 64 </footer> 65</body> 66</html>
In the updated About Me webpage, the About Me section now includes a link to the books page. When users click on the link, they will be directed to the books page, where they can view the list of books you've read recently.
Bringing all these elements together not only solidifies your understanding but also transforms your webpage into a comprehensive and professional About Me page. Here’s why this is important:
- Cohesive Design: A well-structured webpage with varied content sections improves user engagement, making your site both informative and enjoyable to navigate.
- Advanced HTML Skills: Combining various HTML elements tests your understanding and ability to integrate multiple components seamlessly.
- Professional Development: Having a complete and polished webpage can serve as a portfolio piece, showcasing your web development skills to future employers or clients.
Having come this far, you should feel proud of the skills you’ve gained. Let’s proceed to the practice section to implement everything you've learned and make your About Me page truly stand out!