Design comparison
Solution retrospective
I'm a beginner and for me it took me 4-6 hours to complete this project.
What challenges did you encounter, and how did you overcome them?Styling the list-styles - I learned about "::marker" pseudo-class that styles the list-style of the ordered list.
What specific areas of your project would you like help with?Feedbacks are welcomed.
Community feedback
- @Jo-with-visionPosted 6 months ago
Well done on completing the challenge, the finished design looks great!
I am still learning too and these challenges always take me much longer than expected, so don't worry about that - hopefully we will speed up with practise :)
HTML feedback:
-
You could consider using the
<article>
element to contain the entire recipe instead of a section, and use<section>
for the individual sections of the recipe. Anything contained within an <article> should be self-contained and meaningful outside its context. Example: you have the 'prep time' inside an <article>, but ask yourself if that section was taken way from the page, would it make sense without the rest of the recipe? -
you may want to check with someone more experienced if it's necessary to place your
<h1>
and image in a<figure>
(I can see why you chose to, but I am not sure its needed, but I could be wrong). -
Good semantic use of the
<h2>
element and paragraphs and lists. -
Consider more meaningful class names so your CSS is more understandable when others read your code (e.g. .ingredients-list rather than .ul-2)
-
I think the
<hr>
is an understandable choice as it is a meaningful section break, but placing the recipe sections in <section> elements could work well for this challenge too. You can then create the border with a bottom border to the section in the CSS and style it. Just a thought. -
You can use
<th>
for the table headers instead of<td>
to distinguish them as headings. You can also look up using thescope
attribute on the <th> to associate the header with the row or column (in this challenge the heading cell is the header for the row). Here's how that would look:
<tr> <th scope="row">Calories</th> <td>277kcal</td> </tr>
CSS feedback
- I would organise your CSS file either in the main folder alongside your index.html for a small challenge, or in a dedicagted styles/css folder. At the moment you have hidden it in the design folder with the other files from Frontend Mentor.
- Good use of custom properties - you can even add your font-weights and font-family as custom properties too (and whatever else you repeat a lot in your code)
- use rem or em units not pixels (I would also use rem or em for padding, not percent)
- You can use a modern CSS reset which will include displaying your images as block level elements and max-width 100% to make images easier to work with. I like this CSS reset by Josh Comeau: https://www.joshwcomeau.com/css/custom-css-reset/
- well done on discovering the ::marker pseudo element!
Hapy Coding! Jo
Marked as helpful0 -
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