..
What challenges did you encounter, and how did you overcome them?..
What specific areas of your project would you like help with?..
..
What challenges did you encounter, and how did you overcome them?..
What specific areas of your project would you like help with?..
You are quite close to the original design, it has happened to me that not having access to the Figma file I have not been able to achieve a pixel perfect design, which is why I will implement improvements.
What I'm most proud of:
I'm proud of how I effectively utilized CSS techniques such as hover effects and flexbox layout to create a visually appealing and interactive blog preview card. The implementation of these features adds an extra layer of interactivity and polish to the design, enhancing the overall user experience.
What I would do differently next time:
Next time, I would aim to improve the accessibility and responsiveness of the project further. While I ensured basic responsiveness with meta tags and flexible units, I believe there's always room for improvement in making the design more accessible to a wider range of users across different devices and screen sizes. Additionally, I would explore more advanced CSS features and techniques to further enhance the visual aesthetics and functionality of the project.
What challenges did you encounter, and how did you overcome them?Challenges Encountered:
One challenge I encountered was handling the size of images within the blog preview card.
How I Overcame Them:
To address this challenge, I employed CSS techniques such as setting maximum width and height properties to control how the images were displayed within .illustration img
. Regular testing and tweaking were also crucial in fine-tuning the image sizes to achieve the desired aesthetic while maintaining optimal performance and user experience.
Implementing Shadow Animation
Question: I'm trying to add a shadow animation to the card when the user hovers over the heading inside the card. I want the shadow to smoothly transition from a subtle shadow to a more pronounced one on hover. However, I'm not sure how to achieve this effect with CSS animations. Can someone provide guidance or code examples on how to create this hover effect using CSS?
Congratulations! I have a task to take from your code: implementing 'position' with both 'absolute' and 'relative' to position elements. I really liked what you've done. Typically, I use Grid and Flexbox.
I'm proud of my solution because Its very similar to what the design wanted and it didn't break on my responsive tests.
What challenges did you encounter, and how did you overcome them?Visually my project is good, but if I can improve my code please let me know. I would like to thank everyone in advance for taking the time to review and write a feedback.
Congratulations, I liked the inclusion of Google Lighthouse to measure accessibility and good practices in your code. I will definitely start using it 😀.
Seeing your solution led me to implement improvements in my original solution, I had not considered the Figma file 🙃.