Recipe Page: HTML and Responsive Design Challenge

Community feedback

• 

  vladyslav-shulhach•170

  @vladyslav-shulhachPosted 4 months ago

  Great job on your project! The design is looking really close to the original, and it's clear you've put a lot of effort into it. I have a few suggestions that might help you take your code to the next level, making it even cleaner and easier to maintain. Here are a few things to consider:

  1. Embrace semantic HTML

  You're already doing a great job, but adding a little more semantic HTML can make a big difference. Using tags that describe the content (not just its appearance) can make your code easier to read, more accessible to visually impaired users, and better for search engines (SEO).

  For example:

  • Instead of <div id="recipe_background">, consider using <main> to wrap the main content of the page.
  • Swap <div> elements for sections of content with <section> for ingredients, prep time, or instructions.
  • You might also consider using <footer> instead of <div class="attribution"> for attribution content.

  These small adjustments can help anyone to read your code understand the purpose of each part. You can find a useful guide to semantic HTML here and here.

  2. Simplify styling with reusable classes & CSS variables

  I noticed you've got a lot of small classes in your HTML that are just for styling, like colour or font weight adjustments. While this approach works, it can make the code a bit harder to manage in the long run. Instead, creating reusable classes or using CSS variables can save time and keep things tidy.

  For instance:

  • Instead of using individual classes for every little styling tweak (<h3 class="brown_800 youngserif_font header_fontsize">), you could create one class like .subheading that combines those styles.

  • You can also use CSS variables at the top of your stylesheet with :root {} for colours, fonts, or other constants:

    :root {
      --brown-800: hsl(14, 45%, 36%);
      --young-serif: "Young Serif", serif;
      --header-font-size: 24px;
    }
    

    Then, use the variables with var() to keep things consistent:

    .subheading {
      font-family: var(--young-serif);
      font-size: var(--header-font-size);
      color: var(--brown-800);
    }
    

  This will make it easier to make changes later on, as you'll only need to update the variable instead of looking for each and every single instance in your stylesheet.

  3. Better use classes instead of IDs for styling purposes

  Using IDs for styling is fine, but they're best for unique elements because they have higher priority in CSS, which can make changes harder later. IDs are great for JavaScript, but for styling, classes are usually a more flexible and reusable choice.

  4. Try to explore Flexbox & Grid for layouts

  Using Flexbox and Grid can make your layout work much easier. These are powerful tools for organising the page layout without any unnecessary positioning tricks. If you haven't used them yet, you might want to give them a try. They give you more control over how elements are placed and aligned.

  Here are a couple of great resources to get you started:

  • Flexbox Guide on CSS-Tricks
  • Grid Guide on CSS-Tricks

  There's also a fun game called Flexbox Froggy that’s perfect for learning Flexbox interactively: Flexbox Froggy.

  Again, great job on your project! Keep up the good work and I'm sure you will get better and better. We are all learners, so let's grow together!

  0