Product-preview-card-component-solution
Design comparison
Solution retrospective
How to align the image with the white box ? how to make curved edges ? How to make button small? Can you please suggest me some of the improvements that I can do in my code ?
please answer these questions. Thank you.
Community feedback
- @CarolkiariePosted about 2 years ago
hey @samarth. congratulations on finishing the project. I have gone through your code and have some suggestions. To start with its not proper to put your main content in a div and in a span tag. Semantic tags make it clear to the browser what the meaning of a page and its content is. That clarity is also communicated with search engines, ensuring that the right pages are delivered for the right queries. For the main content. you could use the main tag as a container so that you can be able to flex the items that you have. please go through this playlist it will give you a better idea on the Semantic HTML and all the basics that you need.https://www.youtube.com/watch?v=hu-q2zYwEYs&list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G
- border-radius is the css property that makes the curved edges.
- for the button to be small. in html instead of using a p tag . instead use button . then manipulate it to the desired size using margin and padding.
happy coding!
1 - @wadmortadaPosted about 2 years ago
you have to put the image and text in container and grid them for edges use border radius
1 - @AdrianoEscarabotePosted about 2 years ago
Hi Samarth Kulshrestha, how are you?
I really liked the result of your project, but I have some tips that I think you will enjoy:
As you know this page is just a component, so it doesn't even need an
h1
! because we don't know how important the other components of the site will be! but it's always good to prevent accessibility errors so I think it would be good for you to add anh1
in this component, besides being a good practice for when you are developing larger sites, don't worry forget abouth1
.If we see how the layout is behaving at higher resolutions, with the help of google dev tools, we will see that it is stretching a lot, to solve this we can use a
max-width
with the value we want the content to stop growing and to center use amargin: 0 auto;
The rest is great!
I hope it helps... 👍
0 - @mhmdnsr-devPosted about 2 years ago
Hello, @samarth0605. First, you have to put the image in one block element such as
<picture>
, and the text content in another block element such as<div>
, and then you put the two into a container, you can make edges byborder-radius
propriety andoverflow
propriety on the container, then align them by CSS grid. ... Good luck.0 - @correlucasPosted about 2 years ago
👾Hello @samarth0605, Congratulations on completing this challenge!
Your solution its almost done and I’ve some tips to help you to improve it:
Use the THE PICTURE TAG that is a shortcut to deal with the multiple images in this challenge. So you can use the
<picture>
tag instead of importing this as an<img>
or using a div withbackground-image
. Use it to place the images and make the change between mobile and desktop, instead of using adiv
orimg
and set the change in the css withdisplay: none
with the tag picture is more practical and easy. Note that for SEO / search engine reasons isn’t a better practice import this product image with CSS since this will make it harder to the image. 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 desktop + mobile.Check the link for the official documentation for
<picture>
in W3 SCHOOLS:https://www.w3schools.com/tags/tag_picture.asp
See the example below:
<picture> <source media="(max-width:650px)" srcset="./images/image-product-mobile.jpg"> <img src="./images/image-product-desktop.jpg" alt="Gabrielle Parfum" style="width:auto;"> </picture>
👨💻Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-dVGWpOTgWS
✌️ I hope this helps you and happy coding!
0
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