Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

https://github.com/Papi84/blog-preview/blob/main/Blog%20Preview/style.

Papi 230

@Papi84

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I’m most proud of how I implemented the design and user experience aspects of the project. Next time, I would focus more on optimizing the performance and loading times. Although the project functions well, I realized that certain elements could be streamlined or made more efficient. I would also conduct more thorough user testing to identify and address usability issues earlier in the development process.

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

Challenges Encountered:

  1. faced challenges with slow page load times due to unoptimized images and heavy scripts. To overcome this, I implemented image compression and asynchronous loading for scripts, which significantly improved performance.

2.Cross-Browser Compatibility Ensuring consistent appearance and functionality across different browsers was tricky. I tackled this by using CSS resets and testing extensively on multiple browsers, making adjustments as needed.

  1. Responsive Design: Achieving a responsive layout that worked well on both mobile and desktop devices required numerous tweaks. I addressed this by using flexible grid systems and media queries to adapt the design to various screen sizes.

How I Overcame Them:

  • For Performance Issues: I used tools like Google PageSpeed Insights to identify bottlenecks and applied their recommendations.
  • For Cross-Browser Compatibility: I used browser developer tools to debug issues and leveraged browser-specific prefixes and fallbacks.
  • For Responsive Design: I employed a mobile-first approach and utilized frameworks like Bootstrap to streamline the responsive design process.

Each challenge provided valuable learning experiences that helped refine my problem-solving skills and improve the overall quality of the project.

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

Well, I still have a long way to go, but I am dedicating my time to overcoming all challenges. I mostly need help with linking HTML to CSS, and I am learning how to address that issue.

Community feedback

@MitchellQuevedo

Posted

Hi! Looks good! Why are you having loading problems? it´s a simple project.

I think it would be handy to use flexbox in #preview-card-container so it gets easier to display the content inside. Padding issues would be easier to manage too!

#preview-card-container { display: flex; flex-direction: column; }

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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