Order summary component with HTML and CSS

Community feedback

• 

  Panji•2,090

  @pperdana

  Posted about 2 years ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have some additional recommendations for your code that I think you'll find interesting and valuable.

  📌 Add <footer> tag as semantic HTML in code

  • The <footer> tag is another semantic HTML element that is used to define the footer section of a web page.

  • The <footer> tag should be used to wrap the content that appears at the bottom of a web page, such as copyright notices, contact information, or links to other pages.

  for example code:

  <footer class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" 
    target="_blank">Frontend Mentor</a>. 
    .................................
  </footer>
  

  In the example above, the <footer> tag is used to wrap the copyright notice, which is the content that appears at the bottom of the web page. This tells both human readers and search engines that the content inside the <footer> tag is the footer section of the web page.

  I hope you found this helpful!

  Happy coding🤖

  11
• 

  dimar hanung•560

  @dimar-hanung

  Posted about 2 years ago

  Hello! 🖐️ Well done on completing the challenge – you did it! 🌟

  I have some interest and feedback with your code

  That i like:

  1. I appreciate the similarity of your results with the design, a bit different in scale but still good
  2. html is pretty good, not too nested with combination semantic HTML 👍
  3. CSS Naming is also good, represent what is it for, like <div class="plan"> for plan section

  My Feedback:

  • Is not too responsive on screen < 380px, to fix it you can add flex-wrap: wrap in .plan

  • you can seperate file by folder to be more structured, for example:

    public/
    ├─ images/
    │  ├─ pattern-background-desktop.svg // and etc
    ├─ styles/
    │  ├─ main.css
    ├─ favicon.png
    index.html
    
    

  In summary, great work and an impressive solution - keep it up!, hope it's helpful 👍

  11