Recipe page solution

Community feedback

• 

  P

  Rupali•870

  @rupali317Posted about 1 month ago

  Hello @KonradJam

  I am peer-reviewing your code as per the request from FrontEndMentor team

  What you did well:

  • You have used rem instead of pixel unit for font-size which is excellent for scaling font sizes if users choose to scale the font settings.
  • You have demonstrated strong knowledge of HTML semantics. For instance, you have used <strong>, <time>.
  • In the mobile view, you have successfully centre aligned the bullets with the text.

  Suggested improvements:

  • The image should have a border-radius, especially in tablet and desktop mode.
  • Moreover, you can improve the loading time and bandwidth usage by resizing the image size. I have noticed that the intrinsic size of your image is 1312px X 600px. In the design the maximum rendered size of the image is only 656px X 300px. Larger resources increase the page load time and increase the bandwidth usage. You can consider resizing the image to 656px X 300px and there will be improvement in your page load. PageSpeed Insights will help you to determine such metrics.
  • Include width and height attributes for image in order to minimize cumulative layout shifts. Moreover, you can consider using webp image format rather than jpeg since the former has a smaller file size with the same image quality.

  <img src="./assets/images/image-omelette.webp" alt="A golden-brown omelette folded with fresh vegetables" width="375" height="171">
  

  • I noticed that you have used a class recipe-header-title for the <h1> and you have defined all the stylings within that class. In this case, you can just use the <h1> for styling. The class is not needed in this case. Elements have a lower specificity than classes. It is better to aim for lower specificity as much as possible. There is only one <h1> so the class is not necessary. Lower specificity is better for maintaining the styling and help the overall performance.

  h1 {
      font-family: 'Young Serif', serif;
      font-size: 2.25rem;
      font-weight: 400;
      line-height: 2.2rem;
      margin-top: 2.5rem;
      margin-bottom: 1.25rem;
      color: var(--stone-900);
  }
  

  • Your CSS should have CSS reset to provide a clean/consistent slate for the CSS stylings across all the browsers. You can refer to these articles. Joshua's CSS reset, Andy Bell's CSS reset
  • While you have CSS definitions for colors, you should consider CSS definitions for spacing, typography. You can refer to my CSS definition
  • You are fetching the font families via a link so far. With this approach, you have to rely on this external link to always be available. Another approach is you can consider downloading those resources in your project and load them via the CSS styling

  @font-face {
    font-family: "YoungSerif";
    src: url("./assets/fonts/young-serif/YoungSerif-Regular.ttf")
      format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
  }
  
  @font-face {
    font-family: "Outfit";
    src: url("./assets/fonts/outfit/static/Outfit-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
  }
  
  @font-face {
    font-family: "Outfit";
    src: url("./assets/fonts/outfit/static/Outfit-SemiBold.ttf")
      format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
  }
  
  @font-face {
    font-family: "Outfit";
    src: url("./assets/fonts/outfit/static/Outfit-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
  }
  
  

  Marked as helpful

  1

  ---

  

  P

  KonradJam•430

  @KonradJamPosted about 1 month ago

  @rupali317 thanks for your review it was very helpful.

  • With your suggestion about <img> I go little further, and I add srcset and sizes attributes to load different image size depending on device width. So phone will get smaller image and other devices will get larger image.
  • For other suggestions I will apply them in my next solutions.

  1

  

  P

  Rupali•870

  @rupali317Posted 30 days ago

  @KonradJam That is great. I am curious learn about the performance improvements after you improved the code especially related to the images

  1
• 

  Abdulrahmon Ogunwale•80

  @moyinoluwa001Posted about 1 month ago

  great

  0