social-links-profile-main

Hello @Siddarth-abcs!

Great Job solving the challenge mate congrats 🎉

Some suggestions for improvements.

For the font-size it's is better to use rems and ems but px for this project is no big deal.

font-size: 13px;

• i see you using pixels for many elements, never use pixels for font-sizes in any element, here's why:

• Certain font-related CSS properties will render your site completely inaccessible if their value is declared using pixels even once.

Which properties are affected?

All of these properties must never ever be declared in pixels:

• font-size
• line-height
• letter-spacing

If you've used pixels to define any of the above style properties, these will not respect the user's font size preferences!

• You should use ems, and rems for font-sizes would be better

This article may help:

https://fedmentor.dev/posts/font-size-px/

➖➖➖➖➖➖➖➖

Use <main> to wrap the main content instead of <div>. * 📌 Tags like <div> and <span> are typical examples of non-semantic HTML elements. They serve only as content holders but give no indication as to what type of content they contain or what role that content plays on the page. 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.

➖➖➖➖➖➖➖

Heading is defined with <h1> to <h6> tags. It is important to use headings to show the HTML document structure.

<h1> headings should be used for main headings, followed by <h2> headings, then <h3>, and so on up to <h6>

Other than that you're good, keep up the good work!

Congratulations on completing the Frontend Mentor challenge for the Social Links Profile! It's great to see your project come to life. Here are a few suggestions to make your code even better:

1. HTML Semantic Structure:

   • Ensure proper use of heading tags. You've used <h2> followed by <h3>, then <h1>. It's better to follow a hierarchical order for headings. Start with <h1> for the main title, then <h2>, and so on.
   • Example:

     <h1>Jessica Randall</h1>
     <h2>London, United Kingdom</h2>
     <p>"Front-end developer and avid reader."</p>
     

2. CSS Optimization:

   • Consider using CSS variables for frequently used properties like margin to ensure consistency and ease of maintenance.
   • Example:

     :root {
       --default-margin: 0.5rem auto;
     }
     .btn {
       margin: var(--default-margin);
       /* other styles */
     }
     

3. Accessibility and Best Practices:

   • Add alt text to images for better accessibility. This is crucial for users who rely on screen readers.
   • Make sure the social media names in the buttons are visually and programmatically associated with their icons. This can be achieved using <span> tags with visually hidden class for screen readers.
   • Example:

     <button class="btn">
       <img src="./images/icon-github.svg" alt="GitHub">
       <span class="visually-hidden">GitHub</span>
     </button>
     

   • Use the <footer> tag for the attribution section.

Useful Resources:

• Semantic HTML: MDN - Semantic HTML
• CSS Variables: MDN - Using CSS custom properties (variables)
• Accessibility: Web Accessibility Guidelines

Keep up the great work, and continue enhancing your skills and projects. Each challenge you overcome takes you one step closer to being an expert developer! 👩‍💻🌟

Hello there 👋 @Siddarth-abcs.

Good job on completing the challenge !

Your project looks really good!

I have a suggestion about your code that might interest you.

There is an very useful browser extension called Perfect Pixel that allow you compare with the design image and thus see the exact dimensions. I recommend it to you.

I noticed that you've added your own details in this design that's good, but here is a thing, please try to match box sizing and most important responsive layout as per the design provided in the template.

I hope this suggestion is useful for future projects.

Other than that, great job!

Happy coding.