Skip to content
Submitted about 2 years ago

NFT Card Preview using CSS FlexBox

Edet John•220
@cyberohn2
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

Ok... so any suggestion??

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hello @cyberohn2, Congratulations on completing this challenge!

    Some suggestions for you:

    1.You need to include the title of your PAGE. Do that inserting in the <head> the tag <title> → <title>NFT Card - Front End Mentor</title>

    2.Add the website favicon inserting the svg image inside the <head>. <link rel="icon" type="image/x-icon" href="./images/favicon-32x32.png">

    3.Your component is perfect, but is not responsive yet, this is due the fixed width you've applied to the container.Look both width and max-width the main difference between these properties is that the first(width) is fixed and the second(max-width) is flexible, for example, a component with width: 320px will not grow or shrink because the size will be ever the same, but a container with max-width: 320px or min-width: 320px can grow or contract depending of the property you've set for the container. So if you want a responsive block element, never use width choose or min-width or max-width.

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    1
    Zizi Aymen•170
    @zizi-aymanPosted about 2 years ago

    @correlucas I delete it and replace it SORRY!

    0
    Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    @zizi-ayman For me its fine bro, I just get bother because you copy and paste something I wrote, you've some amazing projects and a lots of things to share so you can spread your ideas. You can help a lots of person sharing the things you've learned here. Keep it up bro, I saw a lots of improvement since your first project.

    1
    Edet John•220
    @cyberohn2Posted about 2 years ago

    @correlucas thank you so much. tbh i never knew the difference btwn max-width/min-width and width. thanks again

    0
  • Zizi Aymen•170
    @zizi-aymanPosted about 2 years ago

    Hello @cyberohn2, Congratulations on completing this challenge! 1: you forget the active status, also title "NFT preview card component", and you didn't apply the font Here are some tips to improve your solution code: 1: add height: 100vh to body to make the body height take all of the screen height 2: Use <main> instead of <div> (use the semantic tags )it will make your HTML more comprehensible and make it clear to the browser what the meaning of a page and its content is. 3: Try to not use width too much and if use it uses min-width for a more responsive web design I hope this helps you and happy coding!

    1
    Edet John•220
    @cyberohn2Posted about 2 years ago

    @zizi-ayman thanks. as for the fonts... that was just me being lazy :). i just rushed the project yesterday so i kind of forgot to add the fonts, and the body- i tried using flexbox to center the card but it was only centered horizontally, that's why i added the "big-container" div.( any advice on how to solve that will be really appreciated( if you don't mind pls kindly help me check my report i dont understand what the errors means. thanks once again

    1
    Zizi Aymen•170
    @zizi-aymanPosted about 2 years ago

    Hello @cyberohn2

    1. you can delete big-container and add it to body:
    body{
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
   color: hsl(215, 51%, 70%);
   background-color: hsl(217, 54%, 11%);
}

    1. you should put alt in the image tag <img>

    2. about ACCESSIBILITY ISSUES in your Report:

    A. Heading levels should only increase by one: it means you increase heading by 1 each time if you put <h1> next heading should be <h2> not <h3>.

    B. The document should have one main landmark: you should put One Main Landmark <main> change container with <main>.

    C. will be solved when B is solved.

    I hope this helps you and happy coding

    Marked as helpful
    0
    Edet John•220
    @cyberohn2Posted about 2 years ago

    @zizi-ayman thanks man i really do appreciate

    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