html css javascript flexbox

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted 13 days ago

  I'm afraid this is missing essential html and css foundations. It's important to get feedback before moving on to the next challenge as I can see you are repeating the same mistakes each time.

  • all content should be contained within landmarks. This card should sit within a main landmark.
  • Indent your code consistently so it's easier to read and spot bugs. Your code editor can even do this formatting automatically for you with prettier.
  • the image doesn't need wrapping in an extra div. Keep the html structure simple, only adding extra elements when it's necessary for meaning or layout.
  • the img element must always have an alt attribute. Make sure you understand how and when to write a description and when it should be blank. Look up Craig Abbott blog article about alt text, it should help.
  • this card has a heading. You must use heading elements when they are appropriate.
  • you've missed the essential function of this card. The design clearly shows that it's meant to be clickable. It's purpose is to signpost (link) people to a blog post. Yet you've not included a link in here! There needs to be a link inside the heading, wrapping the blog title text.
  • once that's been added, you need to make the whole card clickable. To do that you make the card position relative and add an absolutely positioned pseudo element to the link that will cover the card.
  • I would expect the author image and name to be inside a div set to display grid or flex to get the alignment right.
  • never limit the height of elements that contain text, including the body. That's extremely important. The body in this needs a min-height 100svh (or vh) for the centering and that's all in terms of height. Note the difference between min-height and height. One is flexible the other is not.
  • exactly the same principle: the card must not have an explicit height either. But this doesn't even need a min-height. Let the browser do it's job and decide what height is needed based on the content inside.
  • similarly, the card doesn't need a width either. Giving elements fixed widths like this is not a robust way to approach layouts. Instead, give the card a max-width in rem. Note the difference between max width and width. Max width means the card can go narrower when it needs to like on small screens.
  • get into the habit of including a full modern css reset at the start of the styles in every project. The image doesn't need anything for its sizing except what is already included in the css reset — display block and max-width 100%. Look up Andy Bell's css reset, or Josh c Comeau's one. Read about them and use one of them.
  • font size must be in rem not px. See https://fedmentor.dev/posts/font-size-px/
  • the card should have padding on all sides (usually in px as this is a property you probably don't want to scale with the users font size). The children inside the card only need vertical margins. They shouldn't have side margins. If you're confused about when to use padding and margin there is a blog post at the same site I've shared above.

  Make sure you apply all these learnings to this challenge and all of the others you've done.

  Marked as helpful

  0

  ---

  

  Muhammad Bilal•30

  @bilalpirzadaPosted 12 days ago

  @grace-snow Thanks for putting the effort and writing it all. Really appreciate that. I will make sure to avoid this mistakes from now on.

  0
• 

  Merouanos•60

  @MerouanosPosted 13 days ago

  you should use figma while it's free , it will help you alot with the sizes and width

  Marked as helpful

  0