Skip to content
Submitted about 3 years ago

Order Summary Component - SCSS. Mobile-First. BEM. Semantic HTML.

bem, sass/scss
Eric Salvi•1,350
@ericsalvi
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Any feedback is great feedback!

One thing I did try using is TailwindCSS for this challenge and had a difficult time setting it up in Visual Studio Code. If anyone has any great examples/tutorials on how to use Tailwind for these challenges, that would be awesome if you could share.

Thank you.

Code

Please log in to post a comment

Log in

Community feedback

  • maia•300
    @maiaflow

    hey Eric!

    i wanted to ask a question about how you determined the size to make your box. maybe this is getting too granular- ultimately mine looks right for the most part. but something i struggled with in this challenge was matching between the screenshot and my work. looking now, i think the screenshot still looks smaller than my submission, but i know my submission is smaller in height and width than the example- in the frontendmentor screenshot comparison, where yours looks perfect, mine looks off. if i remember correctly, making mine 450px made it too short, so i felt like my width worked well to maintain the proportions. but your proportions look good!

    i didn't notice this before, but when i went to write this, i was looking on my laptop screen vs my larger monitor, and on this screen i noticed that mine cuts off around 590px height and yours cuts off around 700px height, which is a little more than the max height of my browser on this screen with the bookmark bar on. is there a best practice for a height below which you can assume most browsers won't be? i don't know if this factored into your thinking about calculating the size of the box. i guess the best way to do it is to just define a max-height and let the height be what it is?

    aside from my long-winded question about box size, i wanted to call out how you did your hero image. i didn't think of just adding a border-top-[left/right]-radius to the image, i thought to get the rounded corners i would have to make it a background-image with padding, which caused me issues with my spacing below that i can see you don't have- if i change your max-width in inspect it stays spaced well, not the same for me lol! much cleaner how you did it. love it!

    also wanted to shout out your semantic naming for your sections (main for div.box-wrap, article for div.box) looks really nice. i'm going to try that for my next submission.

    thanks for teaching by doing! :D

    Marked as helpful
  • Yui•50
    @yterai

    Great job, my sensei Eric! I love how you organize the files and I'll refer to your Sass for the next time I use Sass :)

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