✋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
- 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;
}
.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