Responsive News Homepage using HTML,CSS and JavaScript

Community feedback

• 

  Vatukah•190

  @Vatukah

  Posted 12 months ago

  ✋Hey ShoaibShuja,

  I just wanted to give you a huge shout-out for completing your latest Frontend Mentor challenge! 🎉.

  ---

  It's clear that you've put a lot of effort into this project, and the results speak for themselves.

  ---

  As someone who also tackles these challenges, I know how much effort it takes to get everything just right

  ---

  But,

  ---

  as coder i want tell you some tips that will help in further developing journey:

  ---

  CSS

  ---

  1. Minimize Repetitive Code:

  ---

  Reduce repetition by using common classes or mixins for similar styles. css

  .flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .news__header-navbar,
  .news__content,
  .news__content-article,
  .news__content-left,
  .news__content-right,
  .other__box {
    @apply .flex-center;
  }
  

  ---

  2 Responsive Design Improvements:

  • Ensure all elements adjust well to different screen sizes. Test the layout on various devices and screen sizes to ensure it looks good everywhere.

  ---

  • Consider using CSS Grid for complex layouts to take advantage of its powerful features for creating responsive designs.

  ---

  3 Font Size and Line Height

  • Use relative units for font sizes and line heights to enhance accessibility and scalability.

  body {
    font-size: 1rem; /* 16px */
    line-height: 1.5;
  }
  
  .news__content-article h1 {
    font-size: 2rem; /* 32px */
  }
  
  .news__content-article_text p,
  .next__news p {
    font-size: 0.9375rem; /* 15px */
  }
  

  3 Transition Properties:

  • Ensure transitions are smooth and specify which properties should transition to avoid unnecessary computations.

  .news__header-navbar {
    transition: transform 0.5s ease;
  }
  

  • your code

  ---

  .news__header-navbar {
      transform: translateX(100%);
       
      position: fixed;
      top: 0;
      left: 30%;
      width: 100%;
      min-height: 100vh;
      flex-direction: column;
      padding: 8rem 2rem;
      align-items: flex-start;
      justify-content: flex-start;
      background: var(--color-off-white);
  
      transition: 0.5s ease;    // here
    }
  

  ** HTML**

  ---

  • use of semantic html .Click here to know more about Semantic Html.

  ---

  Overall your code is good✨.

  ---

  Keep it up and do code daily to be best programmer😎. By applying and addressing above tips you can be better

  00