Design comparison
Community feedback
- @SabineEmdenPosted 3 months ago
Hi there! 👋 Good job on completing the challenge.
I’m guessing this is your first challenge on Frontend Mentor. Your code has a lot of room for improvement. Don’t worry! That’s perfectly normal. Try to learn as much as you can from this project. Then use what you’ve learned in your next projects.
I’ll point out a some key issues you should work on. When you’ve reviewed those and improved your code, let me know, and I’ll be happy to give you additional feedback!
Does the solution include semantic HTML?
- The
h1
heading and the twop
elements for city and description are all semantic HTML and great choices. - The five links that you have in the
div
withclass=“platform”
don’t have any semantic HTML at all. This should be an unordered list witha
elements inside the list items. - You also need a
main
landmark for accessibility. The attribution would not go intomain
. It would be in afooter
element.
Is it accessible, and what improvements could be made?
- In addition to the semantic HTML I mentioned, the solution has a number of other accessibility issues.
- The image needs to have alt text.
- All font sizes should be in
rem
, not pixel. This allows the user to change the font size in their browser settings. - There should be no fixed height on the
body
element. Replaceheight: 100vh
withmin-height: 100vh
ormin-height: 100svh
. - There should be no fixed height on the card component. Let the content determine the height. This allows the height to change if the user changes the font size in their browser settings.
- The width of the card component should be in
rem
, not pixel. - The links should not have a fixed width in pixels. Add some padding to the card component and change the links to
display: block
. That will solve the problem.
Does the layout look good on a range of screen sizes?
- The profile picture is too large on smaller screen sizes, and there is an uneven gap between the card component and the edges of the screen.
- This project doesn't need any media queries.
Is the code well-structured, readable, and reusable?
- The two divs with
class=“image”
andclass=“title”
are not needed. - There is a lot of repetition in the CSS, which make the code hard to read and to reuse. The links can all be styled together. And as I already mentioned, this project does not need any media queries.
Does the solution differ considerably from the design?
- The solution uses
font-family: Verdana, Geneva, Tahoma, sans-serif
. The style guide specifies Inter as the font family. - The colors in the solution don’t match the colors specified in the style guide.
- The solution has no interactive elements and therefore no hover or focus states.
I hope this helps. Let me know if you have any questions!
I’d also recommend you look at community solutions for this project and read through the feedback other people received on their code for this project.
Happy coding! 😎
0 - The
Please log in to post a comment
Log in with GitHubJoin 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