News homepage - HTML5 , SCSS, Vanilla JS, Mobile First.

Community feedback

• 

  P

  Habeeb Kareem•740

  @olaide-hok

  Posted 4 months ago

  Great work!

  Some areas to improve on are:

  • there is an overflow on mobile view.

  • CSS Reset: the reset is overly verbose and includes many elements that may not be necessary. Consider using a more concise reset like Normalize.css or Modern CSS Reset. Alternatively, use a tool like PostCSS to automate resetting only the elements you use. I personally use Normalize.css.

  • Repetitive Media Queries: the media queries are repeated for similar breakpoints (e.g. $tablet-breakpoint, $desktop-breakpoint). This can be streamlined using mixins or utility classes. You could create a mixin for common breakpoints for example

  @mixin for-tablet {
      @media screen and (min-width: $tablet-breakpoint) {
          @content;
      }
  }
  
  @mixin for-desktop {
      @media screen and (min-width: $desktop-breakpoint) {
          @content;
      }
  }
  
  @mixin for-big-screen {
      @media screen and (min-width: $big-screen-breakpoint) {
          @content;
      }
  }
  

  and you could use like

  header {
      padding: 2rem 1rem 1rem;
      max-width: $tablet-breakpoint;
  
      @include for-tablet {
          max-width: $desktop-breakpoint;
      }
  
      @include for-desktop {
          max-width: $big-screen-breakpoint;
          padding: 2rem 2rem;
      }
  }
  

  • Lack of Utility Classes: there are repeated styles (e.g., display: flex, gap: 1rem) could be abstracted into utility classes for reusability. You could create utility classes such as:

  .flex {
      display: flex;
  }
  
  .flex-col {
      flex-direction: column;
  }
  
  .gap-1 {
      gap: 1rem;
  }
  
  .gap-2 {
      gap: 2rem;
  }
  

  and usage would be:

  #newsContainer {
      @extend .flex, .flex-col, .gap-1;
  }
  

  • the font-size for the h1 max-value is 56px, the clamp values can be updated.

  • the spacings as well could be updated for large screens.

  Overall, great work, well done.

  00