Blog preview card main

Community feedback

• 

  Mohammed Fakih•1,590

  @javascriptor1Posted 10 months ago

  Hi Nouran,

  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 contains and choose the semantic element accordingly. Here are a few examples to make this clear ;

  1- use the main tag for the main part of the document instead of div. A main landmark identifies the primary content of the page. You can read more on main tag here

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

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

  CSS

  • The font required for the challenge is available with downloaded resources under the assets folder. Try to use font-face instead of importing the font from the Google fonts website.

  -For mobile view @ (375px), there will be no margin from the right/left of the card. This is because you set a fixed width for the card(375px). The width should be less than 375px for mobile design so the card will have the required space from right/left. When you reduce the width to say 334px , the image needs to have width:100% so it does not get outside of the card.

  Keep coding and good luck.

  MKF

  Marked as helpful

  1