HTML SCSS VANILLA JS

Community feedback

• 

  P

  Christopher Adolphe•620

  @christopher-adolphe

  Posted about 3 years ago

  Hi @Alucard2169,

  You have done a good job overall. 👍 Here are a few things that I have noticed and you might want to check in order to improve your solution.

  HTML:

  • The <div> elements for main-card, stats-card and about-card could be replaced by <section> elements for better semantic.
  • A <progress> tag already exists in HTML. You could have used that instead of styling it with a <div>. It will make thing easier to manage when the progress is dynamic. Read more here
  • You really don't need a separate main navigation for mobile. You can use the same markup and adjust the styles using media queries.
  • The modals are missing a backdrop. This will prevent users from interacting with other elements of the page because at the moment users can see both the Thanks for your support! and Back this project. You could refactor the html code for the modal like this:

  <div class="modal">
    <div class="modal__container">
      <div class="modal__content">
        <div class="modal__header">
        </div>
  
        <div class="modal__body">
        </div>
  
        <div class="modal__footer">
        </div>
      </div>
    </div>
  </div>
  

  .modal {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.15);
    z-index: 1000;
  }
  

  SCSS:

  • Since you are using Sass, try to move the styles for different components in dedicated files (a.k.a partials) and then import them in your styles.scss file. This will help keep your stylesheet more readable and maintainable in the long run.
  • Keep an eye on the level of nesting of your css selectors. Deeply nested selectors lead to overly specific and less reusable rules which are too reliant on the HTML structure. At the moment, most of your selectors are dependent on the <main> element. Try to keep the nesting to a maximum of 3 levels deep.

  JS:

  • Maybe you should consider to reset the form in the Back this project modal after the user has entered a pledge amount and has clicked on Continue.

  Hope this helps.

  Keep it up.

  12

  Marked as helpful