Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Social Links Profile using HTML, CSS/SASS

ChristianM 110

@DevXtianM

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I've developed the whole project with minimal searching for tutorial :D

Community feedback

P

@webdevbynight

Posted

Some feedback:

  • the design file shows that the links texts are permanently bold, not only when hovered;
  • you should enhance the semantics of your HTML: the attribution footer should be wraped by the footer element, the main content should be within the main element and the card should be tagged as an article or section element (don’t hesitate over having a look at the HTML elements reference on MDN);
  • you should use relative units for font sizes such as em or rem: when using pixels to set font sizes, I am afraid this can lead to accessibility issues with users needing to be able to zoom texts in (by the way, you can define all dimensions, widths, paddings, margins, gaps… by using relative units: the design will get more elastic);
  • when possible, avoid using fixed heights: if you need to set a height, to use min-height is preferable;
  • if you want the whole container to occupy the whole height of the viewport, think of min-height: 100 dvh (check for relative length units based on viewport if you do not know what such a unit stands for);
  • even if Sass is a great tool, you do not need to use Sass variables any more to define colour values, since CSS has custom properties;
  • on main.scss, line 41, just declare font-weight: bold if you want to use the bold weight of the font (since there is only one font used, declared previously, you do not need to use font-family again).

I hope this feedback helps you.

Marked as helpful

1

ChristianM 110

@DevXtianM

Posted

@webdevbynight Thank you for your feedback! I've made some modifications based on your suggestions:

  • Improved HTML Semantics: Instead of divs i tried to use different semantics.

  • Relative Units: Updated the font sizes and other dimensions (widths, paddings, margins, gaps) to use relative units like em and rem for better accessibility and design flexibility.

If you have any other suggestions or notice anything else, please let me know!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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