Check out the Live Site here.
This is a solution to the News homepage challenge on Frontend Mentor. News homepage is an excellent opportunity to practice CSS Grid skills. There are lots of tricky decisions to make and plenty of learning opportunities!
Users should be able to:
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Bonus: Toggle the mobile menu
- Bonus: Added Dark Mode feature.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- JavaScript
- Mobile-first workflow
During the process of building the News Homepage project, I gained a deeper understanding of CSS Grid and its capabilities. I learned how to create a flexible and responsive layout that adapts to different screen sizes and how to use grid-area and grid-template-areas to create a more semantic and readable HTML structure.
I also practiced my skills in using Sass and its features like variables and nesting, which helped me write more concise and maintainable stylesheets.
Finally, I gained some insights into good design practices for news websites, such as using contrast to create visual hierarchy, and choosing appropriate font sizes and line heights for easy readability. Overall, the project provided me with lots of learning opportunities and challenged me to make tricky design decisions, which I believe will be valuable for my future front-end development work.
👤 Alamin
- Twitter - @CodeWithAlamin
- LinkedIn - @CodeWithAlamin
- Frontend Mentor - @CodeWithAlamin
- Github: @CodeWithAlamin
Feel free to contact me with any questions or feedback!
I would like to give a huge thanks to the Frontend Mentor team for creating such an amazing challenge. It was a great opportunity for me to practice my CSS Grid skills and learn new things.