Responsive preview card component using CSS Flex

Community feedback

• 

  Richard Ogujawa 👨‍💻•170

  @RichardOgujawaPosted almost 2 years ago

  Hi Abdellhamid!

  Hope you're keeping well:) I really like how you've indented your HTML really makes it a lot easier to read, and I appreciate your usage of multiple h1s. I initially thought it was something that was to be avoided at all costs, but after reading some article have come to learn that it's actually a gray area. I'm someone who tends to err on the side of caution when it comes to these things though so for now I'll just stick with one h1 tag per page, but you definitely got me thinking and challenging what I believed to be true all this while which I like doing so thank you.

  However, I do have some suggestions for you. But these are just my opinion so feel free to take this on board or take it with a grain of salt, no hard feelings.

  In the HTML:

  • I'd recommend using a main tag instead of a div with a class of header, because you want to wrap your main content in a main tag as opposed to a div.
  • I'd recommend using an article tag for the stats preview component. The article tag is a tag used for components that can be easily understood without any information around it. In otherwords you can look at it without it being in the context of the full site and it ill still makes sense. This allows it to be easily reusable and distributable. For example, blog posts, articles, components, widgets, etc. More on it here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article
  • I'd recommend looking into BEM Naming Conventions for naming classes. It makes it easier for you to write your class names without having to think too much about it, and it also makes it easier for other developers to understand your classes, because the naming convention is quite a logical one. There are two articles I'd recommend reading on it, and once you read them you're pretty much set. The first one talks about how to write BEM (https://codeburst.io/understanding-css-bem-naming-convention-a8cca116d252 ) and the second one talks about common problems you may run into when writing BEM and how to overcome them (https://medium.com/fed-or-dead/battling-bem-5-common-problems-and-how-to-avoid-them-5bbd23dee319)
  • I'd recommend using a picture tag instead of just the image tag because it's a much better way to add responsive images to your websites instead of just relying on CSS. CSS simply scales up and scales down an image, so if you use only one image to cater for the fact that it would be on both larger screens and smaller ones, you'd have to use a high-resolution image in your src for the image tag. However, not all users need that high-resolution image, and would prefer to load a lower-resolution one because their device might be slow as is, or they may just be using a device with a smaller screen and therefore loading a high-resolution file would be overkill, because even though it's scaled down it's still a high-resolution file meaning it's a large file to load. More on all that here: (https://blog.bitsrc.io/why-you-should-use-picture-tag-instead-of-img-tag-b9841e86bf8b).
  • Icons and images (unless it's purely decorative) should have alt text attached to it. The only other time you may not want alt text on your icons is when it's beside text that already essentially describes what it is, such as an icon of a happy dog beside text that says 'happy dog' because if you include the alt text the screen reader would end up reading out "happy dog, happy dog.”
  • Also when writing your alt text write it as though you're describing the image on the screen to a blind friend so they feel like they too can see it.

  In the CSS:

  • Another way you could center something in a container is by using something like display: grid; place-content: center to get the same result. You could also just as easily use display: flex and place-content: center on the parent element, it’s completely up to you. Also if this doesn’t give you the result you desire you could also try place-items instead of place-content, and if that doesn’t give you the results you want you could look into justify-content: center, and align-items: center.
  • I'd recommend using em and rem units. Em units for things like padding, margins, border, etc. and rem units for fonts. They are both linked to the font sizes you use so with this method you can easily adjust the size of a lot of things on your page simply by adjusting the font-size in the html selector. Also because em is linked to the font-size, you don't have to scale up buttons if you increase the font-size, it'll do so automatically.

  Hope this helps:) And if you want me to explain anything a bit better just let me know, I was trying to keep this not too long, so I had to rush through some concepts. But like I said before, overall great work, and looking forward to seeing future builds.

  0