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

@MorganMartin12

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


Any feedback on how to group my classes/html or anything else on the css side.

Community feedback

@pikapikamart

Posted

Hey, great work on this one. Layout in general looks great.

For your queries:

  • I would recommend using bem methodology. This helps you as a developer to create reusable and related classes. Since when using bem you only need a parent selector to which be referred to as "block" and elements inside it will be using the parent's name as a namespace for their name. Search this one up, this will help you a lot, also, use scss instead of regular css, this helps to implement bem faster.

Some other suggestions would be:

  • Don't change the root font-size you don't really need, just leave it by default.
  • Always have a main element that will wrap the main content of the webpage, this helps users to properly navigate your site, for this one, the wrapper selector could have used main element instead of div.
  • The alt for the person's image should have used their name as the value like alt="Victor Crest" when a person's name and image is present, always use their name as the alt value.
  • Also, do not forget to always include the alt attribute on the img element.
  • Always have a single h1 element on a webpage, for this, you could make the person's name an h1, but in a real site, you would use heading tag on the name but not h1. For this one, a better approach would be to use an sr-only h1. Take a look at Grace's solution for this challenge, inspect the layout and see how she uses the h1 element, also the css styling that is applied on that h1, copy those styling, you will use that a lot.
  • For the card-footer selector, since those are basically "list" of information about the user, you could have used ul element on it.
  • The text inside those information are not suited to be a heading tag, using p tag would be really great.

Aside from those, great job again on this one.

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