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

flexbox, media queries

@CelineJames

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 am getting better with using CSS, i am proud of that.

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

i had the challenge of designing the links, could not quite decide if i should use buttons or just links, i used buttons and then wrapped the links inside the buttons however i had difficulty styling it. so i had to use just the links and style them like buttons.

Community feedback

Dylan de Bruijnβ€’ 3,190

@DylandeBruijn

Posted

@Kaytorah

Hiya! πŸ‘‹

Congratulations on your solution, it looks very close to the design! I can tell you put a lot of effort into it.

Things you could improve ✍️

  • I suggest adding a bit of padding to your body element so the card has some space around it on smaller viewports.

  • Try experimenting with CSS variables, they help you make your CSS values more reusable across your code.

  • I suggest using clear descriptive CSS classes like .card, .card-title and .card-description.

  • Try using semantic HTML elements like main, section and article.

  • Try using using relative CSS units like rem and em they make your layout more adaptable.

  • Be careful with setting a fixed width and height on your elements. If the content in these elements grows beyond these restrictions you’ll run into overflow issues. Keeping the height at auto - which block elements are by default - will be fine in most cases.

  • You don’t need to put width: 100% on block elements, they already take up the full width of their parents by default.

  • Try putting your links in a list (ul) to make your code more semantic. You made the right choice using a tags for your links. Generally you would use a tags if you want to link to a different page or website and buttons if you want something to happen on the page. You can make a tags look like a button which is what you want to do here.

Example of code:

<ul>
    <li>
        <a href="#">Github</a>
    </li>
</ul>

I hope you find my feedback helpful! 🌟

Let me know if you have more questions and I'll do my best to answer them. πŸ™‹β€β™‚οΈ

Happy coding! 😎

Marked as helpful

2

@CelineJames

Posted

Thank you, I will try all these out@DylandeBruijn

0
SamOβ€’ 110

@SamOwens

Posted

Looks good!

Other feedback has most points covered, but the one I would add is that you should include aria-label attributes to your links for better accessibility. You can read more about them here - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label

Marked as helpful

1

@CelineJames

Posted

Thanks for this link, it’s like you read my mind. I was going to go read about it now, Smile.@SamOwens

0
P
Bamo-D-Abdallahβ€’ 280

@Bamo-D-Abdallah

Posted

A button does some functionality on the web page.

But link navigates you somewhere.

In the project they are links leading you some other place so you made the right decision to use links.

Some CSS notes:

  • avoid uisng px, use rem instead.
  • there is no need to set height on your elemets.
  • don't set fixed width in the normal design, set max-width in @media to control the width of the element in different screen sizes.

Marked as helpful

1

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