Order Summary using HTML and CSS

Community feedback

• 

  Sönke Martens•120

  @RibosomPosted about 3 years ago

  Hi @thalesmaiaa, nice solution.

  Two minor problems, which could be improved: You could use box-shadow to add the missing shadows. Also the background-color change seems to be missing on the hover effect (on the "Change"-link and the upper button)

  Some css advice, you can use variables to help reuse values like colors. Adding variables to the root element can help a lot and makes it easier to change colors later if needed.

  example:

  :root {
      --color-primary1: hsl(225, 100%, 94%);
  }
  

  and use them on other parts in css with var. For example:

  background-color: var(--color-primary1);

  0
• 

  Cody Lewis Zites•570

  @zitescodyPosted about 3 years ago

  Hello, @thalesmaiaa. Welcome to Frontend Mentor! Below is my feedback:

  1.) It appears you only use H3 and p for your content. I would use H1 and p respectively. When writing HTML, it is best your headings follow a logical order. The purpose of heading tags is to give your page structure. Starting with H3 may confuse screen readers, as they may think "did I miss another heading somewhere?"

  2.) <div class="main"> should be <main class="main">. <main> indicates the nested content is the, well, main content of your webpage. In this instance, all of the content on your card would be the main content of this project.

  3.) <div class="attribution"> should be <footer class="attribution">. The same logic from above follows here. However, <footer> indicates this content isn't my main content, but is still relevant content.

  Wonderfully done on your first project. Welcome to the Frontend Mentor community. I love this platform and I hope you feel welcomed here.

  Please mark my feedback as helpful if you benefitted from my response. Happy coding!

  0