Blog Preview - HTML + CSS + media query

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted over 1 year ago

  I hope this feedback helps

  • think about the context of where this component would be used on a site. It is not a full Web page, just a single card component, likely to sit alongside other blog cards. That means it must not have a h1. The h1 element is for a page heading. This card would sit lower on a page, likely alongside similar cards, so should be a h2.
  • Alt text descriptions should not include words like "image" because it's on an element that already has an image role.
  • it's not an important thing for these challenges necessarily but becomes important on large projects much later. HTML head order really matters for performance! Harry Roberts has some recommendations about this but the main gist is that the title should be at the top straight after viewport meta and favicon last. This is a really minor thing but.i figure it doesn't hurt to mention it.
  • get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell has a good one you can look up and use.
  • Never write font size in px!. Not even once. Very important.
  • the card must not have a width. It should have a single max-width in rem. This ensures it can shrink narrower when it needs to and means the layout will work for people who change their default text size.
  • you can't have a hover style on a card unless the whole card is clickable. That means the interactive element inside the heading needs to fill the space of the card as explained in the inclusive components site
  • learning must not have a % width. Its extremely rare you'll use percentage widths at all to be honest. Instead learning should only use padding and the content to decide it's width.
  • there is no need for a media query in this challenge from what I can see. But for future reference media queries must be defined in rem or em not px; and you should almost always be working mobile first. That means mobile/smallest screen styles are the default, then override properties go in a min width media query. I've written a post all about these foundational principles

  32

  Marked as helpful
• 

  Bálint Korpai•620

  @kemenyfa-szu

  Posted over 1 year ago

  Hi @DanCodeCraft!

  I like your solution and thanks again for checking out mine!

  One minor observation of mine:

  • On smaller screensizes, the illustration image should be cropped when the card is not wide enough to contain it.

  As you mentioned: "I wasn't sure how to make the project to fit a smaller screen (375px) and I opted to start from the desktop version."

  • You can do it by not using media queries as the layout does not change on different screensizes, only font-sizes get smaller on smaller screens, but it does not mean that your approach is not good. I am a big fan of intrinsic design and love to use the clamp, min and max functions especially the clamp function, where you define an absolute minimum, an absolute maximum with a fix unit and an ideal in-between value with a dynamic unit such as: clamp(1rem, 5vw, 2rem); Check out this workflow if you like the idea :)

  Keep up the awesome work :)

  12

  Marked as helpful
• 

  Roraima Lugo González•510

  @roraima1986

  Posted over 1 year ago

  Congratulations on finishing the challenge. I like how it looks on you, keep practicing.

  Thanks to you, I realized that I didn't hover the shadow on the card, I've corrected it. 😅

  20