Skip to content
OverviewSolutions
25
Comments
22
P

roswell

@welpmozPerú490 points

I am twenty one years old. I like rock music and especially I like to program

Latest solutions

View more solutions

Latest comments

  • P
    roswell•490
    @welpmoz

    I suggest using semantic HTML tags; for example, you could replace some <div> tags with <section> tags and don't forget at least one <main> tag in your page. In this challenge, the icons are more decorative than meaningful images, so I think they shouldn't have alternative text. You did a great job with the responsive design! 👏

  • P
    webdevbynight•530
    @webdevbynight
    What are you most proud of, and what would you do differently next time?

    I used the Intersection Observer API to animate some elements when they appear within the viewport.

    What challenges did you encounter, and how did you overcome them?

    For each card of the “Our Creations” section, I wanted to place the link text over the image without using absolute position. I overcame it using grid layout and placing the image and the link text in the same grid area.

    What specific areas of your project would you like help with?

    Do not hesitate over giving feedback about how I implemented the way the menu appears on mobile view.

    Loopstudios landing page - HTML, SCSS, TypeScript, RWD

    #sass/scss#typescript
    1
    P
    roswell•490
    @welpmoz

    Great work! The next step you can do is to add aria attributes to help screen readers understand while interactions occur.

  • Muritala Salmat•60
    @Funsally
    What are you most proud of, and what would you do differently next time?

    I'm really proud that I managed to get the image with the eye icon overlay working! It was a bit tricky getting the icon to show up only on hover and positioning it correctly. I also learned how to use position: absolute and position: relative for this, which was something new for me. Getting the overlay to fade in smoothly was a cool feeling too.

    If I were to do it again, I would definitely spend more time practicing CSS transitions. I got the hover effect working, but it's not as smooth as I'd like. I'd research different transition properties and timing functions to make the overlay appear more elegantly

    What challenges did you encounter, and how did you overcome them?

    The biggest challenge I faced was making the image underneath the eye icon and its background overlay still visible. At first, the overlay was completely blocking the image, which wasn't the effect I was going for. I tried a few things, but nothing seemed to work. Then, I watched some YouTube tutorials where people were doing similar hover effects. That's when I realized that I needed to adjust the opacity of the overlay background. By reducing the opacity, I was able to make the overlay semi-transparent, so the image could show through. It was a bit of a "aha!" moment. I'm glad I persevered and found a solution, even though it took a bit of research.

    What specific areas of your project would you like help with?

    While I'm happy with how the hover effect turned out, I did have a bit of trouble getting the border-radius to work correctly on my image. It wasn't applying as I expected, and I'm not entirely sure why. If anyone has any tips or insights on how to make border-radius work consistently with images, especially when they're inside containers with overlays, I'd really appreciate the help. I'd love to understand the underlying reasons and best practices so I don't run into this issue again in the future. Also, if there are any resources you'd recommend for learning more about image styling in CSS, I'd be very grateful.

    NFT Preview Card Component

    #accessibility#bem
    1
    P
    roswell•490
    @welpmoz

    Your HTML and CSS code look clean. However, all interactive elements must be accessible with the mouse and the keyboard, and don't let your website's layout break after zooming below 200% at least. I don't know what happens besides the problem you face rounding images, but let me tell you that I also face the same problem. Rounding the container doesn't apply to the img child.

  • P
    roswell•490
    @welpmoz

    Hi Somaya. Your solution looks good on desktop screens but not on small screens. To handle these issues, check out media queries. Also, seeing your code, I noticed some issues in your HMTL markup related to HTML semantics.

    Marked as helpful
  • P
    roswell•490
    @welpmoz

    I liked your markdown but not much the styles, it could improve. The interactivity perform pretty well. Keep going!

  • P
    roswell•490
    @welpmoz

    Great work! Your solution looks good in multiple screen sizes. You can improve your semantic HMTL markup using details and summarize tags. And remember that each interactive component must be functional with keyboard and mouse.

    Marked as helpful
View more comments