Simple HTML, CSS Card Using Position and Flex

Community feedback

• 

  Richard Ogujawa 👨‍💻•170

  @RichardOgujawa

  Posted over 2 years ago

  Hi Hossam,

  I'd recommend a few things, but feel free to disagree.

  For the HTML:

  • Include a main tag around the entire card. I know it may seem redundant, but I think it's always just best practice to put main around the main content of any project you build.

  • It's not a must but I'd recommend looking into BEM Naming Convention for naming classes. It makes it easier to collab with other developers and ensures that your classes are easy to read and understand. (https://codeburst.io/understanding-css-bem-naming-convention-a8cca116d252?gi=369393261570)

  I'd recommend looking into semantic HTML too, because you used <div> a lot, for example for the paragraph you used <div class="paragraph"> as opposed to using a <p> tag.

  • I'd also recommend looking into the picture tag, it's the recommended way to load images on your sites (https://blog.bitsrc.io/why-you-should-use-picture-tag-instead-of-img-tag-b9841e86bf8b)

  • Add alt text to your icons

  • Make sure the image alt text you write is a bit more descriptive. Think of it as you describing the image to a friend who is blind. What words would you use to help them understand what they cannot see.

  • If you want to write more semantic HTML I'd recommend using the <time> tag for the '3 days left' text on the site.

  For the CSS:

  • I'd recommend not using the hsl function in your color variables. You're better off just mentioning the values (i.e. '--soft-blue: 215, 51%, 70%' instead of '--soft-blue: hsl(215, 51%, 70%)'). This will allow you to later add an alpha value if needs be. For example, if you wanted the soft-blue colour to be slightly transparent, but used the variables the way you've written it, you wouldn't have that flexibility to do so. However, if you only used the values, then you could do something like this. 'color: hsl(var(--soft-blue), 50%)'

  • Use a CSS reset to make your HTML easier to style and work with. For example Josh W Comeau's (https://www.joshwcomeau.com/css/custom-css-reset/).And to this I'd also add recommend adding something like 'h1, h2, h3 {line-height: 1.1}', because the line-heights seem to get rather big on those heading levels.

  • A faster way to center elements on in a container is using 'display: grid', and 'place-content: center'on the parent or container element. If you don't get the result you want, I'd recommend changing out 'place-content: center' with 'place-items: center'.

  • Rather than using fixed units I'd recommend using relative units like em or rem, em for spacing, padding, margins, border-radii, etc., and rem for font sizes. This makes it easier to create more responsive designs because em and rem are linked to the font size, so if you simply adjust the font size in the html you will also be adusting the spacing, padding, margins, etc. all in one line of CSS, rather than having to adjust a bunch of different margins, paddings, etc.

  Hope this helps:)

  00

  Marked as helpful