Order Summary

Hello there 👋

HTML 📄

• avoid using <p> tags for small text (i.e <p class="info">Annual Plan</p> <p class="price">$59.99/year</p>). Rather use <em> or <strong> or <small> to make it to more meaningful element and improve the accessibility of the website.

• Always provide a meaningful and humanly understandable descriptive text about the image for the alt attribute of the <img> tag. Never leave it empty since it can raise some accessibility issues.

CSS 🎨

• Give some padding to the <main> tag. So, the card doesn't spread until it touches the screen, which will improve the look of the site. for example

main {
       padding: 1em;
}

Other than these, things are looking fine.

I hope this was helpful 😊

HAPPY CODING

Hi @palmettophoto. I checked your code. It's a good solution. Keep coding. I've some suggestions to you. I'm also struggle responsive design, I think we'll understand this concept step by step.

1 -

 <main>
    <div class="card">

It would be better:

 <main>
    <section class="card">

We can separate the main part by using section tags. This way it'll be a clear structure.

2 - You use a very much nested structure. You don't need this. Keep it simple and focus on a simple solution. I also use lots of nested structure and it's a problem for me every time. We really don't need this. Most of the time, we'll use a container element for page layout and to style their child. We don't need a div for each component. Actually this is a milestone for good coding. Keep trying a simple solution.

3 - You can use this structure to add <a> tag: a:link, a:visited {} a:hover, a:active {} Also, you should use <a> tag with :link pseudo-class everytime (if the a tag is a link). I recommended this style to everyone because it's a good way to improve coding skills.

4 - You can check other good solutions. It's the best way to collect some perspectives. You can check this code for a clear solution: Katie Sayers' solution

I hope these'll help you to improve your perspective. Keep coding. All the best.