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

Social Links Profile

ashensavi 30

@ashensavi

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I'm so happy than proud because I completed this almost 100% accurate.

With these 3 simple projects, I learned a lot. Thank you Frontend Mentor!

What challenges did you encounter, and how did you overcome them?

  1. When I applied display flex on avatar img and h4 tag, it wrongly placed in the div. So then I changed the flex direction, and it worked well.

  2. When customizing the buttons, I didn't know the width of the buttons can be changed. So, after figuring that out, I resized the buttons correctly.

What specific areas of your project would you like help with?

It would be great if someone could review my code and give me some feedback and suggestions like what I am doing wrong or how to keep the code clean.

Community feedback

P
Grace 27,870

@grace-snow

Posted

I’m afraid you need to rewrite the html in this.

  • all content should be contained within landmarks. Every page should at least have a main.
  • the html in this is an img, heading, two paragraphs and a list of links. Headings must only be used appropriately. This only has one heading. But even if the design had more headings they would need to be in order. You can’t jump heading levels.
  • the img alt is for a description of the image. Read the post in the resources channel on discord about how to write good alt text.
  • it is invalid to have anchors and buttons inside each other. They are different elements for totally different purposes. It's very important to use each of them appropriately.
  • these links must not open in a new window. If they did, it would be an accessibility requirement to include that in the accessible name. Eg have visually-hidden text that says "(opens in new window)"
  • the list of links must be in a list.
  • it's better for performance to link fonts in the html head instead of css imports.

There are also some significant issues in the styles

  • always use a modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
  • never limit the height of elements that contain text. This component does not need a height. Instead, let the browser do it's job and decide what height is needed based on the content inside. nothing in this challenge should have a height except the image.
  • the component must not have a width. Instead give it a max width in rem so that it can shrink narrower if needed (eg on smaller screens) and so the layout scales properly even for those users who change their text size.
  • there is no benefit to these flex columns in the component of you're not using the gap property. Block elements woult stack vertically by default.
  • line height must never be 0
  • font size must never ever be in px. Use rem. I've written a detailed post about this on FEDmentor.dev if you want to understand more.
  • the links can be display block and optionally width 100%. They must not have an explicit width in px.

Overall I recommend you try to really simplify the styles in this.

Marked as helpful

1

ashensavi 30

@ashensavi

Posted

@grace-snow Thank you for the valuable feedback!. I'll keep these things in mind. Thank you for your time.

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