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

Profile Card Component

Pravin M D 140

@pravintargaryen

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Please Review and Give Feedback

Community feedback

Christian 970

@FLCHRIS

Posted

Hi there! Congrats on completing this challenge!! 🥳

Your solution is good, but it can be improved.

HTML:

Your blue image background, You shouldn't have alt text, because it doesn't add value to your page, it's just decorative. The correct way would be: <img src="./images/bg-pattern-card.svg" alt="" class="cover-image">.

Header elements implements six levels h1-h6, with h1 being the most important and h6 being the least important. avoid omitting header levels, your page should start with the header h1 and successively with h2...h6. More info here.

CSS:

Your styles are in your index.html, that's ok, but the correct way would be to have it in another file, in this case styles.css

I didn't see a reset in your css file, I recommend you use it, using it will save you future headaches when designing your page. Here some resets:

I hope I've helped! 🙃

Happy coding! ✌️

Marked as helpful

1

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