Getting the project done using semantic HTML elements.
What challenges did you encounter, and how did you overcome them?Styling unordered lists, table and page margin.
-
For the unordered lists I used a combination of grid and flexbox to separate the list bullet from the text.
-
As for the table I used
border-collapse: collapse;
otherwise tr creates no single block. -
When first styling the page margin I wanted the top margin to grow based on the device width for desktop users, but it can't be too big. At first I used a "fake" margin with divs at the top/bottom of the document to make use of the
max-height
property in CSS. But later I styled the page margin usingpadding: min(calc((100svw - 736px) / 2), 8rem);
to the document body. The min function takes the first value separated by a comma as the preferred value and the second as the maximum value.
Useful resources:
- "how to align marker to center of the image lists HTML" on stackoverflow
- "Why TR not taking style?" on stackoverflow
- "Can we define min-margin and max-margin, max-padding and min-padding in css?" on stackoverflow
I would like to know if my code follow best practices. This could be anything from code quality to accessibility. I'm open to feedbacks!