Profile Card Component

Community feedback

• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 9 months ago

  Congratulations on completing your Profile Card Component project, Kaushal! 🎉 Your dedication and attention to detail in implementing this design from Frontend Mentor is commendable. Here are some best practices and recommendations to further enhance your project:

  • HTML Structure and Semantics:

    • Good use of semantic elements like <main>. You can also consider using <figure> for the profile picture and <figcaption> for the name and location, as they make a logical group.
    • Use <section> tags for different sections of the card like profile information and status to improve the structure and readability of your HTML.

  • CSS Best Practices:

    • Organize your CSS properties consistently (e.g., positioning, box model, typography, visual). It makes your code easier to read and maintain.
    • Avoid using absolute units like px in media queries; instead, use relative units like rem or percentages for better scalability and responsiveness.

  • Responsive Design:

    • Test your layout on various devices to ensure that it's responsive and looks good on all screen sizes. Pay particular attention to the background patterns and how they adapt to different screen sizes.
    • Consider the readability of your text on smaller screens, ensuring that font sizes are legible.

  • Accessibility:

    • Make sure that the color contrast of your text against the background meets accessibility standards for readability.
    • Use alt attributes effectively in images to provide meaningful descriptions for screen readers.

  • Performance Optimization:

    • Optimize your images for faster load times, which is especially important for users on slower connections. Tools like TinyPNG can help compress images without losing quality.

  • Code Cleanliness:

    • Remove commented-out code to keep your codebase clean and maintainable.
    • Keep your indentation and spacing consistent throughout your HTML and CSS files for better readability.

  References for Further Learning:

  • HTML and CSS Best Practices: MDN Web Docs
  • Responsive Web Design: A List Apart
  • Accessibility Guidelines: Web Content Accessibility Guidelines (WCAG)

  Keep challenging yourself with new projects and continue refining your skills. You're doing a great job, and I can't wait to see what you'll create next in your web development journey! 💻🚀

  Marked as helpful

  1

  ---

  

  Kaushal Kishore•150

  @KaushalSonicPosted 9 months ago

  @petritnuredini Thanks for feedback and suggestions, that's a lot to me, but I assure that I'll use it in my next solutions. Thanks again.

  0
• 

  Olaniyi Ezekiel•7,580

  @Ezekiel225Posted 9 months ago

  Hello there 👋 @KaushalSonic.

  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 hope this suggestion is useful for future projects.

  Other than that, great job!

  Happy coding.

  Marked as helpful

  1

  ---

  

  Kaushal Kishore•150

  @KaushalSonicPosted 9 months ago

  @Ezekiel225 Thank you very much, I appreciate your suggestion, I added it, I also manage to fix the background image displacement issue by using viewport units and added h1 header tag for the name (causes warning before that is must have atleast one h1 tag) and added box-shadow also. :)

  0