Responsive News Homepage using HTML,CSS and JavaScript

✋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