Recipe Page

Hey, very good job ! Your design matches perfectly ✅✅

Some tips about web accessibility :

Use HTML5 semantic tags to improve the document structure.

1. Image Container:

   • Replace <div class="image-container"> with <figure class="image-container"> and add a caption if needed using <figcaption>.

2. Header:

   • Add a <header> tag to group the title and description of the recipe.

3. Sections:

   • Use <section> for different parts such as ingredients, instructions, and nutritional information.

Ensure that your CSS colors provide good contrast for visually impaired users. Use tools like the Colour Contrast Analyser to check the contrast.

Add ARIA elements to improve navigation with screen readers. For example, use aria-label or aria-labelledby for important sections.

Ensure that links have descriptive text to clearly indicate their destination.

• For example, replace "Coded by Jesse Gile" with "Coded by Jesse Gile - Visit my website" to be more explicit.

Hi Jesse!

As you mentioned bullet point sizing and spacing -

padding-left can be used on the list element to add some space between the li bullet and the li content. To shrink the bullet itself, you can use font-size. I'll place some examples below:

li {
    ...
    padding-left: 1rem;
    ...
}

ul > li::marker {
    ...
    font-size: 0.8rem;
}

Hope this helps, and have a great day!