Basic Html and CSS

Community feedback

• 

  T

  Grace•31,230

  @grace-snowPosted almost 4 years ago

  hi Newton

  You're solution is definitely on the way, but not quite there yet I'm afraid.

  As already suggested, you don't need absolute positioning for this. I've got some more pointers for you too.

  HTML:

  • Any text should always be in a meaningful html element. At the moment, you've got text in divs and spans. Try to apply good html semantics.
  • In particular, think about those stats. Would they make sense if read on their own? No. So the numbers need to be accompanied by the words in the same html element. I suggest using a list or 3 paragraphs, then using spans inside those elements to wrap each number and word separately. Use classes on those spans to style them.
  • Alt text needs to be a meaningful description if it's a meaningful image like the profile picture. Use the person's name. And never write words like picture or image in your alt text descriptions, as they are already being announced as image elements.
  • Get all inline styles out of your html

  CSS

  • Use grid or flexbox to vertically and horizontally center your card
  • Remove all absolute positioning
  • I can see you're not understanding css grid yet as you're using it for rows of elements at the moment. Flex is for layout in one direction (X or Y axis). Grid is for when you need to lay out in both directions (X and Y axis)
  • Instead of height or width, use more flexible properties like min-height and max-width. That will be much more responsive. The one thing you could use a height on for this is that background pattern inside the top of the card.
  • Don't use margins for layout. Again, flexbox or grid are your friend here, as well as good old properties like text-align center, display block/inline-block.... There are lots of options
  • To position the profile pic, you can align it horizontally, then use a transform to move it up to overlap the background pattern.
  • Get a little margin around the card, or some padding on the body so the card can never touch the sides of the screen
  • Remember, margin is for creating space between elements, padding for space inside elements.
  • Try not to set explicit margins on each different element. Instead, think about reusable styles. What padding should always be between content and the edge of the card? Make it consistent. (Again, flex/grid can help with spacing things out pleasantly).
  • Don't forget small details like box shadow and letter spacing.

  I think that all gives you plenty to be looking at 😉 so I won't go on any more.

  Only once the card is all perfect should you concern yourself with getting the right position on those background images at every screen size. That's not very important, content, semantics and readability comes first.

  I hope this helps!

  Marked as helpful

  2

  ---

  

  Newton Lomar•75

  @newlomarPosted almost 4 years ago

  @grace-snow Thank you!

  I will review every single point that you said and remake this Challenge.

  I could see while I was doing it, that I was not understading exactly how the properties worked.

  Thank you a lot, Grace.

  0

  

  T

  Grace•31,230

  @grace-snowPosted almost 4 years ago

  @NewLomar no problem.

  They're all really common things that trip us all up at the beginning. Take your time and it will all start to fall into place.

  Inspecting in dev tools is a good tip too. I like to have it open on the side so I can make the viewport narrower and wider easily while inspecting the code

  1

  

  Newton Lomar•75

  @newlomarPosted almost 4 years ago

  @grace-snow Perfect! Thank you for all the tips.

  I already watched some code tutorials and I was pretty sure that I wasn't doing the right way while I was developing this Challenge, but I didn't know another way of doing it.

  Yours tips gave me some really nice points to look at, I really appreciate it!

  0
• 

  Sigma•240

  @TrashAlphonsePosted almost 4 years ago

  Hey Newton, thanks for sharing your code! I think there's no need to use any absolute positioned elements in this project. You're using flexbox to structure your card components. I'd prefer setting flex-direction to column (row is default) and center divs using align-items property. You could also set bg-pattern-card image right in the card div using background-image and background-repeat properties. By the way, here's a good Flexbox cheatsheet: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Happy coding! 😺

  0

  ---

  

  Newton Lomar•75

  @newlomarPosted almost 4 years ago

  @TrashAlphonse Thank you for the feedback, my friend! I will check this flexbox cheatsheet.

  I will do this challenge again until I really understand this basics concepts.

  0