blog-preview-card-main

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

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

Clean and structured design: Your design is simple yet visually appealing, with well-placed elements like the author, the card image, and the card content. CSS skills: You've effectively used clamp() to make the text responsive and integrated custom properties (--primary, --gray-950, etc.) for a maintainable, scalable style guide. These are solid approaches to modern web design. Hover effect on the title: The hover effect that changes the color of the title to the primary yellow adds an interactive touch that enhances user experience. What I would do differently:

Improve spacing consistency: Some areas like .card_text and .card_title could have more consistent spacing across different screen sizes. You could explore using more clamp() or even CSS Grid for better control over the layout. Use more semantic HTML elements: For accessibility, try using HTML elements like , , and instead of . For example, you could use for the publication date to make it clearer that it's a date element. Image optimization: Ensure that the images are well-optimized for web performance. Using tools like WebP images or lazy loading (loading="lazy") could improve performance.

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

Challenges Encountered and How I Overcame Them

1. Positioning and Layout Adjustments:

One of the main challenges was getting the right layout and positioning of elements, especially ensuring that the design looks consistent across different screen sizes.

Solution: I used flexbox to create a flexible layout and ensure that the elements aligned correctly, centering both vertically and horizontally. I also made use of clamp() for responsive typography, allowing text to adjust seamlessly across different devices without needing separate media queries for font sizes.

2. Managing Spacing and Consistency:

Another challenge was keeping spacing consistent between elements, especially when dealing with margins and padding, which can become tricky with more complex designs.

Solution: I created custom CSS variables (--spacing-1, --spacing-2, etc.) to handle spacing. This made it easier to tweak the spacing later on and ensured consistency throughout the design. Having these variables reduced the need for hardcoded values and kept the styling DRY (Don’t Repeat Yourself).

3. SVG and Image Integration:

Handling the zigzag patterns, which were SVG images, required careful manipulation to get them aligned as desired without disrupting the other layout components.

Solution: I used absolute positioning for the SVG images within their container and fine-tuned the position using top, right, transform, etc. This allowed me to overlay the images in the exact spot without affecting the flow of the content around them.

4. Accessibility Considerations:

Ensuring accessibility was a challenge because it’s easy to overlook small details like color contrast and semantic HTML.

Solution: I used semantic HTML where appropriate (like with alt text) and ensured high-contrast colors between text and background for readability. In the future, I would also look into improving the navigation for screen readers.