This doesn't look finished to me. Your solution doesn't fit on mobile, which it should do by default because that's how html works. I haven't looked at the code yet but expect you've used widths when the component only needs a single max width in rem.
Note also how your font sizes (especially headings) and line heights look much smaller than the design. Try to get it much closer if you can.
Marked as helpful
Looking at the code:
- You don't need to repeat the Google font reconnect links in the html head. In fact you can download all of the actual font families with their weights in one link as well instead of listing the families separately. Only link the weights you actually need too.
- Remove all IDs in this and do not use IDs for styling ever. That's not what they're for.
- Remember emphasised bold text should be in a strong tag not span.
- You must use a table for the tabular data. This table must have appropriate header cells and scope on those set to "row".
- The attribution belongs in a footer landmark outside of main.
- Always include a modern css reset at the start of the styles in every project. Get into the habit now. Andy Bell or Josh Comeau both have good ones you can look up and use.
- You must remove the width from the component and use max-width in rem instead. This is what's causing the bugs I'm seeing.
- Font size must never be in px
- I think you have incorrect heading levels in this. All of the h3s should be h2s (they are not subheadings of "preparation", they are subheadings of the recipe itself).
- Remove the huge margin-lefts. As soon as you find yourself setting large margins to try and create a layout alarm bells should ring in your head. Pause and consider another way once the html is correct for the table.
- It's a real shame to remove text-decoration underline from links. It's actually an accessibility failure too under WCAG criteria because you're relying on color alone to make a link look clickable. In short, keep the underlines on anchors!
Marked as helpful
@amna1526
Posted
@grace-snow Thanks a lot. I will do all this, also what are ids for if not specific styling? should i use classes instead?
@amna1526
Posted
@grace-snow I used span in Preparation because the text has a different color too...
@amna1526 IDs are for referencing between elements. Very important for accessibility and navigation.
Here is an in depth article on the ID attribute
Marked as helpful
