Skip to content
Submitted 4 months ago

Blog Preview Card with HTML and CSS

accessibility
AllanKyleV•80
@AllanKyleV
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I'm proud that I finished this second challenge faster and more easily compared to my previous one. I can see some progress at least. Next time? I think I should experiment more to better understand how different elements should behave in a layout.

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

The first challenge I encountered was figuring out the right width for the div container to match the challenge preview. Not to mention, I was also experimenting with the proper margin and padding to use. Thanks to the style guide, of course, for providing a helpful reference for fonts, colors, and other design details.

To overcome this, I experimented with different width values, used DevTools to inspect element sizes, and adjusted the padding and margin until the layout closely matched the preview.

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

Experimenting with the proper values to closely match the challenge preview is time-consuming and requires a lot of trial and error. Is this just the way it is, or is there a way to improve the process?

Code

Please log in to post a comment

Log in

Community feedback

  • Dheerendra Kumar•90
    @acekant

    Hello AllanKyleV, I am Dheerendra Kumar, frontend mentor as you. You mentioned that you need help in pixel perfect design making or getting design as close as to solution. Well you can use some tools like microsoft powertoys. it a basic tools software which contains a tools name ruler which can be turn on by run 🪟+ctrl+shift+M, a tool bar will be affear no go to desgin file of challege, for example mobile design and zoom out or zoom it so that its with get close to 375px when you mesure using the tool and after this now you can calculate the width of other element easily with reference of desgin and now open brower open dev tools set width to 375px on this. or you can use simple same width like if you zoom the image of design and the width of image is increase measure it using tool and make your browser window to the same width of the design now all set.

    If you need futher help on this topic don't hesitate to ask

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