blog-preview-card-main-HTML-CSS

Community feedback

• 

  P

  webdevbynight•410

  @webdevbynightPosted 6 months ago

  Some feedback:

  • you should better organise your code by grouping images and stylesheets (and scripts when doing JavaScript) into dedicated subdirectories, just like that:

  Your project
  ├── index.html
  ├── css/
  |   └── styles.css
  ├── images/
  |   ├── some-image.svg
  |   └── another-image.webp
  └── js/
      └── script.js
  

  ;

  • when declaring font families, you do not need quotes if the font name does not contain any spaces (for example: font-family: Figtree;) and, by the way, since Figtree is not a serif font, the generic font to declare is sans-serif;
  • you should avoid pixels to declare font sizes and instead use relative units such as rem for accessibility purposes;
  • you should try to use relative units for paddings, margins and dimensions for the design to be elastic;
  • the text-align: start declaration is useless, since start is the initial (or default) value of the text-align property, same for flex-direction: row, since row is flex-direction initial value: do not hesitate over checking the initial values of each CSS property on MDN;
  • the justify-content: start is not needed here;
  • when using ampersands (&) within a text, it is better to code it with the appropriate HTML entity (&), since & is a special character in HTML (and XML) with which any HTML (and XML) entity starts;
  • to improve the semantics of your HTML, you should learn about the article element and the time element.

  Marked as helpful

  1

  ---

  

  Wuffskyarts•60

  @WuffskyartsPosted 6 months ago

  @webdevbynight This is insanely helpful! Thank you so much for the feedback :)

  0