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 Vue Component written in typescript

Ryan 30

@Ryoliveira

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?

using flex box to get all the elements to play nice together.

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

I didn't like setting the text to black for most of the text. Then I realized that they would all inherit the color from the "container" class and I would just have to override one of the text colors

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

How could I better structure my scss?

What are some ways I could consolidate my flexbox definitions, could I have wrapped most of the elements in another tag and just used flexbox there?

Any suggestions to improve my code/html/css?

Community feedback

@Pixelazation

Posted

The shade of yellow used is quite different, but the resulting layout is more or less the same. Nice use of component based structure with Vue. As for organizing the code, maybe you could try grouping other related elements together. For example, the title, description, and date could be grouped together in one div. Overall, it's still readable and the fairly accurately copied the mockup.

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