https://www.frontendmentor.io/challenges/news-homepage-H6SWTa1MFl

What are you most proud of, and what would you do differently next time?

What I’m most proud of: I’m proud of successfully completing the Frontend Mentor challenge while maintaining a clean and responsive design. I was able to implement a consistent layout, follow the provided design specifications closely, and ensure my solution worked well on both mobile and desktop views. I also used semantic HTML and organized my CSS in a modular way, which helped improve code readability and maintainability.

What I would do differently next time: Next time, I would focus more on accessibility features such as ARIA labels and keyboard navigation. Additionally, I’d like to integrate more advanced CSS techniques (like custom animations or transitions) to enhance interactivity. Time management was also a challenge, so I would plan my development timeline more efficiently by breaking the project into smaller, prioritized tasks.

What challenges did you encounter, and how did you overcome them?

One of the main challenges I encountered was aligning elements precisely according to the design specifications provided in the Frontend Mentor challenge. At times, small spacing or layout issues would appear differently across screen sizes, which required careful use of media queries and Flexbox/Grid properties to fix. I overcame this by continuously testing and adjusting the layout using browser developer tools and referencing the design guidelines closely.

Another challenge was managing the CSS structure, especially as the styles grew more complex. To handle this, I adopted a more modular approach by grouping related styles together and using clear class naming conventions. This helped keep the code organized and made debugging much easier.

Lastly, debugging some responsive issues on mobile devices took extra time. I used device emulators and tested on multiple screen sizes to ensure a smooth and consistent user experience.

What specific areas of your project would you like help with?

I would appreciate feedback on the following areas of my project:

Responsiveness: While I used media queries to adapt the layout for different screen sizes, I’m not entirely confident that all breakpoints are optimized. I’d like help reviewing whether the layout adapts smoothly across a wide range of devices.

Accessibility: I did not fully implement accessibility features like ARIA roles or focus management. I’d like suggestions on how to make the project more inclusive and accessible, especially for screen reader users.

Code Optimization: I’m interested in improving the efficiency of my CSS. If there are any redundant styles or better ways to structure my CSS for scalability and performance, I’d appreciate pointers.

Best Practices: Any feedback on my file organization, naming conventions, or general HTML/CSS structure would be helpful. I want to ensure I’m following best practices for maintainable front-end development.