Recipe Page Design Using Mobile First Approach

Solution retrospective
For this project, I am proud about how I was able to attempt the problem by logically splitting each key design step into smaller tasks.
I had zero to no battles with myself meaning I am beginning to freely enjoy building user interfaces. Also, I was able to stick to mobile first approach from start till the end. The result I got was good (although, I await feedback)
What challenges did you encounter, and how did you overcome them?My main challenge which is still unsolved is on how to properly style the instructions numbering without distorting the design.
I left the listing as an unordered list.
I still have challenge with that part of the design
What specific areas of your project would you like help with?- Styling the Instruction List
- Alternatives to styling the nutrition table
Please log in to post a comment
Log in with GitHubCommunity feedback
- @RidaniFZ
Your HTML and CSS are well-structured, but I have some suggestions for improvements and corrections: 1- Fix Metadata in <head>
- Issue: The favicon is linked using a <link rel="stylesheet">, which is incorrect.
- Fix: Use <link rel="icon"> instead:html
2- to answer to your questions: Styling the Instruction List: use <ol> element and li::marker for styling (check my code). Alternatives to styling the nutrition table: Instead of <div>s, use a <table> for the nutrition facts (check my code).
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