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

HTML CSS Profile Card

Jesse Ma 95

@jma26

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


Hey guys! There were a couple CSS properties I learned more about which were the background position for the two background-patterns that I could manipulate with background-position! Focused more on making sure the HTML semantics is "correct" instead of relying on divs for the layout.

I'd appreciate it if you can give your thoughts or opinions regarding the HTML semantics or CSS I could improve on!

Thank you!

#happycoding

Community feedback

@MikeBish13

Posted

Great job - your solution looks really good!

You are definitely on the right tracks with using semantic HTML and it is a great habit to get in to. Just be careful about overdoing it and putting in semantic tags for the sake of it. For example, you have a <header> tag for the background section at the top of the card but, in my opinion, the tag should usually be reserved for encapsulating things such as logos, navigations, etc. Here's a line taken from MDN:

"<header> element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements."

Similarly, it's great that you're using <h> tags for your headings. But you can resize them manually, so that they match up to the design - some of your sizings are a bit off. But obviously make sure you're resizing each of them proportionally so that you maintain the hierarchy.

Hope that helps and keep up the good work!

Marked as helpful

1

Jesse Ma 95

@jma26

Posted

@MikeBish13 Thank you! For this case, I probably did not need the header tag and leave the img as is.

#happycoding

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