T
Gwenaël Magnenat• 1,270
@gmagnenat
Posted
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
