Semantic HTML5 markup, CSS Lists, CSS Table, Media queries.

Community feedback

• 

  P

  Steven Stroud•11,890

  @StroudyPosted 2 months ago

  Some more feedback, I had a look you haven't got any resets in place we use these to make it easier to style. A Modern CSS Reset, to make your site responsive use EM or REM is most cases. Keep going and keep learning

  Marked as helpful

  1

  ---

  

  Huda Keshk•50

  @H-KeshkPosted 2 months ago

  Thank you for the advice and I will absolutely ♥

  0
• 

  P

  Teodor Jenkler•3,740

  @TedJenklerPosted 2 months ago

  Hi @H-Keshk,

  Nice project! I noticed that your site isn't fully responsive. I would strongly recommend looking into the mobile-first approach. Think of your project like a building, where the desktop view is the top floor. By making the mobile view stable and good, you can then expand the spacing to make your site fully responsive. This approach helps avoid the issue of adding numerous media queries to fix a "broken basement."

  Here are a few more tips:

  Use REM Instead of PX: It's generally better to use rem units instead of px. You can easily convert px to rem using a converter tool or by using ChatGPT to assist with the translation. Save the chat and be specific in asking it to translate px to rem without altering the code.

  Avoid Fixed Widths: Whenever possible, avoid setting fixed widths. Instead, use min-width or max-width to create fluid layouts that adjust more gracefully to different screen sizes.

  I hope these suggestions help improve your project!

  Best, Teodor

  Marked as helpful

  1

  ---

  

  Huda Keshk•50

  @H-KeshkPosted 2 months ago

  Those advices are very useful and I'll consider them in the upcoming projects, Thanks sooooo much ♥ @TedJenkler

  1
• 

  AriyanSep0_0•330

  @ARiYaNSEp0-0Posted 2 months ago

  Hello @H-Keshk. great job on this recipe page challenge. if you fix spacing like padding and margin your result get closer to design and also don't manually add vendor prefixes yourself use a postcss plugin "autoprefixer" this would add vendor prefixes for you.

  Marked as helpful

  1
• 

  Jani-B•370

  @Jani-BPosted 2 months ago

  Looks good.

  I like the good commenting on the CSS. That is something I very often forget to do. It looked very good.

  • I noticed that you forgot to change the width 55% for the media query 576px version. for the extra small just make the width something like 100% and everything should work just fine.

  It will also help you if you make the general layout mobile first. -> start doing the css for the mobile size. and then change it with media query for bigger screens. This way there is lot less problems as it is easier to adapt to the growing screen size than to screen size that gets smaller.

  I hope this helps :) Your solution is very nice !

  Marked as helpful

  1

  ---

  

  Huda Keshk•50

  @H-KeshkPosted 2 months ago

  thanks a lot, your comments are very encouraging, I were so terrifying as it's my first project here, but your comments are very respectful, Thanks ♥ @Jani-B

  0