Skip to content
OverviewSolutions
13
Comments
10

Trey

@willettoDenver290 points

I am a former teacher leaping into front-end development.

I’m currently learning...

Focusing on Angular and Sass. Always trying to increase my depth of knowledge in Vanilla Javascript, semantic HTML, and CSS.

Latest solutions

View more solutions

Latest comments

  • Trey•290
    @willetto

    Hey Morgan! Overall, great job, especially for week one! I noticed a few easy fixes that should help this match even more, and hopefully help you on other challenges.

    • Make sure the font colors and weights match the design. What looks like black is actually a very dark blue. If you look in the style-guide.md that came with the project, it will list out the colors. If you haven't used a color or font-weight by the end of the challenge, it probably means you missed it. Like a leftover puzzle piece. 😂

    • You're on the right track with media queries. I don't think the text-size changes, but the padding does. For the mobile view, left and right padding are 25px, but at desktop size it's 50px. I am on a Mac and open the design images in preview and just measure there.

    • Space between elements. You have great spacing with the header tag, but the short paragraph and buttons are smushed together. I like to add only margin-bottom to my elements, so I have to do less math.

    This might be a bit much, but the code I used was:

    .order-summary *:not(:last-child) { margin-bottom: 20px; }

    The bottom half of my card had a class of order-summary, the * means all children in that div, and :not(:last-child) excludes the Cancel button. So everything from the header to the buttons gets 20px of spacing between it.

    Hope that's helpful!

  • Trey•290
    @willetto

    I used chart.js and it was pretty straightforward. I just used it with vanilla JS, no other framework.This video on chart.js helped me a lot.

  • Trey•290
    @willetto

    Hey Imad! Nice work. And good questions too. Knowing what you need to learn is a challenge in itself. Generally, I don't use margins. Almost everything can be done with padding and using flex/grid alignment.

    I would add a class of 'card' to each div, and add CSS styling the card. If you set the layout to either grid or flex, you can then set the spacing between each item. .card {display: flex; flex-direction: columns; justify-items: space-between; padding: 20px;}

    -This video might be helpful in understanding the difference between padding and margin.

    -And this may be helpful in understanding flex-box, which can auto-calculate spacing for you.

    Lastly, I love the border-radius on the desktop layout, but it gets a bit weird on the mobile. Take the border-radius off of your section elements, and just leave it on the main. Then add overflow: hidden; to your main {}. That took me a while to figure out.

    Marked as helpful
  • Trey•290
    @willetto

    Hi RadeQu. Nice work. I have a media-screen suggestion and a layout suggestion.

    1. You don't need a media-screen for both mobile and desktop. Write all of your base CSS (colors, hover, card layout) AND your mobile-specific layout without a media-screen. After that, add @media (min-width: 800px){} and put your desktop specific CSS in there. This is what people mean with "mobile-first workflow". It also goes way faster.

    2. Your cards look great, except they overflow from the borders. You have two options to fix this. You can change your margins to padding. Or add a class of 'card' to each div, and add CSS styling the card. .card {display: flex; flex-direction: columns; justify-items: space-between; padding: 20px;}

    This video might be helpful in understanding the difference between padding and margin: https://www.youtube.com/watch?v=zqDdws_Hvmw&ab_channel=Treehouse

    Marked as helpful
  • Trey•290
    @willetto

    Hey Will! The 2 background .SVGs gave me a lot of trouble. This is the code that ended up working for me:

    body { background-image: url('images/bg-pattern-top-mobile.svg'), url('images/bg-pattern-bottom-mobile.svg'); background-position: top left, right bottom; background-repeat: no-repeat; background-size: 95%, 100%; }

    With the background-image you can add multiple files separated with a comma, and then that comma also applies to the background-position. My % size is my best guess based on the design.

    Marked as helpful
  • Trey•290
    @willetto

    I just submitted mine and was looking for other projects to see how they did it. I think yours looks great. The first thing I noticed when previewing your site is the @media query size was really large. It actually loaded in mobile for me, even though my browser was over 1000px across. Maybe bump it down to 900?

View more comments