Skip to content
Submitted about 1 year ago

pettik--social-links-profile

pettik•600
@pettik
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?

I am most proud of: Successfully incorporating the ::before pseudo-element to position an image as a background in the template, which allowed me to fine-tune spacing and page dimensions.

What I would do differently next time: For future projects, I plan to explore using Tailwind CSS, a utility-first CSS framework that I'm currently learning. It offers streamlined styling and responsive design capabilities, which could enhance my development process.

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

When styling individual list items, I was unsure whether to style the `list-item` itself or the link inside the list-item element. Ultimately, I focused more on styling the `` link element, while keeping the list-item formatting consistent at the Unordered HTML List level.

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

If I have chosen the correct naming of element classes and also whether the styling corresponds to the requirements.

Code

Please log in to post a comment

Log in

Community feedback

  • Account deleted

    Hi, @pettik! 🙋‍♀️ Great job on your solution and the overall organization of the code!

    I have a couple of suggestions for improvement:

    1. While the naming of your classes is generally good, there's a minor inconsistency. In some classes, you've used a single underscore instead of the double underscore convention, like card_list instead of card__list. Double-check your class names to ensure they consistently adhere to the methodology you're using.
    2. I noticed that you've defined <main class="card"></main>. It's worth noting that using the <main> tag with a class of "card" isn't recommended. Even though this project might only involve a card, the <main> tag should serve as a semantic wrapper for the main content of the page. If you were to add other cards or sections to the page, having multiple <main> tags wouldn't be appropriate, as they should only be used once per page.

    Your CSS is well-structured, utilizing rems and custom properties, which is excellent! However, I have a couple of minor suggestions regarding your CSS file:

    • As this code doesn't require media queries to work properly, it's good practice to try to solve it without them. This can help you develop your skills and understand CSS better.
    • I noticed that you've used fixed width sizes for the card, which isn't recommended. Even if you were to use media queries and set fixed widths for different breakpoints, this approach could lead to potential issues. Instead, consider using a combination of width, max-width, and relative units to create a more flexible layout, eliminating the need for fixed sizes and media queries instead.

    Have fun learning coding! ✨

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