Responsive Blog card view page using Flexbox (Second challenge)

Community feedback

• 

  Tenzin Choeda•210

  @tenze21Posted 10 months ago

  some of my suggestions:

  • Everything seems fine to me and I didn't find much redundant code except where you have used font-size 16px as it is the default font-size of browsers and the flex-direction: row; which i think you have used in the author section which is also the default value for flex-direction.

  • you mean desktop and mobile by web and mobile version? if That's right I guess using @media query is the answer.

  • it's more advisable to use max-width instead of a fixed width for the main tag which will allow your card to shrink (responsiveness) if need be.

  • It is also preferred to set font-size in rem/em instead of px. checkout this article for more on it.

  • I am not sure if you have come across it but if not I am linking a youtube video by Kevin Powell on responsive web design here.

  Marked as helpful

  0

  ---

  

  Kintama1•20

  @Kintama1Posted 10 months ago

  @tenze21 Thank you so much for the feedback! I appreciate the suggestions

  0
• 

  hashiharis•100

  @hashiharisPosted 10 months ago

  @Kintama1,

  Great Job! Your design looks amazing !

  I would like to suggest some best practices:

  • In the HTML markup always use heading levels in the order of h1 to h6. For eg: The title is the first heading so the first heading must be h1. Also for next headings, it's recommended to not skip the heading levels. So in your code for author name, instead of using h4, it's recommended to use h2. You can style both of them further using font-size and font-weight.

  • To make it responsive and use for for both web and mobile versions - my personal approach is to design it mobile first and then use media queries to adopt for larger screens.

  • I would also suggest as a next step to look into using css units like %, em, rems, vh, vw . This helps a lot in responsiveness on a deeper level.

  Hope this helps and Happy Coding !!!

  0

  ---

  

  Kintama1•20

  @Kintama1Posted 10 months ago

  @hashiharis Thank you so much! I thought the heading numbering was just to indicate size, thank you so much for the feedback and I will stark looking into the css units to understand when to apply them better. Have a wonderful day as well!

  0

  

  hashiharis•100

  @hashiharisPosted 10 months ago

  @Kintama1

  No worries , keeping the heading levels in the logical order is an important factor for web accessibility as well as for SEO. Here is an article that I found useful

  Marked as helpful

  0