Submitted about 2 months ago
Responsive Social link profile using HTML and CSS
@TusharKaundal
Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
Creating the site responsive to various screen size
What challenges did you encounter, and how did you overcome them?For this didnt face any challenges thanks for previous challenges were able to complete without encountering any issue or challenges
What specific areas of your project would you like help with?How to place footer at bottom of the page
Community feedback
- @grace-snowPosted about 2 months ago
Hi
This looks really good! Just a few suggestions for you:
- This doesn't need a media query. Instead of using an explicit width on the card, give it a max-width in rem and optionally width 100%. Then it will already work on all screen sizes.
- Consider using a clamp for the padding on the card so it is fluid already without a media query. E.g
clamp(24px, 40px, 5vw);
- Give that image a height as well as width, or give it an
aspect-ratio: 1
for a tiny performance boost. The browser will then know how much space to save for it as it loads. - You shouldn't be using buttons in this! These are definitely links that would navigate somewhere so should be anchor elements with a valid href attribute.
- Consider adding a bold custom
:focus-visible
style. Usually this is an outline and can be offset by a few px. Remember the purpose of focus visible styles is to make it really obvious for keyboard users where they are on a page (it's not meant to be pretty, it's just meant to stand out) - Personally I would want those links to be in a list. That helps screen reader users know how many items there are.
- Those footer attribution links currently fail accessibility requirements because the only way to know they are links is through colour. Give them an underline so they look clickable.
Marked as helpful0@TusharKaundalPosted about 1 month ago@grace-snow thanks for reply , your comment helped me to learn new things and based on that had made changes.
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