Profile Card using float

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted almost 3 years ago

  Hi

  I'm afraid this needs almost completely re-doing to make it responsive and make use of correct HTML semantics. Here are things that need changing

  HTML:

  • Use landmark elements. Minimally, that means use a main element for your card. If you'd included the Frontend Mentor attribution, that would go below in a footer. This is mentioned in your report and has a 'learn more' link in there
  • Img tags always need an alt attribute. You use this differently if an image is decorative Vs meaningful content (look it up)
  • Headings must always go in order and never skip a level. If this card was in a real web page, it might be appropriate for the heading to be a h3, but only if there are a h1 and h2 above it. As this is a single component on a page, use a h1. Think of headings like a contents page for a document. It will become extremely important to follow correct heading structure on full web pages
  • Use a hr for the divider line. Or use border top/bottom on another element. Don't ever add in empty divs to your html.
  • When thinking about translating a design into html, consider how the content would look and what it would be if it was totally unstyled. This Card would be an image, heading, some text and then a list with three bullet points at the end. That tells you those three stats at the end of the card should be a list with 3 list items, not headings and paragraphs. Another way to know it shouldn't be a heading is if you consider whether it would make sense as a heading on a contents page - 80K would make no sense as a heading, so cannot be one, and must be in the same meaningful element as the word that accompanies it (list item). That's what makes the content make sense.

  CSS:

  • Include a basic/modern CSS reset at the start of your stylesheet. This is always good to do as it sets some common defaults you'll want and removes some of the inconsistencies between browsers. (e.g. img tags set to display block instead of inline) Josh Comeau and Andy Bell both have good modern resets that you might want to look up.
  • Don't use floats. It's really rare you'll use floats at all in modern web development. It takes items out of the document flow and is a really outdated technique where it's very difficult to make layouts responsive.
  • Don't use absolute positioning to center a component like this. Use Flexbox or CSS grid
  • Similar, don't use relative positioning and pixel adjustments. That is not the way to create a good responsive layout and 99% of the time unnecessary
  • You should be centering text horizontally with a text-align: center on the card as all text within it is centered
  • Wrap the heading (person's name) and the age in one div and set that to display flex to line them up next to each other. If you do that you can use gap to create a little space between them. OR make them both display inline-block / inline-flex and use margin on one side of one of them to create the space between them
  • The stats list at the end, once it's been made a list can be display flex. To make the numbers stack above the words, you can wrap each in a strong tag and set that to display block so it has its own line

  I hope this is helpful. There will be more feedback beyond this, especially relating to accessibility but these are the most important points.

  It's really important you pause, learn more and refactor before continuing. At a guess I expect you've started learning frontend from some very old and outdated resources. Look at the Frontend Mentor resources page and there is loads on there that will really help you.

  Good luck

  11

  Marked as helpful