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

Tailwind Social links profile Component

@VaalGeek

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?

To be honest when I was coding the a tags element, I duplicated them and just changed the names and relevant links. But I ended up having one data object which I used on my template, which got rid of the duplication.

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

None, except applying an active background on each link, I assumed it was straight forward but I had to configure it under tailwind config file on variants property

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

none, I'm just glad this is my 3rd completed challenge.

Community feedback

@pritxxh

Posted

Utilize CSS Flexbox or Grid for more flexible and responsive layout options.

Implement lazy loading for images to improve initial page load times.

Incorporate ARIA (Accessible Rich Internet Applications) attributes to enhance accessibility for screen reader users.

Consider integrating a content delivery network (CDN) for improved website performance and global accessibility.

0

@VaalGeek

Posted

@pritxxh Thanks a lot for your advise, I shall do that, except the Flexbox and Grid, my solution utilizes them. Unless there's something I am missing. But thanks for an insightful comment.

1
P
meelix 380

@meelix

Posted

@VaalGeek this is bad/redundant feedback.

the comment on using flexbox/grid should tell you pritxxh didn't actually review your code. you did perfectly fine in this regard.

you should not lazy load images which are visible right away (called above the fold) and even if you did, it would not improve performence in this case. more info: to-lazyload-above-the-fold-images

your solution doesn't need any aria tags as it is already accessible. more aria tags does not mean it's better or more accessible.

since you are using vercel you don't need an additional cdn because vercel and in fact github.io is a cdn and it is not adviced to add a cdn on top of a cdn.

vercel.com/guides/why-running-another-cdn-on-top-of-vercel-is-not-recommended

side note: if you look at pritxxh's solution you'll see that their solution still has issues and doesn't implement any of his own feedback.

Marked as helpful

1

@VaalGeek

Posted

@meelix Thanks a million buddy. And I shall be following you from now on.

0

@fastcheetah

Posted

Just about to launch mine you check some stuff about why the width of the anchor tag is off give me 5mins@VaalGeek

0

@fastcheetah

Posted

Sir, try not to put a height let your element determine the height of the container@VaalGeek

0

@fastcheetah

Posted

done @VaalGeek

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