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
Moa Davou 310

@moadavou

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 of how easy it was for me to write the HTML and CSS. Need to try out a harder challenge soon!

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

I'm bad at estimating the time it takes for me to complete a project. I tend to do other things, lose focus, or have a difficult time beginning the project.

In the future, I want to improve my focus so I can complete the project closer to the estimated timeframe.

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

Any suggestions and comments on how I can improve are welcome!

Community feedback

Vivek 190

@Vivek13130

Posted

hey , can you please tell me how you measured the width of this so correctly , i also made it today and it's quite similar but mine is little bit longer and less wider .

0

P
Moa Davou 310

@moadavou

Posted

@Vivek13130 Of course! My first try was awful so I deleted it 😅

You could use the provided Figma or Sketch files for this (free for a few challenges). But I found another solution because I have a free version and want to use the site longer before I upgrade to Pro.

Some screenshot programs (like Grenshot for Windows) show the width and height of the region you want to screenshot. If you use Mac/Linux you can probably find one on Google.

Photo editing programs show the width and height of a selected region. You simply make a selection of the distance you want to measure. I used Photoshop since I'm familiar with it. But Paint or Gimp (both free) works just fine. Photopea is also a good alternative. It's like a free Photoshop in your browser.

One thing I learned the hard way, is that since every element in CSS is contained in a box, a few pixels of spacing get added to each side of the element. So using exact measurements from one of the sources above won't work perfectly either. But it doesn't have to be pixel-perfect!

2
Vivek 190

@Vivek13130

Posted

thanks for the detailed reply , let's go with the thing - we are here to practice our front-end skills , not to be pixel perfect , everyone will have there own dimensions but the solution should look & work like the design .

anyways , will see you in the Results summary component challenge :) @moadavou

1

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