Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive card with flexbox

@zastar23

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


It has been more than a week since my last update on this site.

I started to study JS and I wish that soon I can complete projects that require JS also.

Community feedback

darryncodes 6,430

@darryncodes

Posted

Hi Florin,

Awesome solution, nice work!

You could clear your accessibility/html report if you swap <div class="attribution"> with <footer class="attribution">. Semantic html is really important.

You could also centre your design responsively in the viewport using Flexbox on your <body>:

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;

Marked as helpful

1
Web Wizard 5,690

@rsrclab

Posted

Hi, @zastar23 ~

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

Here are some of the tips I like to provide.

  • Please try BEM for naming element classes. It will help you a lot on bigger projects.
  • For background, I suggest you to use css background-image property or pseudo elements like ::before, ::after.

https://www.frontendmentor.io/solutions/profile-card-solution-m-cH4D2Lp

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

1

Please log in to post a comment

Log in with GitHub
Discord logo

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