Skip to content
Submitted 2 months ago

Social Links Profile

Den Mark•50
@devmork
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

What I'm most proud of is that I actually made this project without the figma file because fig file really helps a lot especially in adjustments, spacing, height, and sizes of each element.

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

The challenges I encountered while doing this challenge is using grid and also pseudo properties like hover I still don't understand how it really works I just search a references online on how to use hover or implement hover in my design.

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

I would love to know more about manipulating flexbox and using grid because it really helps me from placing one div to another or making a structured design and manipulating the html tags.

Community feedback

  • MikDra1•6,980
    @MikDra1Posted about 2 months ago

    Well done, here are some things to review 😊:

    • Overusing div tags: Try using more semantic HTML elements like <section>, <header>, and <article>. It’ll help with both accessibility and SEO.

    • Neglecting responsive design: Make sure you're using media queries and following a mobile-first approach so your site looks great on all devices.

    • Inconsistent class naming: It’s easy to end up with a mess of class names. Consider using a system like BEM for better organization and scalability.

    • Not testing across browsers: Don’t forget to check how your site looks in different browsers like Firefox and Safari. Cross-browser testing is super important.

    • Ignoring accessibility: Focus on features like keyboard navigation, contrast ratios, and ARIA labels. They make your site usable for more people.

    • Using fixed heights for elements: Setting fixed heights can cause overflow issues. Use min-height or allow content to expand naturally to avoid problems.

    • Not using responsive images: Be sure to use srcset or the <picture> element to optimize images for different devices. This improves performance, especially on mobile.

    Hope you found this comment helpful 💗💗💗

    Good job and keep going 😁😊😉

    0

Please log in to post a comment

Log in with GitHub

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