All solutions

I didn't like how I coded the footer here. Mobile was fine, but I had trouble with the desktop layout and getting a fluid responsive layout for the screen sizes in-between mobile and desktop. Any feedback on my footer would be welcome.

Also, I'm trying to follow BEM methodology in my naming convention, but I don't think I followed it 100% here. Any feedback on that would be awesome.

Thank you! 👍

I used flexbox to make the layout responsive from the mobile width to the desktop width, and at the desktop width I switched to grid for the final layout. What I was going for was more of a masonry look in-between the mobile and desktop layout but I couldn't get it to work just using grid or flexbox. I'd love to hear any suggestions on how I might have done that as well as any other feedback. Thank you!

Hey everyone! 🙋‍♂️

This was my first 'Junior' level challenge I have tried and I have to say it was a little difficult for me, mostly due to the multiple images and shapes a that are placed off-screen in different positions at different breakpoints. I'm wondering if I used the overflow property correctly to get this to work? Also, this is the first time I've used the <picture> element. Did I use it correctly and is this the best option when I want load different image sizes and different screen sizes? Lastly, I feel like I wrote too much code, both CSS and HTML. Is there any way I could have made my code more 'DRY'? Did I miss anything else?

Thank you for your feedback! 👍

I normally use the wildcard selector to set box-sizing: border-box on all my projects. I also include margin and padding resets here. Should I be putting these resets on the body tag selector instead?

Also I had a little trouble styling the font-awesome social icons. I ended up having to set a separate font-size for the twitter icon and to center them in the parent div with the border, I had to use transform: translateY(). It seemed to get the job done, but for some reason I don't like the solution. Any way I could have centered the icons with flexbox and sized them all consistently without having to make a separate font-size for twitter? Any other suggestions on how I can improve the code is welcome too!

Thank you!

At first I tried using the border-top property on the cards to produce the different colored highlights. However, I found the border would wrap around the corner radius of the boxes and didn't produce the desired effect. So I tried using the ::before pseudo-element for the card. It looks closer to the design, but still not perfect. Is there a better way to produce this effect on the cards that will more closely match the design? Also, any other feedback is welcome. Thanks everyone!!😎✌

I'm wondering if there is a more elegant solution to the offset positioning of the review and testimonial boxes? I offset them by first setting the position to relative for all boxes and then by selecting the appropriate :nth-child(). I then adjusted the bottom or left positioning. I'm sure there is a more elegant solution and if you know of one I would love to hear your feedback.

Is there a better way to blend a background color with an image? I blended a linear gradient with the background image. Is there a better way I could have done this using a simple background color and background image? Maybe with the single background shorthand property?

Did I follow best practices for resetting my margins and by only adding margin to the bottom of elements?

What's the best practice for using rems, ems and px? I used rems for most things and px for the rest. The only place I used ems was on the padding for my buttons so that the size of the button would change proportionately if the font size was changed. How can I use rems, ems or px to make the code more accessible?