Social links profile

Community feedback

• 

  P

  thibault.deverge•290

  @thibault-devergePosted about 2 months ago

  Hello,

  You've put in a commendable effort on this project, but I do have some suggestions that could improve both the design and code quality, making your work more polished and aligned with best practices.

  Visual Feedback:

  • Card Positioning: The card currently sits at the top of the screen. Centering it vertically would enhance the overall appearance. A common approach is to use min-height: 100vh on the body and apply flexbox to ensure the card is centered both horizontally and vertically. Kevin Powell - Learn Flexbox

  • Font Selection: The design calls for the Inter font, which is currently not implemented correctly. It should be imported via Google Fonts. I recommend reviewing the process for importing and applying web fonts. Google Fonts is a helpful resource for this.

  • Spacing: The spacing, particularly between the links, feels too constrained. Adjusting the vertical spacing would give the design a more balanced and professional look. Once you know flexbox it will be super easy. ;)

  Code Feedback:

  • Use of IDs: While not incorrect, using classes instead of IDs for styling is a more scalable approach. Classes have lower specificity, making them better suited for larger projects or components. It will also allow you to make reusable css components and improve your productivity.

  • CSS reset : Using a CSS reset is a recommended best practice as it helps to normalize browser default styles, ensuring that your design behaves consistently across different browsers. Each browser has its own default styling for elements like margins, padding, and font sizes, which can lead to unexpected layout issues if not properly addressed. A CSS reset strips away these inconsistencies, giving you more control over your design and allowing you to apply styles uniformly. I would recommend exploring popular resets like Normalize.css or Josh Comeau’s CSS reset as they provide a solid foundation for modern web development. Implementing this in your project will help avoid unpredictable spacing and alignment issues, especially when working with different browsers.

  • Naming Convention: The class naming could be improved. I recommend adopting a methodology like BEM (Block, Element, Modifier) for clearer, more maintainable CSS. This will be particularly useful as your projects grow in complexity. Here is a nice ressource about BEM : Kevin Powell - Why I use the BEM naming

  • Button Semantics: For the links that lead to external social media profiles, it’s better to use <a> elements styled as buttons rather than <button>. This improves both semantics and accessibility, especially for users relying on assistive technologies.

  • Units: Avoid using px for font sizes, padding, and margins. Instead, use rem or em, which scale more fluidly with the user's settings, providing a more responsive design. Pixels are better suited for smaller elements like border-radius or box-shadow. Here is another another link

  • Layout: Rather than relying on margin and padding for layout and spacing, I suggest again using flexbox. Flexbox offers a more efficient way to handle alignment and distribution of space, particularly for responsive designs.

  This project demonstrates a good starting point, but addressing the above points will significantly improve both the visual quality and maintainability of your code. Keep up the good work, and don’t hesitate to reach out for further guidance. Best of luck on your next project.

  Happy coding ! :)

  0