What do you think about it ?
Thank you all :)
What do you think about it ?
Thank you all :)
Seems great, though it may be nice if you can add another line of code to close the bubble if the user clicks outside the share bubble
I wasn't sure whether to upload the image with img tag or as a background-image
First of all, well done on your solution. You're brave and curious to ask that question and willing to learn! Always think about semantics. How accessible it will be on screen readers for example. Backgrounds are only decoration in nature and images on the other hand may contain meaning. In this case, the perfume is a product and it is not part of a decoration but an image of a perfume that the customer is supposed to order and buy. You should use <img>
tag here and make sure to include alt
attribute in the tag to describe the image because with it being background, the screen readers will just ignore there ever being an image and overall it is a bad HTML practice. Another thing you can do for accessibility is try to use <main>
, <article>
, <aside>
etc. instead of just <div>
.
I'm proud of completing the challenge asked. I would planning before to start, because I spended a lot of time doing it.
What challenges did you encounter, and how did you overcome them?Keep the responsibility was very hard. I studied more the concepts
What specific areas of your project would you like help with?I would like help about the picture tag.
I like you solution but another thing that you can add is if clicking anywhere outside the share button closes the share bubble. In JavaScript, you can run a ternary operator or an if
condition to check for an event listener of click with event.target.closest(insert the DOM element for share button and the bubble here)
. You can use a negative !
for event listener for clicks anywhere but near the share button and that should run a function that hides the bubble or you can use an if
condition where it shows the bubble when event.target.closest(DOM element)
is true and an else
to hide the bubble. Hope it makes sense, it will require you to write more code but if you don't want to, your solution still is great!
I've tried to make more challenge here, i've built the component by creating a table with a .map.
I have some trouble with the hover of the buttons, so if you guys got the answer, it will be great !
I know it is probably not like what i have done, but i wanted to make challenge for myself.
Thanks a lot :)
Since you are using inline CSS of Tailwind CSS. You have to add hover:
before the style in className
such as className="hover:bg-sky-700
".
I love your solution. It is almost perfect except for a few little things that I noticed. The <a>
tags by default have an underline, that you should remove by adding a CSS property text-decoration: none;
. The "3 Days left" part has a different styling than "0.041 ETH", you can surround the "3 Days Left" with <span></span>
in HTML which is an inline element for text, and then set the CSS properties appropriately without affecting "0.041 ETH" part. "Creation of" part also needs to be styled appropriately with the design. Lastly, your hover animation is almost perfect, except that it is not transparent because, in background
, you're using the variable to the HSL values provided for the cyan color. You should use rgba instead, where R,G, and B are the values of Red, Green, and Blue, and A is the alpha value that sets the opacity, something like 0.5 would do, so after converting those values, your property should be background: rgba(0, 255, 247, 0.5);
. Just change those and I think this is probably the best solution to this challenge I've seen! Cheers!
Well done! I am also new to the scene and I'll share what was shared with me a few days ago.
<main>
tag to wrap all the main content in your solution instead of using <div class="container">
to improve the accessibility of the website and semantics.<footer>
if you intend to include <div class="attribution">
. The <footer>
element contains authorship information.alt= "QR Code"
to something like "QR Code to Front End Mentor", I'll share the same link that was shared with me which is super helpful to get a good idea for alt=" "
values.