Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Cannot read properties of null (reading 'code')
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 Component Solution

Maylay 120

@Maylayloo

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


Hi! This is my second solution, I had a lot of fun doing it. Could you please tell me mistakes that I made? Especially with those background circles

Community feedback

@zahid3d29

Posted

Hey, good design mate. 90+ same design. But, I have suggestions about code.

Please use the 'p' tag when you have long text content. Otherwise, try to use the 'H' tag for a single text ex: Heading, sub-heading, title, etc. You can use H4, H5, and H6 tags for those 'p' or 'span'. And use "span" tags when it's already between another tag but needs different styling.

Thanks & Good luck! Zahidul

Marked as helpful

1
kxnzx 870

@kxnzx

Posted

@Maylayloo Congratulations with finishing your second challenge. You did a good job!

I have a suggestion for improvement:

Your page should contain one <h1></h1>. Instead of <p class="general-information"><span>Victor Crest</span>26</p> do this: <h1 class="general-information"><span>Victor Crest</span>26</h1>

Having an h1 on your page is very important for search engines, screen readers, SEO and people with visual visual impairment to know what your page is about. You always need one h1 in your page. Then (when needed) you follow it up with subheadings such as an h2, h3, h4 etc. It’s the hierarchy that matters. Just remember that the most important title on the page is an <h1></h1>.

Marked as helpful

1

@zahid3d29

Posted

@kxnzx You tell truth, but it's a card, not a full page. Only one h1 tag needs a full page for SEO. So, I think it needs an h4 or h5 tag for that content you mentioned. Because of the size of the content and it's not the main heading.

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