Skip to content
OverviewSolutions
14
Comments
6
The Requiem
@TheRequiem

All comments

  • The Requiem•330
    @TheRequiemPosted over 1 year ago

    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

    Marked as helpful
    1
  • The Requiem•330
    @TheRequiemPosted over 1 year ago

    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>.

    Marked as helpful
    2
  • Rafael Dias•910
    @rafaeldgeoSubmitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    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.

    Article-preview-component-master using grid, media queries and JS

    2
    The Requiem•330
    @TheRequiemPosted over 1 year ago

    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!

    Marked as helpful
    0
  • Dylan Guaquier•340
    @dylanguaquierSubmitted over 1 year ago

    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 :)

    3 column cards component

    3
    The Requiem•330
    @TheRequiemPosted over 1 year ago

    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".

    Marked as helpful
    0
  • The Requiem•330
    @TheRequiemPosted almost 2 years ago

    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!

    0
  • The Requiem•330
    @TheRequiemPosted almost 2 years ago

    Well done! I am also new to the scene and I'll share what was shared with me a few days ago.

    • Use the <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.
    • Use <footer> if you intend to include <div class="attribution">. The <footer> element contains authorship information.
    • Improve your 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.
    Marked as helpful
    0