Responsive recipe page using tailwindcss

Solution retrospective
I'm proud of learning about tailwind custom color classes like text-[<hexcode>]. But maybe next time I'll create css classes so the code is a bit cleaner.
What challenges did you encounter, and how did you overcome them?1 - Struggled with managing the font colour and weight differences in the "Preperation time" card and the "Instructions" section, but after some experimentation it turned out alright.
2 - Also struggled with the table alignment to get it looking as close to the design as possible. A mixture of width and padding classes on the <td> elements seems to have done the trick.
What specific areas of your project would you like help with?I would like some feedback on points 1 and 2 above. Although I managed something I'm not sure if there is a better approach.
Also some feedback about the semantic tags would be helpful. I seem to be abusing <section> a lot. I thought about <article>, but these aren't really articles? dunno
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@BlonoBuccellati
Great work! As for point 2, Sorry, I'm not sure what the best practice is either.But I had a couple of thoughts:
-
font-[700]
corresponds tofont-bold
, andfont-[600]
tofont-semibold
. Both are utility classes provided by default in Tailwind CSS.
So for better readability and maintainability, usingfont-bold
orfont-semibold
where possible might be preferable. -
The
<hr>
element is typically used to indicate a thematic break in content. However, if you're already using<section>
elements to define content structure,<hr>
might be unnecessary.
In such cases, it may be more appropriate to handle visual separation with CSS instead.
just hoping it might be helpful!
Marked as helpful -
- @Lux0702
Good Job !
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord