Responsive Card using HTML and CSS

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted 8 months ago

  Hi

  This doesn't need any media queries at all! The card should only have one max width in rem and no widths or heights anywhere except that avatar image. That's a really important concept to understand. Max width says "let this grow up to this point and no wider; but if there isn't room for that let it go narrower".

  The other thing I notice straight away is the text sizes in your solution look way off the original design. Try to get this much closer.

  Marked as helpful

  1

  ---

  

  T

  Grace•31,270

  @grace-snowPosted 8 months ago

  Looking at the code I see more problems actually

  1. This is a single card component it is not a full Web page. The card should be a div inside main, and the attribution should be a footer. No other landmarks are required and there definitely should be none inside the card component itself.
  2. Decide if the card image is important content or not. If it is, it needs a much better written description. There is a good post in the resources channel on discord about how to write good alt text that's worth reading.
  3. The tags/topic on the card (learning) is just a paragraph not a heading.
  4. When building single components like this it's important to think about the context of where they will be used. This card would never be a page title so you should know it cannot have a h1 within it. The blog title would need to be a h2.
  5. How would someone access this blog? You've missed the anchor link out that should sit within the heading, wrapping the name of the blog. Always take note when you see a hover style in a design — that means an interactive element is essential.
  6. It's better for performance to link fonts in the html head instead of css imports.
  7. Get into the habit now of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
  8. Never use width 100vw. All that will ever do is cause horizontal scroll bugs because viewport units don't account for scrollbars or device notches. So 100vw actually means "full width plus the width of the scrollbar". The body is always full width anyway so you don't need a width property at all.
  9. Never limit the height of elements that contain text, including the body. Min height 100vh is fine to use height 100vh is not.
  10. Font size must never ever be in px. This is extremely important.
  11. Remove all.media queries as stated above. In future challenges where you may need them, remember that media queries must always be defined in rem or em not px.
  12. The card must not have a width or height, only a single max width in rem. Let the browser do it's job and decide what height is needed based on the content.
  13. Nothing inside the card should have an explicit height or width except the avatar image. Remove any widths in px.
  14. To make the whole card clickable, the card will need to be position relative. Then the blog title anchor (link) will need a pseudo element absolutely positioned and sized to cover the whole card. That will make the whole thing clickable.
  15. Consider using the time element inside the published date paragraph.

  Marked as helpful

  1
• 

  Azizbek Dulobov•150

  @azizbektest011Posted 8 months ago

  hello @Portal681 your project is great

  1