Submitted
Blog-Preview-Card
- HTML
- CSS
What are you most proud of, and what would you do differently next time?
The blog preview card has a sleek and clean design that is visually appealing. The layout is well-structured using Flexbox, and it adapts well to different screen sizes with the use of viewport meta tags and responsive styling.
I successfully implemented a semantic structure in the HTML, ensuring that each section (like the image, tag, and user profile) is easy to understand. CSS was used effectively for styling elements like the card's border, spacing, and background colors.
The choice of the Figtree font gives the page a modern and professional look, complementing the blog content well.
By centering the card vertically and horizontally using Flexbox, the card adjusts beautifully across different screen sizes, which is a good practice for mobile-friendly design.
What I would do differently next time:
In the current design, the image is hardcoded into the HTML, and its resolution could be optimized for different devices. Next time, I would consider using responsive image techniques (`` element or srcset) to serve different images based on screen resolution.
Although the page is functional, it lacks proper accessibility features such as alt text for the images (especially for the banner image) and better color contrast. I would focus on improving these areas to make the site more inclusive.
While the inline CSS works, it can become unmanageable for larger projects. Next time, I would use an external stylesheet to separate concerns and improve maintainability.
The blog preview card could benefit from additional interactivity, such as hover effects on the card or buttons for user engagement, which would make the page feel more dynamic and engaging.
