All solutions

This is the first Frontend Mentor challenge I've done that included JavaScript. While accordion panels can be made easily with something like jQuery or Bootstrap, I wanted to try building one myself here for the experience and practice.

A fairly easy challenge. I built this using a mobile first workflow and it was good practice for building a simple card element which is used in a variety of contexts. The biggest pain here was positioning the SVGs in the background and is something I need to experiment with to feel more comfortable with.

This is my second Frontend Mentor challenge solution. I designed this using the mobile-first paradigm, with some very simple CSS Flexbox to position the elements on larger screens.

The source files for this project came with 2 images sized slightly differently for desktop and mobile. My solution includes both images in the HTML and changes the display property of the image in CSS to show the correct one based on resolution, but if I were to do this again I would probably use something like the srcset attribute instead (which I didn't know existed until after I finished!!)

Hello everyone, this is my first Frontend Mentor challenge! It was fairly simple but I had fun with it nonetheless. This mobile-first design uses CSS grid to shift the bottom two sections into the same row at 992px and up.

One thing I wasn't sure about was that it appears in the desktop design image that the price grid is centered both horizontally and vertically on the page. I couldn't really figure out a nice way to center it vertically. Any feedback is appreciated, thanks!