Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog preview card

P
Patrycja 160

@Patrycja-dz

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I am most proud of the hover effects and animation. The gradient transition turned out exactly as I envisioned, creating a visually appealing effect that enhances user interaction. Next time, I would focus more on optimizing the CSS code and ensuring it is more modular. I would also invest more time in improving the accessibility of the project, making sure that it is fully usable by people with disabilities.

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

One of the main challenges I encountered was ensuring that the card was fully responsive on different screen sizes. Initially, I struggled with maintaining the layout on smaller screens. I overcame this by adopting a mobile-first workflow and using flexbox for more control over the layout. I also faced issues with the hover effects not working as intended, which I resolved by experimenting with different CSS properties and researching best practices.

What specific areas of your project would you like help with?

I would appreciate feedback on the following areas:

CSS Structure: Are there any suggestions for improving the structure and organization of my CSS?
Accessibility: Are there any accessibility improvements I could make to ensure a more inclusive design?
Performance: Any tips on optimizing the performance of the card, especially concerning CSS and image loading?

Any advice or suggestions on these points would be greatly appreciated!

Community feedback

jubileelin 100

@jubileelin

Posted

The transitions are really cool and unique! Are there any resources you would suggest to help learn how to implement them?

0

P
Patrycja 160

@Patrycja-dz

Posted

@jubileelin Hey, I can recommend a YouTube channel for you:https://www.youtube.com/watch?v=jgw82b5Y2MU&list=PL4cUxeGkcC9iGYgmEd2dm3zAKzyCGDtM5

https://www.youtube.com/watchv=Ph698ROGjbs&list=PLHKH6Uj0Seea4gnA8A80PvW9XAQkT37bD

and Kevin Powell channel. Additionally, you should read MDN for information about animations and https://www.w3schools.com/css/css3_animations.asp. Without memorizing it, I often type in the browser and search for sites like 'best 42 animations on hover.' When I see something interesting, I check how it was done and get inspired by it. For example, I might need different points on keyframes than in the original, or I might animate the background instead of the color. Good luck

0

Please log in to post a comment

Log in with GitHub
Discord logo

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