All solutions

MY JAVASCRIPT ON THIS IS SO VERY CLUNKY! I am absolutely certain there is an easier way than what I did. Also, I know I have work to do on min and max-widths in my CSS. I'm submitting the project with documentation because it works, and I'm going to revisit my JS for some better solutions.

This is my first Frontend Mentor PRO challenge with access to the Figma files. I worked HARD on precision and a responsive design using CSS grid and the least amount of code. I'm having some sizing issues and difficulties? I have specific pixel sizing both on grid columns and rows and the grid elements and I don't think that is necessary. The design works but I'm wondering about best practices and less clunky code. You can see specific examples in my repository. I also changed up the design a bit to enhance accessibility via contrast ratios and to create more visual interest.

I'm happy with my solution, but if anyone has any suggestions, I'm continually looking for ways to make my CSS more efficient and seamless between mobile and desktop. Thank you!

Through these exercises, I'm really getting the hang of where and when to code flexbox.

The background images with circles where very difficult to position. I ended up delving into the CSS background selectors more thoroughly, and eventually using another user's solution. It worked so well that I didn't see the point in reinventing the wheel, but I am going to delve deeper to make sure I understand what the code is doing. Does anyone else have suggestions for this?

Also, when doing an accessibility check, I darkened the gray text because the suggested color was throwing contrast errors.

ApplePieGiraffe's solution: https://www.frontendmentor.io/solutions/card-component-with-3d-animation-t0NqrfqMT

I found the buttons a little bit difficult while building the project, specifically their width. I used a percentage measurement that seemed to go well as far as responsiveness, but is there a best practice?

I found this to be a fairly straightforward exercise in Flexbox, which I seem to be getting the hang of. I also changed the original orange color to a darker hue because an accessibility check yielded a low contrast warning.

Mobile-first design using CSS grid and flexbox, mainly grid-template-areas. I feel this is the most efficient use of the code, does anyone feel differently?

I previously completed the order component summary card, and I feel I have improved on this project, especially flexbox, responsiveness, and accessibility. Any feedback is appreciated!

For the mobile design, should the whole design, including the borders of the component, be inside the mobile viewport when taking the browser controls into consideration? When coding for mobile, is my responsive coding simple enough? This is what took me the most time. Is any of my code too complicated and can be made simpler?