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

Responsive blog preview card using bootstrap

Gakii 470

@G-Gakii

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 glad I was able to create a responsive website using Bootstrap.

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

  • I did not know how to add svg images in HTML.
  • I overcame this by googling how it's done.

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

While making my page responsive, I noticed the background colour is lost. I tried adding the background colour in the media query, but it still is not restored. How can I fix this issue?

Community feedback

@Mageshwari-Balaguru

Posted

1.Does the layout look good on a range of screen sizes? the layout looks exactly same as the design. 2.Is the code well-structured, readable, and reusable? yes, it was well-structured. and i learned new way of designing the card layout. I used the below CSS grid property to design the card layout. display: grid; place-content: center; min-height:100vh;

also i've compared the code. the below border styling not working in my .card class. i'm not sure why? So, i used outline property. .container-fluid { border: 1px solid black; border-bottom: 10px solid black; border-right: 10px solid black; }

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