All solutions

The mobile version looks pretty spot on. The desktop is...kinda yikes. Once it came to styling the desktop, I felt like every decision I made when setting up the HTML for mobile-first came back to haunt me, and every style on desktop was a big headache.

Is there a strategy to setting up your HTML so it adapts well when scaled up to desktop, so you don't have to go back and add a bunch of wrapper divs and CSS overstyling? Or do you just have to look at the desktop sketch and try to anticipate all your layout shifts when you're setting up your HTML for mobile?

The only difficult thing about this was styling the range slider. It took me several hours...what a nightmare! Hopefully they add some way to make customizing this element easier.

Mostly went smooth, except for setting the background images. I got something to work, but it's a hack and I had to use an inline scoped style tag for media queries.

If anyone can look at my code and let me know a better way to set the background images with Tailwind, I'd really like to know. (FWIW, I don't hate Tailwind anymore but I don't love it either. I could have done this project twice as fast with regular CSS.)

I had fun with this one. I found the validation a little tricy, however. Does anyone have a good solution for how to do this kind of form validation? I feel like I over-engineered it...

Had some trouble getting the main image to look good on desktop. Anyone else have problems with the image quality getting blurry at higher resolutions?

This is my first time using Tailwind and I'm still on the fence about it. While it's relatively simple to make things responsive, there are a lot of things that seem like they'd be simpler to just do in CSS.

Anyway, I'm having a problem where, when you hover over my buttons, it pushes the cards down. Also, I couldn't figure out how to push all the buttons to the bottom of the cards...sometimes when you resize the cards, the buttons have different vertical-alignment. I feel like I could have gotten this perfect with regular CSS, but Tailwind gave me trouble. I've heard such good things about it...am I using it right? Is there something I'm missing?

EDIT: I tried all the solutions listed in the comments, but nothing would work. TW introduces a lot of quirks on top of what you already have with CSS...

Finally feeling comfortable using grid -- thanks Wes Bos!

I couldn't find a good way to set the BG image in the CSS with Javascript, so I had to set the BG image inline in the photo div and use JS to change that. My JS slider solution is kind of crude, so I'd like feedback if anyone knows a better way to do it. I over-styled this one a lot to make it responsive and it's still not perfect...I'd be interested to see if anyone has a more elegant solution.

Fun project -- something that gave me trouble, though, was the photo. I had a hard time getting it to match the proportions of the design spec...seems like they're using some sort of Zoom property in the spec? If you have any suggestions on that I'd love to hear them.

Also, I'd be interested in any critiques of my JS code.

This one was pretty straightforward and I think the solution came out clean. The only problem I had was setting the star SVGs in the rating section. It seems like there must be a better way than what I did...

Anyway, if you have a suggestion on how I can improve that, or any comments / critiques, I'd love to hear them!

This one was quite a bit more difficult than the profile card challenge, and I seemed to have written a lot more code here. Am I over-styling?

Also, I'm having a very frustrating problem that I think has to do with setting a height in the HTML and a min-height in the body. When you view my solution, if you scroll down, you'll see a small line at the bottom of the page where the color is different than the gradient on the rest of the page. The problem is worse on mobile. I've been pulling my hair out trying to fix this...does anyone know how?

Did other people have trouble with the SVG overflowing on mobile?