Skip to content
Submitted almost 3 years ago

css, flexbox, media queries, javascript, multiple background images

Marc Neumann•60
@NewMeeDev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi there,

feel free to analyse and use my code. Feedback is very welcome.

Thanks!

Community feedback

  • darryncodes•6,370
    @darryncodesPosted almost 3 years ago

    Hi Marc,

    Really great solution, nice one!

    • you might want to consider moving all your background declarations from the .wrapper class and adding them to the <body>. There is a white border round the whole design at the moment.
    • you could also clear up your accessibility report if you swapped <div class="wrapper"> for <main class="wrapper"> and <div class="attribution"> for <footer class="attribution">. Semantics is really important
    • your design should only have one <h1> consider changing the rest to <h2> here is some info

    Keep up the good work!

    Marked as helpful
    0
    Marc Neumann•60
    @NewMeeDevPosted almost 3 years ago

    @darryncodes

    Thank you for your hints! Very interesting for SEO, right?

    OK, I will consider these in my next projects.

    0
    darryncodes•6,370
    @darryncodesPosted almost 3 years ago

    Yeah that's right @NewMeeDev, and for accessibility, it helps user's with screen readers navigate the site.

    0
  • Web Wizard•5,690
    @rsrclabPosted almost 3 years ago

    Hi, @NewMeeDev ~

    Congratulate on your solution to FM challenges. I have studied your work, and it seems great. I have learned a lot from it. Here are some of opinions on this project.

    1. Limiting background image to wrapper doesn't look good. I think making background image fill whole screen could be better in this case.
    2. Limiting card width is necessary, but I recommend to use max-width instead of manually setting width constant.
    3. I recommend you to try using BEM structuring for classing elements. That could be big advantage when you are stuck with bigger projects.

    Hope my words can help you even a bit. Happy coding ~

    Marked as helpful
    0
    Marc Neumann•60
    @NewMeeDevPosted almost 3 years ago

    @tymren608

    Hey thank you Tymur,

    1. Yes, I think so too ... but the template-pic looks so too
    2. You're right. I make it better in next projects.
    3. Cool, never heared of BEM before. Interesting. THX!
    0

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