Skip to content
Submitted over 2 years ago

just plain html and css

jake•140
@jakewebd
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

constructive criticism is appreciated.

Community feedback

  • riverCodes•300
    @riverCodesPosted over 2 years ago

    Hi, congratulations on the solution. Here are a few things you can improve on, -

    • For the HTML and Accessibility issues, put alt attributes on your images and icons. Change your div.main-container to main.main-container (<main class="main-container>). Whenever you use a section, it needs to have one heading element inside it, and the whole page needs to have at least one <h1> tag.

    • I noticed your card is not centered on the page. For this, i recommend this resource. It's a great standard way that you can use to center a lot of the components in the frontend mentor challenges. Link: https://every-layout.dev/layouts/cover/. In short, you want to put this CSS in your body tag: min-height: 100vh, display: flex; flex-direction: column; align-items: center; justify-content: center; This will force your <body> tag to cover 100% of the viewport height (by default, element heights usually depend on inner content height). and then use flexbox to apply centering properties.

    • additionally, you can apply this code to your <main> tag margin-block: auto; and to the <footer> margin-block-start: 1rem this will force your footer tag to always have 1rem of space from the main tag and will keep the main tag centered vertically.

    • Lastly, your design seems to be quite smaller than the reference. I suggest you to use rem units instead (relative to the font-size mentioned in the style-guide.md) and bump up the sizes of everything. Small text is more for printing, on screens this affects readability.

    Good job though :D Keep on learning!

    Marked as helpful
    0
    jake•140
    @jakewebdPosted over 2 years ago

    @riverCodes thank you!!!

    0
    riverCodes•300
    @riverCodesPosted over 2 years ago

    @jakewebd no problemo, be proud, the layout of the content inside the card is really good, and it's something I had difficulty with when I attempted this challenge.

    I also just noticed you haven't implemented the active states. You might have missed that or just don't know how to achieve it yet. It's totally fine to come back to solutions later and update them after you learn more. The key thing is to keep learning

    0
    jake•140
    @jakewebdPosted over 2 years ago

    @riverCodes thank you I appreciate that! I've only been learning for a week or 2 so I dont have so much knowledge outside of basic html and css (didnt even start learning flexbox yet) but ive been trying to apply what i know as much as possible.

    1
    riverCodes•300
    @riverCodesPosted over 2 years ago

    @jakewebd good progress so far! thumbs up emoji

    1

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