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 (HTML, SCSS)

Redened 40

@Redened

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'm proud that i got my solution as close to the design as possible, despite encountering walls for seemingly no reason, which upon further digging, seemed to have been caused by my inattention to superficial details.

Like how the design font i was provided with seemed to work despite my not using it properly in CSS (Didn't use @font-face). That little oversight caused me to uselessly spend a few hours trying to make the font look the same as in the design.

Will pay attention next time :D

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

Challenge: Making the solution identical to the design.

Overcome process: Rolling face on keyboard for 2 hours.

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

Writing cleaner code.

Understanding the screen width requirements in the solution instructions.

Community feedback

@MelissaZhuu

Posted

Looks great to me! I like that you included the hover animation on the Learning label too. Regarding the font, I always just use Google fonts to search up the font name and copy and paste the embed code. However, I guess given the font in assets, it probably makes a lot more sense to use that. I also like how your units are all responsive, that's something I could probably work on.

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