Skip to content
OverviewSolutions
8
Comments
3
Dan
@igafshell

All comments

  • Adithya•80
    @Adithya2907Submitted almost 2 years ago

    Would like to get feedback especially on:

    • Usage of semantic elements
    • Responsiveness
    • Any CSS tricks I could've used for the overlays on hover

    NFT preview card using HTML and CSS

    2
    Dan•150
    @igafshellPosted almost 2 years ago

    Hey Adithya!👋

    Congrats on your solution! 🎉🎉

    It's very impressive how you made it look exactly like the design! However, try to customize your next projects with elements of your own, like animations, glow effects, etc.

    • Avoid using width, and instead opt for min-width or max-width to ensure responsiveness ( change the width: 100% to `min-width: 100vh' in the body selector )
    • Try reducing the number of containers - you don't need the article element
    • Semantics: everything is perfect; instead of the main you could've used a div, because it's just a component, not a whole page

    That's about all, have a great day!

    Happy coding!

    0
  • Dan•150
    @igafshellPosted about 2 years ago

    Hey Marcin!

    Congratulations on completing your first challenge on Frontend Mentor!🎉🎉

    I see that you've put much effort into your project and written nice code. I got some tips for you:

    • Use font-size: 15px on the .card, font-weight: 400 on the <p> and font-weight: 700 on the <h1>.
    • Simplify the html structure by removing the .main-screen div, and apply its styling to the body instead. And to keep the footer stuck to the bottom put margin: auto on the .card. This will keep the footer down and center the card at the same time. I advise you to read this article if you want to learn more about that.
    • Add box-content: border-box to the css reset. This will make sizing easier. Read more about it here.
    • This is optional, but you could add some padding, margin and border-radius to the footer to make it more stylish.

    That's about it. Good luck in your next projects.

    Happy Coding!

    Marked as helpful
    0
  • Dan•150
    @igafshellPosted about 2 years ago

    Hey Heather!

    Congratulations on completing your first challenge on Frontend Mentor! 🎉🎉

    I would suggest that you add a few details to your code:

    • You can leave the attribution, but make sure to respect the HTML5 semantics and use the <footer> tag instead of <div>. If you want, you can make it stick to the bottom by putting the following css: body {display: grid; grid-template-rows: auto 1fr; place-items: center}. This will make the card push the footer to the bottom and occupy the rest of the space, and also center horizontally and vertically the elements.
    • Set max-width: 20rem to card body to match the size of the design and also make sure to use rem instead of px. And set width: 100%; to the .img to make it fit the card.
    • Add a box-shadow attribute to the card. You can read more about this attribute in this article.
    • Add an empty <h1> to resolve the accessibility issue. Although this is just a component, you still need to put it in.

    Well, that's about it. Happy coding!

    Marked as helpful
    0