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

Product Preview | html, css, bootstrap

@ultraiam

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Although my page is responsive thanks to bootstrap's card component, I had the idea that I should set a media query for when the preview actually scales down to mobile size. It looks okay at the moment, but I'd like to see a solution to this. What would've been the best way to build this out without using bootstrap? Or did I do alright, sense I am still at the novice level? Let me know what y'all think about it.

Community feedback

David 8,000

@DavidMorgade

Posted

Hello Johnson, welcome and congrats on finishing the challenge!

Don't feel bad for using Bootstrap, you can use any tool you want to archive your solution, but I would recommend you to stick to CSS before jumping straight forward to a framework or library, framework appears and dissapear, some are used for a lot of time and then people stop using them because they became less popular, but CSS will always be the same, they will add more things but the old good things that you learn will always be there, the same goes with Javascript frameworks and plain JS.

For this challenge you could have perfectly use a breakpoint mediaquery from 375px to 768px for the mobile 2 1 column two row component, and from 768px + a breakpoint mediaquery with 2 columns and the whole container for the component!

You could have also center your main component using flexbox on the body instead of margins, you can remove those bootstrap margins and use flex on the body like this:

body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
}

Hope my feedback helped you, if you have any doubts don't hesitate to ask anything!

Marked as helpful

1
Blanyer 160

@vBlanyer

Posted

Hola! Porque usas picture en la linea 37 y no img?

0

David 8,000

@DavidMorgade

Posted

@vBlanyer Buenas Blanyer, está usando el tag picture en vez de img porque así puede agregar dos imagenes, una para desktop y la otra para mobile, estas las mete dentro del source y se usa como una "especie de media query" para imagenes, entonces depediendo del width que tenga la pantalla, se pone la imagen de mobile o la de desktop!

Marked as helpful

2

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