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

HTML,CSS and Bootstrap

@KingMisach

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I had fun working on this page, had a chance to implement using bits of bootstrap. I found difficulties positioning the bootstrap buttons so i just decided to wrap them in divs and give them classes. I am still learning and any feedback will be highly appreciated,

Community feedback

Cheosphere 1,040

@Cheosphere

Posted

@KingMisach Hello, it is a very good development, you can improve the background by adding the following lines of code in your body tag:

body {
    background-repeat: no-repeat;
    background-size: contain;
    background-color: hsl(225, 100%, 94%);
}

Marked as helpful

8

@KingMisach

Posted

@Cheosphere Hi i have done just that and the code is actually better. I am however curious as to how you came about the specifics of the code. I will appreciate feedback on this.

0

@KingMisach

Posted

@Cheosphere Hi i have done just that and the code is actually better. I am however curious as to how you came about the specifics of the code. I will appreciate feedback on this.

0
P

@HiQendresa

Posted

Hi @KingMisach

Congratulation on finishing this challenge 👏🏻

You can see the Bootstrap documentation here: https://getbootstrap.com/docs/5.3/getting-started/introduction/ or you can watch this tutorial: https://www.youtube.com/watch?v=-qfEOE4vtxE

Another tip for you: I would suggest you to learn CSS Flexbox or CSS Grid. I found them very helpful to create responsive and flexible layouts.

Here you can learn for both of them:

  1. https://css-tricks.com/snippets/css/complete-guide-grid/
  2. https://css-tricks.com/posters-for-css-flexbox-and-css-grid/
  3. https://www.youtube.com/watch?v=3elGSZSWTbM

Happy Coding 😊

Marked as helpful

0

@KingMisach

Posted

@HiQendresa I am yet to learn flexbox and css-grid,i will ensure to learn them and implement them in my next project. Thank you so much for the learning links. I am sure they will help me alot.

0

@Imammika

Posted

if you check the docs for bootstrap you can see all the types of buttons you can use, if they don't have what you want you can just customize your own CSS. Happy Coding.

Marked as helpful

0

@KingMisach

Posted

@Imammika Thank you so much. I will look into it.

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