Integrating Skills Table to the Page

Integrating Skills Table to the Page

Welcome to the final step in this course! So far, you've successfully built a webpage with a header, footer, various sections, internal links, and even some interactivity. In this lesson, we will focus on integrating a skills table into your webpage. This will be especially useful for personal portfolios, helping you display your skills clearly and professionally.

What You'll Learn

In this lesson, you will learn how to:

  1. Create a Table: Use HTML table elements to display data in a structured format.
  2. Integrate the Skills Table: Add a new section to your webpage specifically for your skills.

Here's a quick example of what the skills table will look like:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My 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="#Projects">Projects</a></li>
                <li><a href="#Contact">Contact</a></li>
                <li><a href="#Skills">Skills</a></li>
                <li><a href="https://codesignal.com" target="_blank">Get to know CodeSignal</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="Home">
            <h2>Home</h2>
            <p>This is the homepage. Explore to learn more about me.</p>
        </section>
        <section id="About">
            <h2>About</h2>
            <p>I'm a budding web developer with a passion for creating interactive user experiences.</p>
        </section>
        <section id="Projects">
            <h2>Projects</h2>
            <ul>
                <li>Project A - A simple static webpage.</li>
                <li>Project B - A dynamic website using JavaScript and APIs.</li>
            </ul>
        </section>
        <section id="Contact">
            <h2>Contact</h2>
            <p>You can reach me at <a href="mailto:email@example.com">email@example.com</a></p>
        </section>
        <section id="Skills">
            <h2>Skills</h2>
            <table border='1'>
                <thead>
                    <tr>
                        <th>Skill</th>
                        <th>Proficiency</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>HTML</td>
                        <td>Intermediate</td>
                    </tr>
                    <tr>
                        <td>CSS</td>
                        <td>Intermediate</td>
                    </tr>
                    <tr>
                        <td>JavaScript</td>
                        <td>Beginner</td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 My Website</p>
        <p><a href="#Home">Back to top</a></p>
    </footer>
</body>
</html>

This snippet adds a new section to your webpage with a table that lists your skills and proficiency levels.

The table header has two columns: Skill and Proficiency. The table body contains rows for each skill, with the skill name in the first column and the proficiency level in the second column. We added three skills to the table: HTML, CSS, and JavaScript, each with a proficiency level.

With this the webpage now has more content and structure, making it more informative and engaging for visitors.

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