Skip to content
Submitted 9 months ago

Profile Links Page

Ahmedq02ā€¢30
@Ahmedq02
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

I'm happy with how this project turned out. I'm open to any feedback for potential improvments that I can learn from for my next projects.

Community feedback

  • Daniel šŸ›øā€¢44,250
    @danielmrz-devPosted 9 months ago

    Hello @Ahmedq02!

    Your solution looks excellent!

    I have just one suggestion:

    • Use <main> to wrap the main content instead of <section>.

    šŸ“Œ The tag <section> would make more sense if the card was part of a bigger website (in certainly would in real world), but here it is all we have on the screen.

    This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

    I hope it helps!

    Other than that, great job!

    Marked as helpful
    0
    Ahmedq02ā€¢30
    @Ahmedq02Posted 9 months ago

    Hi @danielmrz-dev

    Thanks for your advice it's always very helpful!

    0
  • Osman Bayā€¢690
    @osmanbay90Posted 9 months ago

    Great job on completing the Frontend Mentor challenge! Your project shows promise, but here are some areas where you could make improvements in your HTML and CSS:

    1. Semantic HTML: Ensure you use appropriate HTML elements for each piece of content. For instance, use <main> tags and wrap cards to improve accessibility. Replacing the first child <div> of the <body> with <main> can enhance the structure.

    2. Remove Unnecessary Code: Less is more! Eliminate any unnecessary code. For example, remove HTML comments and avoid redundant CSS properties. Clarity and simplicity are key.

    3. Responsive Images: Give images a max-width of 100% to ensure responsiveness across different devices. Also, consider adding a border-radius value for a polished look.

    4. Typography Consistency: Maintain consistent font sizes, text alignment, and margins. For instance, set h1 and p font size to 15px (0.9375rem), align text to the center, and apply consistent margins.

    5. Flexbox and Grid: Explore these layout techniques to create responsive designs. Flexbox is great for one-dimensional layouts, while CSS Grid handles two-dimensional layouts effectively.

    6. Accessibility: Use semantic elements like <nav>, <article>, and <section> to improve screen reader compatibility. Add alt attributes to images for better accessibility.

    7. CSS Variables: Leverage custom properties (CSS variables) for consistent color schemes, font sizes, and spacing. This makes it easier to maintain and update styles.

    8. Organized CSS: Group related styles together. Use separate CSS files for different components or sections. Avoid inline styles whenever possible.

    9. Mobile-First Approach: Start designing for mobile screens first, then progressively enhance for larger screens. This ensures a better user experience across devices.

    10. Browser Compatibility: Test your design on different browsers (Chrome, Firefox, Safari, Edge) to ensure consistent rendering. Use vendor prefixes for CSS properties if needed.

    Remember, practice makes perfect! Keep refining your skills by tackling more challenges on Frontend Mentor. Happy coding! šŸš€

    0

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