Responsive Social Links Profile using HTML/CSS

Community feedback

• 

  Ehsan Tatasadi•1,800

  @tatasadiPosted 11 months ago

  Hey there,

  Great job on completing this challenge! Your implementation demonstrates a good understanding of HTML and CSS, and the overall design looks visually appealing. Here are a few suggestions that could help further enhance your project:

  Semantic HTML Elements: Consider using more semantic HTML elements instead of relying solely on div and span tags. For instance, the name could be enclosed in an h1 or h2 tag, and the occupation description could use a p tag. Semantic elements improve accessibility and SEO, and they make your HTML more readable and meaningful.

  Use Anchor Tags for Links: For the social media links, it's semantically more appropriate to use <a> tags rather than span. This not only improves accessibility but also ensures that users and search engines recognize these as clickable links. Don't forget to include the href attribute pointing to the respective social media profiles.

  Body Background Color: To align your design more closely with the original design, consider setting the background color of the body to a dark shade. This will create a better contrast with your card and enhance the overall look and feel of your webpage.

  Responsive Width for Links: Instead of setting a width of 35vh for the links, consider making them width: 100% of their parent container. Then, set a max-width to the parent container (.container). This approach ensures that the links are responsive and maintain an appropriate size relative to their container, preventing them from becoming too wide on larger screens.

  Overall, you're on a great track! Implementing these suggestions will not only make your project more semantically correct and accessible but also enhance its responsiveness and alignment with design best practices. Keep up the excellent work and continue to explore and refine your skills in web development! 🚀

  0
• 

  Renandx10•50

  @Renandx10Posted 11 months ago

  put width: 100vw;height: 100vh; in the body with flex display, align item : center and justify content :center

  0