Recipe Page - HTML and CSS

Community feedback

• 

  P

  Odiesta Shandikarona•300

  @OdiestaPosted 2 months ago

  Hi Lena Milena, great for completing the challenge. I want to give feedback which may improve your code.

  1. Use semantic main tag in recipe content and section tag for different section like ingredients, instructions
  2. Use css reset. it will make style across different browser same
  3. Use max-width instead of width, so it will resize responsively in small screen and stay with max-width in big screen
  4. Use css variable for color to make it easy to manage and change.
  5. You should set meta tag inside head into viewport to allow control over viewport. In vscode you could type ! and hit tab so it will add necessary code before starting

  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  

  6. Use media queries to set different style in different breakpoint. for example

  @media (max-width: 600px) {
    .recipe-content {
      padding: 0;
      margin-top: 0;
    }
  }
  

  as for learning responsive design check this course from web.dev Learn Responsive Design

  Marked as helpful

  0