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 and HTML

P
Vanessa 150

@petrihcour

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?

With this project, I used to use Bootstrap without React. I used it with HTML only. It was a good learning experience.

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

I ran into an issue with the card not being horizontally centered on the screen. Turns out, I needed to ensure the body has 100vh in order for it to be horizontally centered.

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

Any feedback on what I could have improved would be amazing.

Community feedback

P
Ann 80

@anastDev

Posted

As someone new to the coding world, I’m still learning and growing my skills. Please bear with me if some of my observations or feedback aren't entirely accurate.

Does the solution include semantic HTML?

The solution effectively matches the design, which is great. However, I noticed that the styling is mixed into the HTML, which can be a bit confusing. Separating the CSS from the HTML might help improve clarity.

Is it accessible, and what improvements could be made?

The design looks solid, but separating the CSS from the HTML could make it easier to manage and improve accessibility by ensuring that styling does not interfere with content structure.

Does the layout look good on a range of screen sizes?

The layout looks good and aligns with the design across different screen sizes. However, ensuring the CSS is properly separated might enhance responsiveness and make adjustments easier.

Is the code well-structured, readable, and reusable?

While the code is functional and readable, separating the styling into a dedicated CSS file could improve its structure and reusability. This change would make the codebase more modular and maintainable.

Does the solution differ considerably from the design?

The solution closely matches the design. The main area for improvement is organizing the code better by keeping HTML and CSS separate to avoid confusion and enhance overall code quality.

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