All solutions

I got this as far as I could take it, but then had to stop before I went mad. Here's where I need help and guidance:

• Layout: the sneaky part from the design examples is how the layout changed from desktop to mobile. Since the location of the hero image changes in the flow, I went with grid-template-areas but didn't work out perfectly. For some reason it also left white space on the right of my mobile view that I couldn't get rid of.
• Submit button: Trying to position it inside the input field. I used positioning, but when the resposive layout changes, sometimes it would be off by a few pixels and no longer fit neatly into the input bar.
• Background image: Couldn't seem to control it the way I wanted to and match the example. The example seems more transparent and covers more of the page. I tried cover obviously, but that made it too huge so you couldn't see the whole design. This is probably impacted by my choice of Grid layout as mentioned above.
• Workflow: I started with mobile-first, then tried to convert it to desktop, but it was a nightmare getting the content layout correct. So then I re-did my existing code to adjust for desktop-first and then go to mobile, since desktop was more complex. That almost worked better, except for the extra white space at the right edge of my mobile view that I could not get rid of.

And probably a few more things, but those are the major issues I experienced, so I welcome any and all comments. I plan to come back and rework this again sometime, but I wanted to submit it now as my best effort at the moment, until I can learn how to improve it.

I enjoy building from scratch with HTML and CSS and have fun with that. But I'm still very much a novice on JavaScript as it takes a while to correctly get the logic and concepts, so that slows me down the most.

My biggest struggles were:

• the inputs and label styles for the ratings; took a long time to figure out how to set that up via HTML and CSS, so I'm looking for any suggestions there that would have been a more optimal approach
• my first time tackling a challenge with JavaScript; that has been tough for me to learn, so any JS suggestions are great, too
• starting to ignore getting pixel perfect with Frontend Mentor screenshots; the colors provided in the style guide did not all work (such as the circles around the ratings) so I had to make my own color for that; if I were to try to match their mobile design, then I would have to shrink the font size down as well, which seems unnecessary compared to just allowing the container to grow on mobile and keeping the font size legible; also ignored paragraph font size of 15px, because it again seems unnecessary

I did not use the included JSON because I have no experience with JavaScript; I only focused on HTML and CSS for this challenge.

• Had some struggle finding the balance between when it's best to use Grid or Flexbox, so any feedback on my balance of that is welcome.
• Had more trouble than I expected working with background image positioning, getting the decorative images to line up correctly, or fill the whole space on different screen sizes without ending prematurely.
• Started with a mobile-first workflow, then adapted for desktop; any feedback on how I coded the media breakpoint, or anything I could have done more efficiently between the two designs, is welcome.

This was my first time using grid-template-areas, and overall it went better than I expected. Although, I'm not sure the responsiveness breakpoint has the smoothest transition, but it does still seem to look good at the recommended screen sizes. If there's a more optimal way to set up the Grid, I welcome the feedback.

My feedback and difficulties mostly came from responsive design adjustments with Grid and rem units. Here's where I need feedback:

• Use of CSS Grid; I did a mobile-first workflow, and didn't implement Grid until the larger breakpoints; seems like there may have been a better way to use this and write less CSS for the breakpoints
• Use of rem units; mobile-first was fine, but then going to large screens made everything seem too small, so I made a lot of manual size adjustments in the breakpoints; again, feels like there would have been a better way to master rem (and maybe em) units so that the size adjustments happen automatically for breakpoints

Otherwise, I welcome feedback about any other observations. Thank you!

This is my first time where using a mobile-first workflow worked out better for me than desktop-first. I started on desktop, but then nightmares occurred when trying to pare down to mobile. So I started from scratch with mobile and that became a breeze.

Areas I had difficulty or would welcome feedback (although I'm open to feedback on anything!):

I tried using the <picture> element for the first time, since two different images were provided for mobile/desktop layouts; I struggled with creating the purple overlay for this.

I tried a mobile-first workflow, but that still feels like going backwards to me (understanding that I'm a complete novice who is learning through desktop techniques first), so my media code could likely use improvement.

I think I could have divided my sections/HTML a bit further, creating like a card-top and card-bottom areas, and then created a div for the underlying text. I discovered this too late while working on the desktop responsiveness secondarily and tried to adjust the text layout.

This is the first time that I have tried a mobile-first workflow. My understanding is that it's the industry standard to do so. But admittedly, I found it more difficult than starting with a desktop workflow first. Perhaps with more practice I'll get better and prefer it.

I started with desktop design first and then adjusted by using @media to create the mobile layout. That was probably the biggest challenge is fixing the layout for the breakpoint. Since separate images were provided for the desktop and mobile view (as opposed to using the same image and making that element responsive), I had to play with adding both images to the HTML document and then using display in CSS to switch them on or off for the responsive views.

I discovered I had to nest more <div>s than expected in order to get the desired layout through Flexbox. It felt like my HTML markup got more cluttered than it should that way, but it seemed to be the only way I could accomplish it. The hover overlay effect on the main image would have been a real challenge, but luckily a completed project from a Udemy course had a similar design, so I went back to that to refresh my memory and was able to pull it off. I didn't seem to need to create a mobile breakpoint because the size of the card was small enough to retain the same look on mobile.

I used Flexbox to create the three sections of the card itself, but am not certain if that was the best method, as I didn't find it easy to adjust the sizes of each section. Would be interested to know the best practice for that as well.

(Updated my code to fix the body background image based on feedback from @0xAbdulKhalid)

Is there a box shadow around the white box?? I continually struggled determining if there was one at all cause there seems to be something faintly there, but I couldn't figure out the correct configuration to match it.

How do you recommend adding the attribution? I thought it would be simple to add it after I finished the challenge, but then it threw everything off. I had to create an additional main section to wrap the flexbox of the white box, just so I could have a footer outside of it, but even then it took some positioning to try to get it somewhere.