DEV Community

Richard Pascoe
Richard Pascoe

Posted on

Build an Event Hub

#community #learning #programming #webdev

Following a string of workshops and theory sessions on freeCodeCamp, it was time to put what I'd learned into practice. For this lab, I tackled building an event hub using semantic HTML.

As in previous labs, you're given some HTML boilerplate and some user stories to complete - namely adding the correct elements and attributes. I have shared the code below, so you can see the starting point:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Event Hub</title>
</head>

<body>

</body>

</html>
Enter fullscreen mode Exit fullscreen mode

First I added a header element containing an h1 and a nav. Inside the nav, there needed to be an unordered list with two list items, each containing a link to a different section of the page.

For the main content, two section elements were required. Each section contained two article elements, and each article included an h3 element and a p element for the event description. I optionally added a second p element for the date.

The last user story asked for two image elements with the src attributes. I was able to find images online for this.

Below is the completed Event Hub, themed around gaming:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Event Hub</title>
</head>

<body>

    <header>
        <h1>Event Hub</h1>
        <nav>
            <ul>
                <li><a href="#upcoming-events">Upcoming Events</a></li>
                <li><a href="#past-events">Past Events</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="upcoming-events">
            <h2>Upcoming Events</h2>

            <article>
                <h3>Magic: The Gathering Tournament</h3>
                <p>Join us for a Magic: The Gathering Tournament in a fun, welcoming environment. Test your deck, face skilled opponents, and compete for prizes. Shuffle up and play!</p>
                <p><strong>Date:</strong> 31st January, 2026</p>
            </article>

            <article>
                <h3>Solo TTRPG Day</h3>
                <p>Enjoy a Solo TTRPG Day dedicated to quiet creativity and immersive storytelling. Bring your favorite solo system or journaling RPG and explore new worlds, characters, and adventures at your own pace.</p>
                <p><strong>Date:</strong> 14th February, 2026</p>
            </article>

        </section>

        <section id="past-events">
            <h2>Past Events</h2>

            <article>
                <h3>Board Game Night</h3>
                <p>Join us for Board Game Night, a casual evening of classic and modern games. All experience levels are welcome — come play, socialize, and have fun!</p>
                <p><strong>Date:</strong> 17th January, 2026</p>
                <img src="https://images.pexels.com/photos/28299606/pexels-photo-28299606.jpeg" alt="Group of people enjoying a board game night with friends" width="640" height="480">
            </article>

            <article>
                <h3>Miniatures Painting Workshop</h3>
                <p>Unleash your creativity at our Miniatures Painting Workshop. Hobbyists of all levels can gather to paint, detail, and bring tabletop miniatures to life. Share techniques, get tips, and enjoy a relaxed, social atmosphere.</p>
                <p><strong>Date:</strong> 3rd January, 2026</p>
                <img src="https://images.pexels.com/photos/34148810/pexels-photo-34148810.jpeg" alt="A man painting a miniature figure surrounded by bottles of paint" width="640" height="480">
            </article>

        </section>
    </main>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

I'm now at the end of the Semantic HTML section of the curriculm, with only a review and a quiz remaining. Wish me luck!

Written by a Human logo

Top comments (4)

Collapse
 
paras594 profile image
Paras 🧙‍♂️ •

Awesome.
one suggestion, you can type the language at the start in the snippets of your posts to add syntax highlighting.

three backticks and then html or javascript

example:

<button>
   <span>Icon</span> <span>Click</span>
</button>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
richardpascoe profile image
Richard Pascoe • • Edited

Brilliant! Appreciate that Paras - learn something new every day! Have implemented the change here and will go through the rest of the series and update any required posts. Thanks again!

Collapse
 
bhavin-allinonetools profile image
Bhavin Sheth •

Nice work 👏
This is a great example of actually understanding semantic HTML, not just passing the lab.

I like how you didn’t overcomplicate it — header, nav, main, section, article — everything is doing exactly what it’s supposed to do. That structure is something a lot of people rush through, but it really pays off later when you start caring about accessibility, SEO, and maintainability.

The small touches stood out too: proper alt text, logical headings, and clean separation between upcoming vs past events. That’s the kind of discipline that builds good habits early.

Good luck with the review and quiz — if you’ve made it this far, you’re clearly on the right track 🚀

Collapse
 
richardpascoe profile image
Richard Pascoe • • Edited

Thank you so very much, Bhavin. It should never be understated just how important receiving support and feedback is when joining a community such as DEV. I really appreciate it!

Going to be undertaking the review and quiz shortly, before moving onto forms and tables with the curriculum!