As with other labs within the Responsive Web Design certification at freeCodeCamp, you're shown an example of what the project looks like but are asked not to copy it verbatim. You are also given some HTML boilerplate, as shown below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Catalog</title>
</head>
<body>
</body>
</html>
With these labs, it is the user stories that help guide you to completion, as you have to fulfil each and every one to pass. As this lab revolved around tables, the first of these stories had you adding the table element.
From that point, you are reminded of the earlier theory lessons and the previous workshop as you're asked to incorporate additional table elements.
The final user story asked you to incorporate the tfoot element and use the colspan attribute within it to span across multiple columns. This step marked the conclusion of the lab. Below is the completed code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Catalog</title>
</head>
<body>
<table>
<caption style="font-weight: bold;">
Zed's Book Catalog
</caption>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Genre</th>
<th>Publication Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Big Sleep</td>
<td>Raymond Chandler</td>
<td>Crime</td>
<td>1939</td>
</tr>
<tr>
<td>Excession</td>
<td>Iain M. Banks</td>
<td>Sci-fi</td>
<td>1996</td>
</tr>
<tr>
<td>The Railway Detective</td>
<td>Edward Marston</td>
<td>Crime</td>
<td>2004</td>
</tr>
<tr>
<td>Leviathan Wakes</td>
<td>James S.A. Corey</td>
<td>Sci-fi</td>
<td>2011</td>
</tr>
<tr>
<td>Night Train to Jamalpur</td>
<td>Andrew Martin</td>
<td>Crime</td>
<td>2014</td>
</tr>
<tfoot>
<tr>
<td colspan="4">Total Books: 5</td>
</tr>
</tfoot>
</table>
</body>
</html>
Next on the curriculum are a series of theory lessons focused on working with HTML tools. After that, I'll dive into a review and quiz on HTML tables and forms. These lead into the certification project - more on that next time!
Top comments (3)
Nice walkthrough of the lab — the way freeCodeCamp uses user stories really helps reinforce why each element exists, not just how to use it.
The table structure is clean and easy to follow, and it’s good to see
used properly instead of everything being dumped into a single block. That’s something a lot of beginners miss.
Looking forward to the upcoming posts on the theory lessons and the certification project — those are usually where the concepts really start to click.
Thanks, Dominik - very much appreciated!
I guess it helped that I tried to follow the PEP8 style guide when I started using Python and so I've carried over some of that to web development - at least in regard to clean structure!
That definitely shows — habits like that tend to carry over more than people expect. Following something like PEP 8 early on really trains you to think about readability and structure as first-class concerns, regardless of the language.
It’s interesting how those principles translate so well to HTML too: clear structure, consistent formatting, and intent that’s easy to follow. Makes revisiting code later much less painful.
Sounds like a solid foundation to build on as you move further through the curriculum.