Social Media Link Profile

Community feedback

• 

  P

  Sabine•80

  @SabineEmden

  Posted 9 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 two p elements for city and description are all semantic HTML and great choices.
  • The five links that you have in the div with class=“platform” don’t have any semantic HTML at all. This should be an unordered list with a elements inside the list items.
  • You also need a main landmark for accessibility. The attribution would not go into main. It would be in a footer 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. Replace height: 100vh with min-height: 100vh or min-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” and class=“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! 😎

  00