Design comparison
Solution retrospective
How should I make the button clickable (even if it doesn't do anything)? I thought about replacing the <button> for an <a> tag, but considering a complete e-commerce web application I know it shouldn't be a link.
Community feedback
- @VCaramesPosted about 2 years ago
Hey @sergiogurg, some suggestions to improve you code:
- This challenges requires the use of two images 🎑 for different breakpoints. The Picture Element will facilitate this.
Here is an example of how it works: EXAMPLE
Syntax:
<picture> <source media="(min-width: )" srcset=""> <img src="" alt=""> </picture>
More Info:
https://www.w3schools.com/html/html_images_picture.asp
https://web.dev/learn/design/picture-element/
-
There is only one heading in this challenge and that is the name of the perfume, “Gabrielle Essence Eau De Parfum”.
-
The old price 🏷 is not being announced properly to screen readers. You want to wrap it in a Del Element and include a sr-only text explaining that this is the old price.
-
Your content is not responsive. You need to use responsive properties and add a media query.
Happy Coding! 👻🎃
0 - @husamasaadPosted about 2 years ago
Really nice work my friend, well done..
you can add
cursor: pointer;
to your button and then give it a hover effect and it will look like it's clickable, but to actually make it clickable and works like a link, I think you will need some JS to add an onclick event, It looks like this :<button type="button" onclick="alert('I am Clickable')">Click Me!</button>
try it in your code and see how it works ...Hope this was helpful and happy coding
0 - @charlesmiller0412Posted about 2 years ago
Hey @sergiogurg!
There are 2 ways I could recommend to make the button seem clickable while not really linking to a script or page.
-
You can always use an anchor tag <a> and place the href as # so it doesn't truly link elsewhere then style the tag.
-
On your button you can add CSS for cursor: pointer and add text-decoration or change the background color (whatever your requirement is) on the :hover selector. This would be the preference for running scripts such as adding an item to a cart.
Your solution looks great!
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