DEV Community

Richard Pascoe
Richard Pascoe

Posted on

Build a Cat Blog Page

#community #learning #programming #webdev

After spending time on freeCodeCamp working through a few theory lessons on specialised semantic elements, I was ready to tackle the next workshop: building a cat blog page. I think I'm going to enjoy this!

Tasked with utilising semantic HTML in a blog about Mr. Whiskers the cat, the first exercise in the workshop has you adding a header element to the HTML boilerplate I have shared below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Mr. Whiskers' Blog</title>
    <meta charset="UTF-8" />
  </head>
  <body>

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

The next couple of steps sees you add an h1 element and then a figure element that displays an image of Mr. Whiskers. Of course, you should not use a figure element without an accompanying figcaption.

Across another two lessons you add a nav element with three li elements. Each list item should include an anchor tag with an href attribute. Below is an example of the correct structure:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>
Enter fullscreen mode Exit fullscreen mode

Subsequent lessons have you build on this by adding a main element containing three section elements, each with their own additional elements.

As the blog page includes article elements, this workshop has you using lorem ipsum text for the first time. This is often used as placeholder text - useful when building the structure of your web pages.

With the article placeholders completed, you then return to the footer element from an earlier lesson to add a contact section, including a fake telephone number and email address. The finished footer element is shown below:

    <footer>
        <section id="contact">
            <h2>Contact</h2>
            <address>
                <p>
                  Phone: <a href="tel:5555555555">555-555-5555</a>
                </p>
                <p>
                  Email: <a href="mailto:fake@email.com">fake@email.com</a>
                </p>
            </address>
        </section>
    </footer>
Enter fullscreen mode Exit fullscreen mode

I'd usually show the full code next, but with all the lorem ipsum placeholders, it is rather long - so I've decided against it. Next up in the curriculum: a lab where I get to build an event hub! See you there!

Written by a Human logo

Top comments (0)