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 using React, Flexbox, and SASS.

#react#sass/scss
obasekiosa 120

@obasekiosa

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


I know a few already but any suggestions on where I can learn how to work with images and units in more detail.

This project really tested my understanding of images, positioning(absolute especially) and sizing units (relative units especially). I stumbled and stumbled a lot. Realized there is so much to learn.

Community feedback

@pikapikamart

Posted

Hey, really nice work on this one. The overall layout looks great.

Here are some suggestions for the site:

  • For this one or just in general, when you building a site, always have a single main tag to wrap the main-content of that page. For this one, the .main should be using a main tag instead of div so that the site will contain a main-landmark.
  • Those 2 blobs images could be used as background value. This way, you won't have to create those 2 div.
  • For the div that wraps the .attribution, use footer tag on it so that it will be nested inside in another landmark. So on this page, you would have a markup that looks something like this:
<main />
<footer />
  • Remove the position: absolute on the .main since it is not needed, this just hides the .attribution as well. Remove the position: relative from the div that wraps the .attribution. For this, you don't really need them. So you will have to remove the stylings:
position
left
bottom

Since the .App is using a flexbox already to center both items.

  • Also on the .App, remove the height: 100vh. Avoid using height: 100vh on a large container as this makes the element's height capped based on the viewport/screen's height. Instead use min-height: 100vh so that the element will expand if it needs to.
  • For this one, since the layout is showing a person's information and statistics, it makes sense to use the person's name as the person's img alt value.
  • You could use for now the h1 to wrap the person's name since a single h1 is needed for a site. If you feel like h1 is not suited on this, use h2 on the name and have a search about sr-only h1.
  • When wrapping up a text-content, make sure that it is inside a meaningful element like p tag or heading tag and not using like div, span to wrap the text.
  • For the .stats selector, if you look at the content of that part, those are "list" of information about the user, it would make sense to use a ul or dl tag in that one.

Aside from those, great job again on this one.

Marked as helpful

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