Design comparison
Solution retrospective
It was difficult for me to stroke my price but after much research, i found a way to do it.
Community feedback
- @correlucasPosted about 2 years ago
👾Hello @oxieoxie, Congratulations on completing this challenge!
Your solution its almost done and I’ve some tips to help you to improve it:
Using
<picture>
you’ve more control over the elements and its better than using the product image as<img>
orbackground-image
. Look that for SEO and search engine reasons it isn't a better practice to import this product image with CSS since this will make it harder to the image. You can manage both images inside the<picture>
tag and use the html to code to set when the images should change setting the devicemax-width
depending of the device (phone / computer) Here’s a guide about how to usepicture
:https://www.w3schools.com/tags/tag_picture.asp
✌️ I hope this helps you and happy coding!
Marked as helpful0 - @faha1999Posted about 2 years ago
Hello, Emmanuel Chidozie Anyasor Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:
- You might want to use semantic tags like the
<main>
to wrap your code, instead ofdiv
. like
<main> <div class="container"></div> <div class="attribution"></div> </main>
This would help improve accessibility.
- add the below code to the body. It will center everything
body { justify-content: center; align-items: center; display: flex; height: 100vh; flex-direction: column; background-color: hsl(30, 38%, 92%); }
-
add
max-width: 750px
in the.container
& remove/* padding: 7% 15%; */ /* background-color: hsl(30, 38%, 92%);*/
-
in the
button
addborder: none; outline: none;
-
Instead of using
px
, use relative units likerem or em
to get better performance when the information on your page needs to be resized for multiple screens and devices.REM
andEM
apply to all sizes, not justfont-size
. You can code your entire page inpx
and then, at the very end, use the VsCode pluginpx to rem
to perform the automatic conversion px to rem
I hope it will work. Happy coding.
Marked as helpful0 - You might want to use semantic tags like the
- @nzewiPosted about 2 years ago
Congrats on completing this project Emmanuel
You have a great solution there
- You can do better by reading through the
style.md
file well and putting more effort into following the design(fonts, sizes, colors, spacing, etc)
2.Ensure that all content on your page is contained within a landmark region, e.g
<main>
Marked as helpful0 - You can do better by reading through 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