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!
