All solutions

What are you most proud of, and what would you do differently next time?

I'm most proud of figuring out how to implement a solution for the hero image, which changes from one image to two and has some absolute positioning. Would love to hear how others implemented this challenge and if people have critiques of the way I did it.

What are you most proud of, and what would you do differently next time?

I enjoyed the general challenge of the layout and getting the different grid elements to span different rows and columns in the desktop view while keeping the order the same as in the mobile view.

What challenges did you encounter, and how did you overcome them?

I struggled with getting the spacing to match the design, and found the Figma design file was not that clear about spacing. I was also probably too heavy-handed with box shadow, and so I still need to work on a design eye for matching those kinds of details.

What specific areas of your project would you like help with?

Suggestions about how to think about and refine the spacing between elements (e.g., grid and flexbox gaps, paddings and margins that seem specific to a particular element) so that they match the design but are still consistent within a design system, would be appreciated.

What are you most proud of, and what would you do differently next time?

I'm most proud of taking on the challenge of the "Ideas to test yourself" about noticing that the font sizes in this project are slightly smaller in the mobile layout and finding a way to reduce font size for smaller screens without using media queries. I was able to learn about how to use calc and clamp and vw units to implement what I think is a nice solution for this.

What specific areas of your project would you like help with?

I feel like my text sizes, letter spacing, and line heights never quite match the solution. Not sure what the issue is there. I had access to the Figma file for this challenge, and so tried to design based around the given units in that design file rather than the jpg screenshots. So not really sure the best way to think about approaching that. Or maybe I made a mistake in reading the Figma file or in implementing the typography in some way.

What are you most proud of, and what would you do differently next time?

I spent a bit more time on this project making sure that the design worked for all screen sizes from a viewport width of 320px up to more than 1440px.

What challenges did you encounter, and how did you overcome them?

Thanks to amazing suggestions of @DylandeBruijn and @danielmrz-dev, I started with a clunky solution that involved using background images for the photos, and moved toward a much more flexible responsive images solution that works well across screen sizes and treats the product images as part of the content.

What are you most proud of, and what would you do differently next time?

This challenge was fairly straightforward.

What challenges did you encounter, and how did you overcome them?

• I'm never sure if I've matched the font correctly.
• I was confused about how the profile changed from the mobile to desktop, and so may not have captured that fully.

What are you most proud of, and what would you do differently next time?

I enjoyed this one a lot, especially with the importing of the content data from the third-party API. But it was also fun to position the button and add a glow effect.

Would love feedback on my solution to the cascade layout of both the ratings and testimonials. Or any other feedback that would be helpful for me to consider and use to improve.

I had a lot of fun with this one, especially with the importing of the content data. I'm still working on matching the design perfectly.

• How do people assess how close your font sizing, font spacing, font weights, letter spacing, etc. are to the original if just using the JPG design files? Any tricks? I'm using the Perfect Pixel chrome extension, but still feel like it's a challenge.
• How do people assess the box shading? Any good tools or blog posts on learning about the box shading parameters and how to match what's in the design?

I worked hard on getting closer to pixel perfection on this challenge, although I think in doing so I sacrificed a more general system of font sizes, margins, and padding. Would be interested in feedback about how I handled the margins and padding, and if there is a more general (rem/em) solution that might be more appropriate.

What are you most proud of, and what would you do differently next time?

Thanks to the comments and looking at some other solutions, I was happy with my revised grid solution that takes advantage of the grid-auto-flow and the grid shorthand to position the cards correctly.

What specific areas of your project would you like help with?

If anyone knows how to get the top borders of each of the cards to have a straight edge rather than curved that would be helpful.

• What is the proper tag for the heading/title within the card component?

• Wondering the best practice for positioning the background image (e.g., cover vs contain)?
• Not sure the best way to get the Font Awesome social icons to have square dimensions (both a fixed width and fixed height) so that their borders were circles (not ovals)? So I focused on adjusting my border-radius and padding settings, but maybe that's not the ideal method?