Design comparison
Solution retrospective
Image is the best way to improve website
What challenges did you encounter, and how did you overcome them?respect work
What specific areas of your project would you like help with?all
Community feedback
- @hassanmoaaPosted 10 months ago
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!
0@Siddarth-abcsPosted 10 months ago@hassanmoaa Sir thanks for your review am follow
0 -
- @petritnurediniPosted 10 months ago
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:
-
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>
- Ensure proper use of heading tags. You've used
-
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 */ }
- Consider using CSS variables for frequently used properties like
-
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.
- Add
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! ๐ฉโ๐ป๐
0@Siddarth-abcsPosted 10 months ago@petritnuredini thanks sir for your guidance am definitely follow
0 -
- @Ezekiel225Posted 10 months ago
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.
0@Siddarth-abcsPosted 10 months ago@Ezekiel225 ๐๐๐๐๐thanks follow
0
Please log in to post a comment
Log in with GitHubJoin 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