Develop a structured webpage using appropriate HTM...

Below is a complete example that meets all the requirements: semantic HTML, classes and IDs, CSS selectors, a styled animation-project table, and basic layout/spacing.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation Projects</title>

    <style>
        /* Universal selector */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* Element selector */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f6f8;
            color: #333;
            line-height: 1.6;
        }

        /* ID selector */
        #main-header {
            background-color: #27374d;
            color: white;
            text-align: center;
            padding: 30px 20px;
        }

        #main-header h1 {
            margin-bottom: 8px;
        }

        /* Navigation */
        nav {
            background-color: #526d82;
            padding: 12px;
            text-align: center;
        }

        nav a {
            color: white;
            text-decoration: none;
            margin: 0 15px;
            font-weight: bold;
        }

        nav a:hover {
            color: #ffd166;
        }

        /* Main page layout */
        main {
            max-width: 1000px;
            margin: 30px auto;
            padding: 0 20px;
        }

        /* Class selector */
        .content-section {
            background-color: white;
            padding: 25px;
            margin-bottom: 25px;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        .content-section h2 {
            color: #27374d;
            margin-bottom: 15px;
        }

        /* Project cards */
        .project-container {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

        .project-card {
            flex: 1;
            min-width: 220px;
            background-color: #eef2f5;
            padding: 20px;
            border-left: 5px solid #526d82;
            border-radius: 5px;
        }

        .project-card h3 {
            margin-bottom: 10px;
            color: #526d82;
        }

        /* Table styling */
        .table-container {
            overflow-x: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }

        th,
        td {
            border: 1px solid #ccc;
            padding: 12px;
            text-align: left;
        }

        th {
            background-color: #27374d;
            color: white;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        tr:hover {
            background-color: #dde6ed;
        }

        /* Status classes */
        .completed {
            color: green;
            font-weight: bold;
        }

        .progress {
            color: #d97706;
            font-weight: bold;
        }

        .planned {
            color: #2563eb;
            font-weight: bold;
        }

        /* Simple animation */
        .animated-title {
            animation: fadeIn 2s ease-in-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-15px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Footer */
        footer {
            background-color: #27374d;
            color: white;
            text-align: center;
            padding: 20px;
            margin-top: 30px;
        }

        /* Responsive design */
        @media (max-width: 600px) {
            nav a {
                display: block;
                margin: 8px 0;
            }

            .project-container {
                flex-direction: column;
            }
        }
    </style>
</head>

<body>

    <!-- Semantic header -->
    <header id="main-header">
        <h1 class="animated-title">Animation Project Studio</h1>
        <p>Planning and managing creative animation projects</p>
    </header>

    <!-- Semantic navigation -->
    <nav>
        <a href="#about">About</a>
        <a href="#projects">Projects</a>
        <a href="#project-table">Project Table</a>
    </nav>

    <!-- Main webpage content -->
    <main>

        <section id="about" class="content-section">
            <h2>About Our Animation Projects</h2>

            <p>
                This webpage presents information about several animation
                projects. Each project includes a style, production schedule,
                team size, and current project status.
            </p>
        </section>

        <section id="projects" class="content-section">
            <h2>Featured Projects</h2>

            <div class="project-container">

                <article class="project-card">
                    <h3>Galaxy Quest</h3>
                    <p>
                        A 3D science-fiction animation featuring planets,
                        spaceships, and futuristic characters.
                    </p>
                </article>

                <article class="project-card">
                    <h3>Forest Friends</h3>
                    <p>
                        A colorful 2D animated story about animals working
                        together to protect their forest.
                    </p>
                </article>

                <article class="project-card">
                    <h3>Robot City</h3>
                    <p>
                        A stop-motion-inspired animation following robots
                        living in a futuristic city.
                    </p>
                </article>

            </div>
        </section>

        <section id="project-table" class="content-section">
            <h2>Animation Project Information</h2>

            <div class="table-container">
                <table>
                    <thead>
                        <tr>
                            <th>Project Name</th>
                            <th>Animation Type</th>
                            <th>Duration</th>
                            <th>Team Size</th>
                            <th>Status</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td>Galaxy Quest</td>
                            <td>3D Animation</td>
                            <td>8 Minutes</td>
                            <td>12</td>
                            <td class="progress">In Progress</td>
                        </tr>

                        <tr>
                            <td>Forest Friends</td>
                            <td>2D Animation</td>
                            <td>5 Minutes</td>
                            <td>8</td>
                            <td class="completed">Completed</td>
                        </tr>

                        <tr>
                            <td>Robot City</td>
                            <td>Stop Motion</td>
                            <td>10 Minutes</td>
                            <td>15</td>
                            <td class="planned">Planned</td>
                        </tr>

                        <tr>
                            <td>Ocean Adventure</td>
                            <td>3D Animation</td>
                            <td>7 Minutes</td>
                            <td>10</td>
                            <td class="progress">In Progress</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

    </main>

    <!-- Semantic footer -->
    <footer>
        <p>&copy; 2026 Animation Project Studio | Web Design Project</p>
    </footer>

</body>
</html>

How it meets the requirements

• Structured HTML: uses <header>, <nav>, <main>, <section>, <article>, <table>, and <footer>.
• CSS selectors: includes element selectors (body), class selectors (.project-card), ID selectors (#main-header), pseudo-classes (:hover, :nth-child) and descendant selectors.
• Classes and IDs: sections have IDs such as #about, #projects, and #project-table; reusable styling uses classes.
• HTML table: includes project name, animation type, duration, team size, and status.
• Layout and spacing: uses margin, padding, gap, max-width, Flexbox, borders, and shadows.
• Responsive design: the @media rule adapts the page for smaller screens.
• Animation: the main heading uses a simple CSS fadeIn animation.