DEV Community

Richard Pascoe
Richard Pascoe

Posted on • Edited on

Build a Bookstore Page

#community #learning #programming #webdev

Still pleased to say I've been learning on freeCodeCamp daily. Whereas I started the Build a Bookstore Page workshop yesterday, I completed the lesson earlier today, so thought I would share another update.

One thing I like about the workshops on freeCodeCamp, is they show you a preview of what the project will look it. This gives you a good indication into the design prior to starting with the lessons.

The exercise starts with your building some HTML boilerplate, reinforcing an earlier lesson. Soon it moves onto using the Div element to group related HTML elements together. This way, you create the book cards that display information about the different books - two in this case.

Then Classes come back into play before moving onto ID elements, with a example provided below:

<p id="para">example paragraph</p>
Enter fullscreen mode Exit fullscreen mode

Soon you're adding basic information about the books themselves, again using an ID and Class for each.

The last few steps involve adding several buttons to the page: one to buy books, one to view your cart, and one to proceed to checkout. These buttons use both class and ID attributes. You can review the completed code in the following example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>XYZ Bookstore</title>
  </head>

  <body>
    <header>
      <h1>XYZ Bookstore</h1>
      <p>Browse our collection of amazing books!</p>
    </header>

    <main>
      <section class="card-container">
        <article class="card" id="sally-adventure-book">
          <h2>Sally's SciFi Adventure</h2>
          <p>
            An epic story of Sally and her dog Rex as they navigate through
            other worlds.
          </p>
          <button class="btn">Buy Now</button>
        </article>

        <article class="card" id="dave-cooking-book">
          <h2>Dave's Cooking Adventure</h2>
          <p>
            Follow Dave as he learns to cook everything from pancakes
            to pasta, one recipe at a time.
          </p>
          <button class="btn">Buy Now</button>
        </article>
      </section>

      <section class="actions">
        <p>Review your selections and continue to checkout.</p>

        <div class="btn-container">
          <button id="view-cart-btn" class="btn">View Cart</button>
          <button id="checkout-btn" class="btn">Checkout</button>
        </div>
      </section>
    </main>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

With the Bookstore Page completed, I undertook two theory lessons on the Role of the Meta Description and the Role of Open Graphs Tag, the latter being something I wasn't aware of before now.

Expect another post in the series in a couple of days. Thanks for reading!

Written by a Human logo

Top comments (0)