Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
I am proud of myself for having a lot of desire to keep learning and to be able to create this website.
What challenges did you encounter, and how did you overcome them?There are some things I can't figure out, but with practice I get there.
What specific areas of your project would you like help with?.
Community feedback
- @gmagnenatPosted about 2 months ago
Hi,
Congrats on giving this challenge a try! Here are a few tips to improve your solution:- Don't use "image" in alt text. There are great resources on the Discord about how to write good alt text.
- You can use an
<h2>instead of<b>for the preparation time. - Use
<strong>in your list instead of<b>. It's used here as a label for the line, so it has semantic meaning. - You need to add
<th>in your table to indicate the table head. - Use a modern CSS reset at the top of your stylesheet in all your projects. Look up Josh Comeau or Andy Bell—they have good ones. Make sure to understand what each line in these resets does and choose the one you prefer.
- Width and height of 100% on your body are not necessary.
- Use a
max-widthinreminstead of pixels on your<main>element. It needs to respect the user's preferences if the default font size of the browser has been increased. - I notice that you are not building this mobile-first.
- Work mobile-first, and add a media query when you switch to a desktop layout with a
min-widthvalue inrem. - You should import your fonts in your HTML instead of the stylesheet for better performance.
- You can move the title in the
<head>, just under the meta viewport tag, also for better performance.
I hope this helps you improve your solution and your future challenges. Don't hesitate to reach out on the Discord server if you have specific questions.
Happy coding!
0
Please log in to post a comment
Log in with GitHub
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