Skip to content
Submitted about 3 years ago

NFT preview card component challenge with only HTML5 and CSS3

James•340
@james-work-account
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 normally get stuck in to these challenges with frontend frameworks and/or CSS preprocessors or frameworks. For this challenge I decided to just use pure CSS and HTML, since recently I feel I have really been ignoring basic HTML/CSS principles and I don't want to lose sight of my fundamentals. So... here's a bare-bones project! I coded this up in the latter half of an afternoon and would like to revisit it after getting some feedback on my semantic HTML and CSS styles.

Ultimately, I'm looking for feedback on my HTML semantic (or not!) markup, CSS best practices, that sort of thing.

Many thanks!

Community feedback

  • Alex•2,010
    @AlexKMarshallPosted about 3 years ago

    It's looking very good. I've only got a couple of pretty picky points.

    The border on the profile picture looks a bit strange, and I think the design doesn't have it.

    Make sure you've got empty strings for your alt on your decorative icons. Otherwise I think the semantics are spot on.

    CSS looks good. I'd be tempted to set up your max widths as CSS custom properties, that way they get names, at the moment they're just magic numbers and a little unclear what value they represent. That's not that necessary though.

    I think it would be nice to have a short transition on the hover effects though. They're a little abrupt.

    Very good job though.

    Marked as helpful
    2
    Matias Blanc•50
    @MatiasBlancPosted about 3 years ago

    the border of the profile picture is 1px, that's why it looks strange

    Marked as helpful
    1
    James•340
    @james-work-accountPosted almost 3 years ago

    @AlexKMarshall thanks for the feedback!

    The Figma file has a 1px white border around the image, though to be honest I didn't check the design images... there may be a discrepancy there, I'm not sure.

    Good point on the alts, I'll take a look through them!

    And good point on the max widths and transitions - I'll have a think about the best way to do that stuff.

    Thanks again ☺️

    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