@V3caresSubmitted about 2 months ago
Latest comments
- @trucanh21Posted about 2 months ago
Hi, congratulations on completing the challenge!
Your solution looks great, I will give you some suggestions for this project that you can use for better practice.
About your HTML in this project, In the preparation-list, ingredient-list, instruction-list and nutrition-list classes, using <section> instead of <div> helps convey meaning and improves the document outline. Replace the generic heading <div class="heading"> with an <h1> because it represents the main title of the page. For sub-sections like ingredients, instructions, and nutrition, use <h2> or <h3> depending on the hierarchy. Image Alt Text: Provide a descriptive alt attribute for images. Consider using a <table> for 'nutritional' data instead of several <div> elements, as tables are more suitable for tabular data.
1 - @qayoommunawarSubmitted about 2 months ago@trucanh21Posted about 2 months ago
I will give you some suggestions for this project that you can use for better practice. You should add font-weight: 500; or bold to the <h2> and <h3> tags. You have the alt attribute, but it is currently empty. and The text size seems slightly larger than in the design. Set font-size: 1.3rem; to make it more balanced.
Marked as helpful0 - P@janikjczczSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
Added focus styles on top of the required hover style.
Used "clickable parent" technique for the card.
What challenges did you encounter, and how did you overcome them?I wasn't sure on the responsive image with fixed height. I've looked online and asked ChatGPT for help, in the end only thing I missed was width and height set to 100% on the image itself.
What specific areas of your project would you like help with?The screenshot comparison here on Frondend Mentor shows the fonts differently. When tested in Safari, Chrome, Edge, Firefox and Brave the fonts show up same as in the design file.
@trucanh21Posted about 2 months agoYou forgot to add CSS for the h1:hover selector so that when users click on it, the color changes. You should add the color change effect and include transition: color 0.3s; in the h1 tag to create a smooth color transition when hovered.
Marked as helpful1 - @Igho-OkeogheneSubmitted about 2 months ago@trucanh21Posted about 2 months ago
Consider using flexbox or grid instead of fixed pixel values for better responsiveness. Instead of setting fixed width: 256px and height: 63px, try using max-width: 100% and auto for better adaptability.
0
