Design comparison
Solution retrospective
I built a responsive blog preview card as part of the Frontend Mentor challenge. The card displays an article's title, publication date, author, and description in a visually appealing way. I used HTML and CSS for the structure and styling. The card has a modern design with rounded corners, shadows, and flexible layout. This project helped me practice creating responsive designs and structuring content effectively.I learned how to use Flexbox to center content on the page, which made the layout responsive across different screen sizes. I also improved my understanding of box-shadow and border-radius properties to give the card a clean and modern look.
What challenges did you encounter, and how did you overcome them?One of the challenges I faced was making the design responsive while maintaining proportions across devices, which I resolved by adjusting padding and max-width settings. This project deepened my understanding of CSS design principles and how to structure components more efficiently.
What specific areas of your project would you like help with?I would like help with optimizing the responsive design of my project, particularly for smaller screens such as smartphones. While the card layout adapts to larger devices, I feel the spacing, padding, and text scaling could be further refined to improve readability and overall presentation on mobile. Additionally, I'd appreciate guidance on improving accessibility features, such as ensuring adequate color contrast and implementing best practices for screen readers. Lastly, any advice on performance optimization—especially for minimizing page load times and handling assets like images more efficiently—would be greatly appreciated to enhance the user experience across different devices.
Community feedback
- @huyphan2210Posted about 1 month ago
HI, @Srikathyayini
I checked out your solution and I have some thoughts:
- Semantic HTML: It's important for accessibility, particularly for screen readers. Using elements like
<header>,<nav>,<article>,<footer>, etc. instead of<div>provides structure and meaning to your content, making it easier for assistive technologies to interpret. - Color Contrast: At this stage, you don't need to worry too much about color contrast since it's more of a design-focused issue. Right now, I'd recommend concentrating on making your solution closely match the design of the challenges. You can address color contrast once you're more comfortable with the other aspects.
- Responsive Design: It would be helpful to explore media queries and CSS relative units, like
rem,em, and%, which help ensure your designs adapt to different screen sizes. Also, CSS functions likecalc()andminmax()can enhance flexibility, and attributes likewidth,height, andpaddingcan be adjusted using relative units. Additionally, researching the mobile-first approach will improve your understanding of responsive design principles. Spacing and Layout: For things like spacing, padding, and text scaling, if you're unsure how to proceed, I recommend checking out design systems like Material Design, Bootstrap, or Tailwind CSS. Studying their documentation will give you useful insights that you can apply to your solution.
Hope this helps!
0@SrikathyayiniPosted about 1 month ago@huyphan2210 Thank you for taking the time to review my solution and for your valuable feedback. I really appreciate your insights, especially regarding semantic HTML. I'll definitely work on incorporating more semantic tags like <header>,<nav>, <article>, and <footer> to improve the accessibility and overall structure of my code. It's a great reminder to keep in mind how assistive technologies interact with the markup.
For color contrast, I agree with your suggestion to focus more on matching the design at this stage and improving those aspects later. I’ll revisit contrast and accessibility concerns as I grow more comfortable with other elements of the design process.
Regarding responsive design, I'll take your advice and dive deeper into media queries, relative units, and the mobile-first approach. I believe this will really help in making my designs more flexible and adaptive. Exploring CSS functions like calc() and minmax() sounds particularly interesting, and I'll be sure to look into them to further enhance responsiveness.
Your suggestion to check out design systems like Material Design, Bootstrap, or Tailwind CSS is very helpful. I’ve been meaning to familiarize myself with these frameworks, and I’m sure they will provide a strong foundation for improving my layouts and spacing.
Thank you once again for your thoughtful feedback! I’ll be incorporating these suggestions as I continue to work on improving my solutions.
1 - Semantic HTML: It's important for accessibility, particularly for screen readers. Using elements like
Please log in to post a comment
Log in with GitHub
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