All solutions

This was all nice and straightforward except for the hero image. I couldn't find a good way at all to position it with the stripe meeting the page edge without also making the document flow incorrectly.

So I broke up the image and recreated it with HTML & CSS. This has the advantage of the image and the statistics now being properly in the document, and taking up the correct space. The decorative stripe is added with a pseudo-element. This is more fiddly than I'd like, and I suspect the firefox screenshot tool won't like having overflow-x: hidden on the body. But I was unable to find a better way to solve this.

I wasn't fully able to eliminate media queries in this, though I would've liked to. I feel like there must've been a better way to do the middle grid section. But I couldn't figure out a way to maintain the centered alignment on small screens and smoothly transition to the side-by-side option once it's larger. The end result is relatively smooth, but there's still one breakpoint needed to achieve it.

I'm pretty happy with this. I normally build apps, so this was a good opportunity to experiment more with fluid typography and intrinsic design.

I'm not 100% happy about having to specify the grid column widths for the large viewport. I would've liked it that the image took up enough space as it needed to maintain its aspect ration, while the content section expanded in width as much as it needed. But I couldn't get that to work. The repeat(2, 1fr) grid seemed like an acceptable compromise.

I finally had a chance to play with Remix. All in all, really liked it, and most of the time it almost doesn't feel like you're writing React at all.

Pretty happy with this. There's a little but of duplication in the database fetching code that I'd like to clean up at some point, and I should've used a few more utility classes in the CSS. But in general I'm pretty happy with how this turned out.

This was my first time using XState for a full project, and I found it very useful for setting up the logic of this app.

I loved the theming of this. It was the first time I didn't have to tweak the contrast for accessibility either. CSS Custom Properties made this very straightforward.

Any feedback welcome

I'm pretty happy with this one. There were a lot of subtle challenges here to make sure it was fully responsive and accessible.

It was my first time building a purpose built design system for a project, and that's something that I hope to re-use.

It might seem like using React and so many re-usable components was a bit overkill. However, I think it was great to be able to concentrate on building out a good design-system api without having massive scope.

This one was a lot more challenging than it looked. There are a lot of little details, and getting the custom controls to still be accessible was a lot of work. I think it was mostly successful though.

There are a couple of problems of overflow here - the toggle labels wrap awkwardly on small screens, and I had to brute-force overflow: hidden on the form because the custom slider ends up doubling in size. Couldn't figure out how to do that one better. If anyone has any ideas on that, I'd love to hear.

This was my first time using a screen reader to test from the beginning. That guided my mark-up decisions that I think were mostly successful. But it can be difficult coming up with suitable mark-up for an app-style solution, rather than documents that often have a more obvious structure. I'd be keen to hear if anyone would have approached the mark-up differently.

I've adjusted some of the colours and font-sizes from the original design as they didn't meet accessibility standards around contrast. I've tried to preserve the intent of the design though.

I've put a lot of work into making sure that the theming respects user choices, and saves them for later, with no flashing of un-themed content.

I've attempted to make it responsible across screen sizes while avoiding media queries. There was one that I couldn't figure out how to avoid (the re-flow of the heading from row to column). If anyone can think of a way to do that without the media query, I'd love to hear it.

First time trying out tailwind. It made this mostly pretty straightforward, but I couldn't work out a way of avoiding duplication when styling the middle price with different colors to the others.

If anyone has any suggestions on how to make that more reusable, I'd be very interested.

I'm mostly happy with this, but getting the full width background sections while maintaining the grid was a challenge, and I don't think I found the best solution for that. I'll be interested to see how other people approached that.

Also, positioning the curvy background patterns, I'm 100% sure I didn't do that in the right way, but I couldn't figure out a better option for them.

Maybe instead of having a 12 column grid, within a margin, I should have tried a 14 column grid where the first and last columns are the main page margins.

Hi, I approached the form validation here with vanilla js, and I think the error highlighting is handled ok. But it doesn't currently prevent the form from being submitted if you haven't filled it out correctly?

Are there good strategies for preventing the form submission (not just disabling the button)?

Thanks :)

I built this with mobile design first using CSS grid, and I'm fairly happy. But it needed a lot of CSS to get it done, and it doesn't feel very organised.

Do people have better suggestions on how best to organise the CSS? I've used variables where possible, but it's still quite a jumble of layout properties, colours, animations etc, and I'm sure on a real site, that would get unmanageable very quickly.