Umesh Suwal• 180
@umeshsuwal
Submitted
What are you most proud of, and what would you do differently next time?
..
What challenges did you encounter, and how did you overcome them?
..
What specific areas of your project would you like help with?
..
Diego Hernández
@dieherram
All comments
- Diego Hernández• 80
@dieherram
Posted
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.
1 - Aiswariya S• 40
@Aiswariya3a
Submitted
What are you most proud of, and what would you do differently next time?
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.What specific areas of your project would you like help with?
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?
Diego Hernández• 80@dieherram
Posted
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.
0 - RozangelaPeixoto• 30
@RozangelaPeixoto
Submitted
What are you most proud of, and what would you do differently next time?
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?
- Responsibility is a recurring theme that always bothers me, although the project is simple, it taught me a few things about this subject.
- Figma desktop is a big mystery to me, I always worked in the web version and did pretty good, but this time I felt lost especially about the typography.
What specific areas of your project would you like help with?
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.
Diego Hernández• 80@dieherram
Posted
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 🙃.
1
