Design comparison
Solution retrospective
Hi , My name is Zakarea-najjar just call me Zak so that my first project ever i spend to this project 3-hours if there any problem or better solution just write comment to me i need more practice
Community feedback
- @MelvinAguilarPosted over 1 year ago
Hello there π. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
HTML π·οΈ:
- Wrap the page's whole main content in the
<main>
tag.
- Use the
<footer>
tag to wrap the footer of the page instead of the<div class="attribution">
.
- The element
<div class="add">
should be a button and not a div, since an element has a :hover state and has a pointer cursor it is considered an interactive element (buttons, links, etc).
-
You can use the
<picture>
tag when you have different versions of the same image πΌ. Using the<picture>
tag will help you to load the correct image for the user's device saving bandwidth and improving performance. You can read more about this here π.Example:
<picture> <source media="(max-width: 460px)" srcset="./images/image-product-mobile.jpg"> <img src="./images/image-product-desktop.jpg" alt="{your alt text goes here}"> </picture>
- The <div> tag can be useful for styling and positioning, but it doesn't convey any semantic meaning. Instead, consider using more semantic elements to better describe the type of content.
CSS π¨:
- Instead of using pixels in font-size, use relative units like
em
orrem
. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource π.
- Use
min-height: 100vh
instead ofheight
. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.
- The text is a bit small, and it's hard to read.
I hope you find it useful! π
Happy coding!
Marked as helpful1@Zak-najjarPosted over 1 year ago@MelvinAguilar Thank you for your reply and I will take everything you said to me into consideration and apply it
0 - Wrap the page's whole main content in the
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