Skip to content
Submitted 2 months ago

Social Links Profile

P
Dallas•120
@Dasaru
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?

I'm happy with how my link hover animation turned out. It took some fiddling around with but I got it to work just like the demo.

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

I mostly had to use trial and error to figure out the transition functions for my hover animation. I had to reference the MDN docs to help me figure it out.

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

I would like help with the organization of my CSS file. Any ideas on how I could rewrite it to make it easier to understand to other devs is greatly appreciated!

Community feedback

  • Aakash Verma•9,520
    @skyv26Posted 2 months ago

    Hi @Dasaru,

    CSS Review & Recommendations:

    1. Group Similar Styles:

      • Organize by typography, layout, media queries, etc., for better readability.

    2. Consistent Units:

      • Use rem for font sizes for scalability (avoid mixing px and rem).

    3. Merge transition Properties:

      • Combine transition declarations for hover effects into one rule.

    4. Organize Media Queries:

      • Group media queries under a "Responsive Styles" section for clarity.

    5. CSS Variable Fallbacks:

      • Provide fallbacks for font-family and color variables for compatibility.

    6. Improve Class Naming:

      • Consider using BEM methodology for consistent, descriptive class names (e.g., .social-links__list).

    These changes will enhance readability, maintainability, and scalability of your CSS.

    1

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