Try each task yourself first. Press Try it to run your version, then compare it with the solution.
Task 1: a reading list
Create an ordered list of three books you want to read. Make the second one a link, and nest a short unordered list of two reasons under the first one.
Show a possible solution
index.html
HTML
<ol>
<li>The Slow Garden
<ul>
<li>Recommended by a friend</li>
<li>Short enough to finish quickly</li>
</ul>
</li>
<li><a href="https://example.com">River Notes</a></li>
<li>Paper Moons</li>
</ol>Task 2: an opening hours table
Build a table with a caption, a header row (Day, Opens, Closes) and three rows of data. Add scope to the header cells.
Show a possible solution
index.html
HTML
<table>
<caption>Opening hours</caption>
<thead>
<tr><th scope="col">Day</th><th scope="col">Opens</th><th scope="col">Closes</th></tr>
</thead>
<tbody>
<tr><td>Monday</td><td>09:00</td><td>18:00</td></tr>
<tr><td>Saturday</td><td>10:00</td><td>17:00</td></tr>
<tr><td>Sunday</td><td>11:00</td><td>16:00</td></tr>
</tbody>
</table>Task 3: an image with a caption
Add an image with proper alt text, width and height, inside a figure with a figcaption.
Show a possible solution
index.html
HTML
<figure>
<img src="https://placehold.co/300x150" alt="A grey placeholder" width="300" height="150">
<figcaption>A placeholder standing in for a photo.</figcaption>
</figure>