Skip to content
Submitted over 3 years ago

CSS Flex

Vasile Cosmin•160
@VasileCosmin
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Can you give me a feedback? I am new to front-end development. Don't be to harsh:))

Code

Please log in to post a comment

Log in

Community feedback

  • PhoenixDev22•16,830
    @PhoenixDev22

    Hello VasileCosmin, Congratulation on completing your first project. Your solution looks nice. I have some suggestions , To tackle the accessibility issues :

    • Document should have one main landmark. Wrap the body content in< main>tag read more about main landmark.

    • For any decorative images, each img tag should have empty ``alt="" (as you did )and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. And for this one <img src="./images/image-avatar.png" alt=""> the alt shouldn't be empty.

    -The eye image doesn't really need to be in the html, you could do it with css. If you want it to stay in html it needs to be aria-hidden or role presentation with empty alt.

    • You should use em and rem units .Both em and rem are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design.

    • You can replace the <div class="attribution">by a <footer > tag and it would be out the < main>.

    • You shouldn't use <div class="divider"></div> . you can use border-top property for the class="card-footer".

    I really hope this feedback helps , happy and keep coding

    Marked as helpful
  • Web Wizard•5,690
    @rsrclab

    Hi, @VasileCosmin ~

    Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it. Especially I like BEM structuring on your project.

    Here are some of the tips I like to provide.

    • On smaller devices, card goes over screen, and I think max-width: 100% can solve this issue.
    • I suggest you to try transition on hoverable elements like heading and creator name.
    • Font sizes and spacings aren't the same with design. As a front-end developer, it's important to meet pixel-perfect requirements.

    https://www.frontendmentor.io/solutions/my-first-solution-on-chanllenge-V-4IzAivH

    Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

    Cheers ~

    Marked as helpful

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