Responsive News Homepage using HTML,CSS and JavaScript
Design comparison
Solution retrospective
The Layout was a bit confusing, but CSS's flexbox did the trick.
What specific areas of your project would you like help with?Any feedback would be appreciated.
Community feedback
- @VatukahPosted 5 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
- 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
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord