Blog preview card with simple CSS

Community feedback

• 

  Mohammed Fakih•1,590

  @javascriptor1Posted 10 months ago

  Hi Tringa,

  Congratulations on completing the challenge. Here are some notes which I hope you find helpful in improving your code :

  HTML

  • Use semantic elements like main instead of div. When you create a web HTML page , you are authoring a document that should convey a meaning. So always think semantically and check what content each part of the document cotnain and choose semantic element accordingly. Here are few examples to make this clear ;

  1- use main tag for the main part of the document instead of div

  2- use the time tag when your document contains a date/time.

  3- use abbr tag for any abbreviations like HTML & CSS in your document.

  • Even when using aria-label, you still have to use the alt attribute. An aria attribute can be used as an additional text alternative but doesn't replace the requirement for an alt attribute.

  CSS

  • For the font family, you have imported the font from Google and also used the locally hosted font in the assets folder. One should be enough unless you did this intentionally.

  • For font-weight , I can see you have used bold which is equal to 700. You also used 900. The requirement is to use 600,800 only.

  • The styling for body tag is overcomplicated and I guess you should consider re write it again. Here is a very simple and straightforward styling for the body tag if you want to place content in the middle of the page :

  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  

  -For mobile view (375px), the h1 content breaks into new line. Reduce the font-size used for mobile view.

  Keep coding and best of luck.

  MKF

  Marked as helpful

  0

  ---

  

  Tringa•10

  @tringakrasniqiPosted 10 months ago

  @javascriptor1 Thank you very much for the review, highly appreciate it. Already pushed some improvement changes from your suggestions.

  0