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

HTML and CSS

Donatas 340

@Donatas-prog

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


Criticism is welcome!!! So don't be shy

Community feedback

szam 800

@k-stopczynska

Posted

Hi!

Congratulations on finishing this challenge!

As far as I can see you have five main problems:

  1. your max-width for section is 1440px, so on my screen (1920) it's on the left side, the right side is just this green background of the body. The optimal layout is for 1440px, but we need to think about all the devices it could be seen on, so better use width: 100vw.

  2. look at the design for mobile: the are background images, but we can't see it on your project. Media queries would do the trick.

  3. You shouldn't use h1 and after that immediately h4. Read about hierarchy of headers.

  4. In attribution- set a link to your Frontend Mentor profile in anchor tag.

  5. Try to use header, main and footer instead of so many divs. It helps accessibility.

On the positive part: it looks good and is responsive up to 1440px. Very close to the design.

Keep up the good work and happy coding!

Marked as helpful

0
Donatas 340

@Donatas-prog

Posted

I take it into consideration. Thank you!

0

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