Skip to content
Submitted 6 months ago

Restarting at frontend with Social Links Profile Media

Leonardo•40
@LeonCelestino
A solution to the Social links profile challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I've been away from web development for approximately 8 months, which for sure made me lose a lot of my skills (I didn't have much though). I thought of trying this challenge because of its simplicity.

I don't have much things on what to be proud besides the time that I was able to accomplish this task, which took me less than 1 hour.

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

I'm having lots of troubles with building accessible and responsive websites, I'm not sure on how accessible it is, but I was able to overcome the responsive part with the max() function for widths.

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

Accessibility, naming, responsivity and code organization.

Code

Please log in to post a comment

Log in

Community feedback

  • Grace•32,130
    @grace-snow

    Here's some feedback I hope it helps. This looks good overall but there are issues that need improving.

    • it's nit good for performance to load 3 css files like this. Just have it in one.
    • it's better for performance to link fonts in the html head instead of css imports.
    • remove the section from the html. You don't need it and it brings no benefit.
    • this is a component that should probably sit within the main landmark, not be the main landmark. It's fine to use a div for the card inside main.
    • the image and intro really don't need wrapping in extra divs. It's not a problem, but You're just creating more work for yourself doing that.
    • the name is a heading, but the location is not. That's just a paragraph. Think about it, is "London" a heading for all the content underneath it? No. So it's not a heading. I wrote a post all about headings on FEDmentor.dev if you want to look it up.
    • personally I would have the quote in a blockquote element and place the list of links in a list not div.
    • the css looks fine overall, just a bit overcomplicated. You're using more selectors than necessary I think but some of that comes down to the overly complex html as already said. Once that is simplified the css can be simplified.

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