Skip to content
Submitted about 1 year ago

Responsive Card Component using HTML and CSS only

Jesse•110
@vinshield
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I loved completing this project. It was simple, fun and moderately challenging.

The challenge in question was applying that beautiful hover effect on the image. I swore to stick to only HTML and CSS (no javascript) for this project, so I had to do some research for this part, even though I could easily think of ways to do it with javascript. It was a challenging twist that I enjoyed.

I'm happy I learnt how to apply that kind of hover effect. The main reason I'm doing these tiny projects is to learn little tricks like this that are used on the majority of websites.

I welcome you to look through my code on github and send any comments on how I can improve, I'll be happy to start a chat! ✌🏽

Community feedback

  • mlior456•40
    @mlior456Posted about 1 year ago

    Hey, I like the way you coded this project, pretty clean. way better than mine x5 lol. But why you used article and main elements ? Is that necessary ? just wondering great work.

    0
    Jesse•110
    @vinshieldPosted about 1 year ago

    Hi @mlior456, thanks for the compliment! 🤩 For a tiny project like this, the article element may not be necessary although it gives semantic meaning to larger websites and it helps screen readers and other assistive technologies correctly interpret the webpage. I only added the article element to get into the habit of using such semantic tags. Since the card is the only item on the page, I might as well treat it as an article.

    I think having a main element is necessary to differentiate it from the attribution div (thinking of it now though, I think this div should have been in a footer tag (I still have much to learn about semantic html)).

    As far as clean code goes, the way I'm developing that skill is by doing code along videos, mimicking how the veteran web designers structure their CSS. Let me recommend the Kevin Powell youtube channel. He gently explains his thought process, so his videos are engaging and easy to understand.

    I wish you the best in your coding journey! 🥂

    0

Please log in to post a comment

Log in with GitHub

Join 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