DEV Community

Richard Pascoe
Richard Pascoe

Posted on

Build a Bookstore Page

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 have you adding a series of buttons to the page, to buy the books, view your cart, and to checkout. These also use Class and ID elements.

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)