Frontend Mentor | Henry's profile

@KWarenSubmitted about 1 year ago

Social links profile

#accessibility#sass/scss

@stan545Posted 29 days ago

Hi KWaren, great job on completing the Social Links Profile challenge. Your solution is clean and visually strong. I’ve put together some feedback that should help you refine it further.

It looks like the GitHub link you submitted might not point directly to this project. When I visited the repository, I couldn’t find the files corresponding to the live solution. Because of this, I reviewed your work based solely on the deployed live site and not the source code. You may want to double-check the repository URL and ensure that it links directly to this specific challenge and that the project is public. This will help reviewers provide more accurate code-related feedback.

From the live preview, your use of semantic HTML appears strong. Elements like <main>, <h1>, and <p> are appropriately used. One improvement would be to ensure that social link items are built using anchor (<a>) elements instead of plain text or buttons, to provide semantic value and proper functionality.

Accessibility-wise, your layout is heading in the right direction, but there’s room for enhancement:

Replace non-interactive elements with real links (<a>) to ensure keyboard and screen reader accessibility.
Add visible focus states to help keyboard users track navigation.
Make the avatar’s alt attribute more descriptive, such as “Profile picture of Jessica Randall.”

The layout itself is well-crafted and scales nicely across different devices. Your use of Flexbox contributes to this responsiveness.

Although I couldn’t view the source code, the styling and layout decisions on the live site suggest a solid understanding of layout structure. That said, using CSS custom properties for colors and font sizes, and grouping shared rules, could help keep your code more scalable.

Visually, your solution stays faithful to the original design. Any deviations are minor and don’t impact usability or clarity.

0

Christian Totaro•70

@totarochristianSubmitted about 1 year ago

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

I am proud that I was able to complete the project without having to resort to external sources, but only using what I knew. Next time I would like to try to create using a framework like bootstrap, or I would like to try dividing the file containing the styles into multiple files and using transitions.

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

I didn't have to face any major difficulties other than picking up style tags that I hadn't used for some time.

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

There isn't a precise area, perhaps I should delve deeper into accessibility.

Blog preview card

2

Henry•40

@stan545Posted about 1 year ago

Yeah, you're right. Consistency is the key.

0