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

Blog Preview Card HTML & CSS Foundations | Frontend Mentor Challenge

@najahaja

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 the effective implementation of the blog preview card design, which not only looks visually appealing but also functions well across various devices. By paying close attention to design elements like color schemes, typography, and spacing, I was able to create a cohesive and professional layout that aligns with the project’s requirements. Additionally, adhering to web development best practices, such as maintaining clean code and a consistent style, has laid a strong foundation for future updates and collaboration. However, looking ahead, I would focus on enhancing accessibility features to ensure that the design is inclusive for all users, including those with disabilities. I would also conduct more extensive testing across different devices and browsers to guarantee optimal performance and responsiveness. Furthermore, optimizing image sizes and performance metrics would be a priority to ensure faster load times and a better user experience overall.

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

I faced several challenges during the project, including ensuring the blog preview card was responsive on different devices. Initially, the design didn't adapt well to smaller screens, so I used media queries to improve its responsiveness. Optimizing image load times was another issue; by adopting modern formats and lazy loading, I reduced load times without compromising quality. Additionally, aligning text and visual elements was tricky, but using Flexbox helped achieve better alignment and spacing. These solutions resulted in a more polished and user-friendly design.

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

I would appreciate feedback on several specific areas of my project. Firstly, I’m seeking input on the responsiveness of the blog preview card. I’ve used media queries to adapt the design for various screen sizes, but I’m unsure if there are additional adjustments needed for optimal display across all devices. Additionally, I’ve focused on performance optimization by resizing images and implementing lazy loading. Any suggestions for further improving load times or code efficiency would be valuable. I’m also interested in enhancing accessibility features; if you could review the current implementation and recommend any improvements for better inclusivity, that would be helpful. Finally, I used Flexbox to manage layout and alignment, but I’m looking for advice on refining these aspects, especially to handle varying text lengths more effectively. Your insights into these areas would greatly help in improving the project.

Community feedback

MikDra1 6,050

@MikDra1

Posted

Hi, here are the tips from me:

  • Even for smaller projects please use external css file. It is easier to read and manage.
  • There is an easy way of making card responsive and here is how you can do this, :
.card {
width: 90%;
margin: 0 auto;
max-width: 600px;

It will prevent card from growing bigger then 600px but on smaller screens it will be 90% of the viewport.

Here is also my way of centering the card:

.container {
display: grid;
place-items: center;
min-height: 100vh;
}

Hope you found this comment helpful 💗

Good job and keep going 😁😊😉

Marked as helpful

0

@najahaja

Posted

Thank you so much for the feedback and tips! I really appreciate you taking the time to provide such detailed suggestions. I’ll definitely consider using an external CSS file for better readability and management. Your advice on making the card responsive and centering it using grid layout is really helpful. I'll apply these techniques to improve my future projects.

Thanks again for your support and encouragement! 😊💗@MikDra1

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