Skip to content
Submitted over 2 years ago

Responsive HTML and CSS - NFT Preview Card

Jp Lawrence•40
@jplawrence
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

Hey everyone! I'd appreciate it if you gave some feedback on my solution with regards to the HTML and CSS, or possibly anything you would've done differently :) Have a lovely day!

Community feedback

  • Ciceron•940
    @MarcusTuliusCiceronPosted over 2 years ago

    Hi congrats completing this challenge, Here my comment regarding your code: -In the HTML you could wrap everything into a main landmark to improve accessibility of your code

    <body>
    <main>
    </main>
</body>

    -when you're doing style reset don't forget to also reset styles for your pseudo element

    * , *::after, *::before{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Outfit', sans-serif;
}

    -when you're setting height or width of an element, try to use one of the following unit: vh, vw, %, vmin, ... This will help make your layout responsive in bigger project

    Hope those tiny advice from beginer to another will help you, happy coding :D

    Marked as helpful
    0
    Jp Lawrence•40
    @jplawrencePosted over 2 years ago

    @MarcusTuliusCiceron Woah! Thanks SOOO much!! First time getting helped with actual code :)

    I'll fix the accessibility part and css while I'm at it! Thanks!

    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