@ardolynk-rebornSubmitted 2 months ago
What are you most proud of, and what would you do differently next time?
List bullets alignment:
<ul>
<li><span><strong>Total: </strong>Approximately 10 minutes</span></li>
<li><span><strong>Preparation: </strong>5 minutes</span></li>
<li><span><strong>Cooking: </strong>5 minutes</span></li>
</ul>
.preparation-time li > span {
display: inline-block;
vertical-align: middle;
}
.preparation-time li::marker {
color: #7b284f;
}
Table with rulers:
<table class="nutrition">
<tr>
<td class="nutrition-unit">Calories</td>
<td class="nutrition-value">277kcal</td>
</tr>
<tr>
<td class="nutrition-unit">Carbs</td>
<td class="nutrition-value">0g</td>
</tr>
<tr>
<td class="nutrition-unit">Protein</td>
<td class="nutrition-value">20g</td>
</tr>
<tr>
<td class="nutrition-unit">Fat</td>
<td class="nutrition-value">22g</td>
</tr>
</table>
.nutrition {
width: 100%;
border-collapse: collapse;
}
.nutrition tr {
line-height: 42px;
border-bottom: 1px solid #e4ded8;
}
.nutrition tr:last-child {
border-bottom: none;
}
What challenges did you encounter, and how did you overcome them?
The hardest challenges of this lesson were connected with lists and table formatting. See my solution above.