Recipe page using HTML and CSS with flexbox

Please log in to post a comment
Log in with GitHubCommunity feedback
- P@PetterTSaatvedt
Great work on your solution Antony! It works well for both desktop and mobile screens, and you have done a great job in adapting the image for both designs.
Not much to complain about here! However, here are a few tips which could make your solution even better:
- H1 tags are typically reserved for the singular most important heading on the page, and should therefore only be used once. Consider changing all headings to H2 tags, except for the "Simple Omelette Recipe" heading which can stay as an H1.
- Try to avoid using px as a unit for font size. Since this is a fixed unit, it is not scalable for users who want to make the text bigger or smaller. I would recommend using a responsive unit like for example rem, where 1rem is equal to the root font size (which is 16px by default). This will allow for better scaling of the font size.
- As the solution includes a lot of information/text, it is important to provide sufficient spacing to let the content "breathe". I would suggest to revisit the design and follow the suggested spacing approach.
Nonetheless, your code is perfectly readable and easy to understand, and the solution looks great! Keep up the good work :-)
Marked as helpful
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