Blog Preview - HTML + CSS + media query

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted 9 months 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

  Marked as helpful

  3

  ---

  

  Adann Jacinto•790

  @DanCodeCraftPosted 9 months ago

  @grace-snow Hi there! I want to first take a second to thank you very, VERY much for your comment. You have no clue how much this made me learn since then. Let me reply to your points, in case you have the time to re-check my code at some point. :)

  • I do agree with the H1-H6 part. I honestly had the code originally with H2, but then I got a warning message from Frontend Mentor saying I was missing it - hence why I manipulated the size of the font. I changed it back to H2 and will ignore the warning message.
  • I made a different alt text. I have yet to dive into SEO, I only know the very basics of it.
  • I had no idea about the header hierarchy. I checked your recommendation and a few other sources I found online. Lesson learned and applied.
  • I didn't know about the modern reset. I didn't apply it yet to this project since it's too small, but it will be there from now on.
  • Fixed the font size. I first had the 62.5% method, but checked your link and I understood why it's not correct. Now I had the default size divided by 16. I hope that's the correct way.
  • I agree about the hovering state. But I did that way to follow the images provided in the challenge. Would you be able to clarify how I could manipulate the shadow outside the box by hovering the text? I couldn't find an answer to it.
  • Width fixed, lesson learned.
  • The media query was added because I wasn't able to have space around the card when reducing the size to 375px - which, by the way, is not fixed to min-width and applied in em, instead of px. I want to understand how to fix it because when I go smaller than that, the card fills the sides of the screen.

  Again: thank you very much!

  0

  

  T

  Grace•31,270

  @grace-snowPosted 9 months ago

  @DanCodeCraft the site I shared inclusive components card component explains how to make a whole card clickable using a pseudo element.

  0
• 

  Bálint Korpai•620

  @kemenyfa-szuPosted 9 months 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 :)

  Marked as helpful

  1

  ---

  

  Adann Jacinto•790

  @DanCodeCraftPosted 9 months ago

  @kemenyfa-szu thank you! This was very helpful.

  I had used media query for it, but somehow I did something different than what you suggested. I just pushed a new solution where I messed a little bit with the font-size when the width goes down.

  In any case, your message was the one that opened my eyes to it. Appreciated!

  1

  

  T

  Grace•31,270

  @grace-snowPosted 9 months ago

  @kemenyfa-szu never have a viewport unit as the central value in clamped font sizes though! That's inaccessible. The central value always needs converting to rem eg 1rem + 0.5vw

  Marked as helpful

  2
• 

  Roraima Lugo González•510

  @roraima1986Posted 9 months 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. 😅

  2