Profile Card using plain HTML & CSS

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted over 4 years ago

  Hi Ana,

  Well done on your first challenge! This looks pretty close to the original design on mobile portrait but doesn't quite work on landscape. Not a big problem, but I can give you some pointers that should help ☺

  HTML:

  • alt attribute values should be left empty for meaningless or decorative images, like the bg pattern. That let's assistive tech know to not read it out.
  • alt text on the profile image needs to be meaningful - probably Victor's name would be best
  • it's important to never skip heading levels like h1 > h3. They provide meaning and structure of a document to search engines and assistive tech.
  • That said, looking at this content it should only have one heading imo. The name works as a heading, the small amount of content after that all belongs to Victor.
  • With the stats in particular, each pair needs to be inside one meaningful html tag - a paragraph or list item. Think about what makes sense as a heading. "80k" would not make sense as a heading, for example. Instead, I would wrap the number and word in one paragraph, then use classes on spans inside that tag to style the number and word differently.

  CSS:

  • the biggest issue here is using transforms to place everything. If you removed those and used a technique like flexbox it would fix your landscape mobile issue and overall have much more predictable results.
  • best practice in css is to keep specificity low by using single class selectors, not ids
  • try to use responsive units instead of pixel values where possible, especially for font sizes. That will really help people who need to zoom or adjust default text sizes.
  • Next time, try doing mobile first and placing your larger screen styles inside a min-width media query instead. This usually leads to shorter cleaner code in bigger projects.

  General:

  • there's no need to remove all the design files, readme, style guide etc. In fact, I find it's nice to be able to reference them in the repo. Your choi e though. By all means update the readme with stuff you've learned or whatever, but I always think people should add a link back to the frontend mentor challenge.
  • add a gitignore to repos and include ds store in there

  I hope all this is helpful for you, keep going with these projects you're well on your way!

  23
• 

  Miguel Barraza•0

  @mabarraza

  Posted over 4 years ago

  what i did was use the property: absolute which takes the element out of the page flow so no matter what you put the image wont be touched btw how did you managed to find the exact color and font? did you just try until you found it or...

  05