Design comparison
Solution retrospective
This is my first beginner project through Front End Mentor. It was fun and challenging.
It took me a couple of hours to finish it. There was a lot of figuring out to do especially when it came to the media queries.
What challenges did you encounter, and how did you overcome them?The media queries and setting up the image was a bit of a struggle for myself.
I had to read tome documentation on MDN to try and get it correctly.
What specific areas of your project would you like help with?I would love feedback on everything. I would like to perfect my skills. I had to go over and over everything to make sure it was not so long confusing, I had confused myself a couple of times.
Community feedback
- @krushnasinnarkarPosted 5 months ago
Report: Suggestions Based on Submitted Solution and Improvements Needed
Fix non-standard tags: The
<break>
tag is not standard HTML. Use<br>
or CSS for spacing.Alt text for images: Ensure that the
alt
attribute for the image provides a useful description.<img class="omelette" src="./assets/images/image-omelette.jpeg" alt="A delicious omelette on a plate">
Improve spacing and padding to make it more similar to the design: Ensuring that text and interactive elements are easily readable and usable on small screens will improve the overall user experience. Check the design specifications and adjust the spacing and padding to match the intended design.
Remove Underline from Heading and Align Left: According to the design specifications, the heading "Simple Omelette Recipe" should not be underlined and should be aligned to the left instead of centered.
h1 { font-family: 'young serif', serif; text-align: left; }
Change the background-color and color of
prepTime
: The current background color does not match the design specifications. Update the background color to ensure consistency with the design. Also the text color for the preparation time section should be updated to match the design specifications.prepTime { background-color: hsl(330, 100%, 98%); color: hsl(332, 51%, 32%); }
Make Total, Preparation, and Cooking as Bullet Points: Currently, these items are presented as paragraphs. Updating them to be bullet points will improve readability and align with the design.
<div class="prepTime"> <h2>Preparation time</h2> <ul> <li><b>Total:</b> Approximately 10 minutes</li> <li><b>Preparation:</b> 5 minutes</li> <li><b>Cooking:</b> 5 minutes</li> </ul> </div>
Update Color for Instruction List Numbers: The current numbering color does not match the design specifications. Updating the color using the
::marker
pseudo-element, which allows you to style the list markers (numbers or bullets) directly..instructions ol::marker { color: hsl(14, 45%, 36%); }
Update Color for Bold Text in Instructions: The bold text in the instructions should use the specified color to match the design specifications.
.instructions li b { color: hsl(24, 5%, 18%); }
Marked as helpful0@MachoCamacho1Posted 5 months agoThank you for your input! I will make sure to look into it.
@krushnasinnarkar
0
Please log in to post a comment
Log in with GitHubJoin 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