Combining All Pieces - Including Link to Books Page

Wrapping It All Up

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.

Creating the Books Page

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:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Books</title>
</head>
<body>
    <h1>Books I've Read Recently</h1>
    <ul>
        <li>
            <h2>Animal Farm</h2>
            <p>George Orwell</p>
            <p>A satirical allegorical novella, in the form of a beast fable</p>
        </li>
        <li>
            <h2>1984</h2>
            <p>George Orwell</p>
            <p>A dystopian social science fiction novel</p>
        </li>
        <li>
            <h2>Brave New World</h2>
            <p>Aldous Huxley</p>
            <p>An English social science fiction dystopian novel</p>
        </li>
    </ul>
    <p>Back to <a href="solution.html">Main Page</a></p>
</body>

Combining All Peaces Together

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:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>About Me - Website</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#skills">My Skills</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="home">
            <h2>Home</h2>
            <p>This is the homepage of my personal website.</p>
            <img src="https://codesignal-staging-assets.s3.amazonaws.com/uploads/1718974161470/e877015c-32db-4655-bd20-46aa93158a4f.jpg" alt="A photo of myself" width="300">
            <p>Learn more about me <a href="https://en.wikipedia.org/wiki/About.me" target="_blank">here</a></p>
        </section>
        <section id="about">
            <h2>About Me</h2>
            <p>Hi! I'm a web development enthusiast, eager to learn more.</p>
            <p>Learn more about the books I read recently <a href="books.html">here</a></p>
        </section>

        <section id="skills">
            <h2>Skills</h2>
            <p>Below is a table showcasing my skills and proficiency levels:</p>
            <table border="1">
                <thead>
                    <tr>
                        <th>Skill</th>
                        <th>Proficiency</th>
                        <th>Years of Experience</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>HTML</td>
                        <td>Intermediate</td>
                        <td>1</td>
                    </tr>
                    <tr>
                        <td>CSS</td>
                        <td>Intermediate</td>
                        <td>1</td>
                    </tr>
                    <tr>
                        <td>JavaScript</td>
                        <td>Beginner</td>
                        <td>&lt;0.5</td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 My Personal Website</p>
    </footer>
</body>
</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.

Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal