Order Summary

Community feedback

• 

  Muhammadh•1,140

  @Mr-jawPosted almost 2 years ago

  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

  Marked as helpful

  0

  ---

  

  Tad Atkinson•160

  @palmettophotoPosted almost 2 years ago

  @Mr-jaw thanks for the feedback. Any idea why my screenshot is not displaying in the readme file? I've linked it just like my other projects.

  0

  

  Muhammadh•1,140

  @Mr-jawPosted almost 2 years ago

  @palmettophoto Hello 👋

  The read README file is a markdown documentation, So you have to rename it as README.md rather than README.txt

  I hope this helps

  Marked as helpful

  0

  

  Tad Atkinson•160

  @palmettophotoPosted almost 2 years ago

  @Mr-jaw thanks for your time and willingness to share!

  0
• 

  P

  Alper•1,010

  @adonmez04Posted almost 2 years ago

  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.

  0