Skip to content
Submitted about 3 years ago

Used VSCode and used a couple videos emphasizing componentization

Jonathan Caldwell•20
@caldwelljt2
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This is the first time I've really tried to do my own thing at all in code. I got considerable help from a couple people in the Slack channel because I am trying to learn how people think through their design and keep parts usable for other implementations. It probably shows in my code because I'm doing a few things that aren't optimized (importing) that I know I could avoid.

Things that don't work right and I dont know how to fix or need help with:

  1. Mobile version overlaps on left and messes up background when below 450px.
  2. In general I don't know how to keep the entire thing relative using vh/rem (or if that's even SoP)
  3. Resizing through 784px isn't smooth (I had it set to 700px, not sure how the final version has 784px, but i'm submitting it anyways because I was just guessing that 700 was just under likely 1024x768 and far enough over mobile that it would be rare to see resize happen organically).

What I know I did wrong and don't care for now (i'll tackle it in the future):

  1. Variable usage/labeling
  2. Any usage of Grid (I simply haven't learned it but will in the next week)
  3. Left various code bits in that aren't needed.

In short, I stopped my progress on learning Vue because I realized I had rather poor understanding of the DOM/html in general. I've done a lot more with back end and had to similarly stop along that progress to better understand core concepts.

Really, ANY feedback is welcome, but my preference is to tackle glaring errors or things that are "bad habits" up front.

Community feedback

  • Mark Mitchell•1,820
    @markup-mitchellPosted about 3 years ago

    Like @soransh-singh says, use max-width instead of width on the container.

    You probably want to move a lot of stuff down a few levels - like, it seems ok to set the font in <html> for all child elements to inherit, but generally speaking we wouldn't style the html tag for layout or display purposes.

    Try this and see where it gets you:

    1. take display: flex and padding off the html
    2. change width to max-width on .container-outside
    3. put, say, 2rem padding on <main>

    Those things won't completely finish your solution, but IMO they're the most minimal changes to set you on a better path.

    Marked as helpful
    0
  • soransh singh•1,025
    @soransh-singhPosted about 3 years ago

    • In card.css .container-outside, Instead of setting width:450px set max-width: 450px and add some margin.

    • If you want to make it relative like when screen size increase width of card also increase you can use percentage(%) or you can use Vw.

    Marked as helpful
    0
  • soransh singh•1,025
    @soransh-singhPosted about 3 years ago

    It looks good... it's your first submission congrats... you have done a great job

    0

Please log in to post a comment

Log in with GitHub

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