Skip to content
Submitted 11 months ago

Responsive Social links profile using CSS flex

Beaddu•10
@Abdopamined
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?

Getting it to look as close I could to the original.

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

I'm not sure if there is anything specific that needs fixed. So any feedback would be much appreciated.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    MikDra1•7,450
    @MikDra1

    To improve the HTML and CSS, consider the following:

    • Semantic HTML: Use more descriptive HTML5 elements like <header>, <nav>, <main>, and <footer> to enhance accessibility and structure.
    • CSS Organization: Group related CSS rules (e.g., typography, layout, colors) for better readability. Consider using a preprocessor like SASS for modularity.
    • Responsive Design: Ensure the layout adapts smoothly across various screen sizes, possibly integrating media queries for better control.
    • Accessibility: Improve ARIA roles and labels for screen readers. Ensure high contrast for text and background colors.

    Hope you found this comment helpful 💗

    Good job and keep going 😁😊😉

    Marked as helpful
  • Affan Amer•350
    @AffanRM

    Hey, good work on the website! There are a couple of suggestions I have for you:

    • Firstly, it's better to specify the font size in rem/em units rather than pixels (px) as it helps improve the acesssibility of the website
    • Secondly, you can add the following code to your buttons so that the cursor changes to pointer when the user hovers on them: button {cursor : pointer;}
    Marked as helpful

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