My attempt at the Results Summary Component challenge from Frontend Mentor. My primary goal for this challenge was to design it in such a way that it would auto populate from the included json file, almost as though it was a real app.

This is my attempt at the FAQ Accordion Card challenge from Frontend Mentor. The goal of this challenge was to create a responsive acccordion as well as have it be functional and show each response when the corresponding question was clicked. This challenge was also where I first decided to begin using Sass.

My attempt at the Testimonials Grid Section challenge from Frontend Mentor. The goal of this challenge was using CSS grid to replicate the layout in the provided design.

The Social Proof Section challenge from Frontend Mentor. This challenge revolved around making a responsive layout, as well as offsetting some aspects of the design at different breakpoints.

This is the Huddle Landing Page challenge from Frontend Mentor. This challenge was all about making a responsive landing page for a fictional company/app. In this particular instance the landing page only had a single introductory section and links to social media pages.

The NFT Preview Card Component challenge from Frontend Mentor. The goal of this challenge was to create a centered card, that not only displayed information correctly but also displaying a different image/text when hovering over the main image.

The Single Price Grid Component challenge from Frontend Mentor. As it's name suggests the challenge was about utilizing CSS grid to create the overall layout and using media queries to change the layout from a single column to 2 columns with non-uniform widths.

The Four Card Feature Section challenge from Frontend Mentor, where I decided to use flexbox and individual "cards" to create both the stacked layout and the diamond shaped layout. I used a div to contain the center 2 cards to achieve the desired layout.

The Profile Card Component challenge from Frontend Mentor. This challenge was all about using flexbox and relative positioning to accurately replicate the design provided to you.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, iusto magnam? Facilis tenetur veritatis dolor pariatur tempora provident quod ratione necessitatibus iusto, asperiores facere, eius incidunt iste omnis?

The Stats Preview Card Component challenge from Frontend Mentor, in this challenge I learned about blend modes, as I really wanted to match the design exactly but couldn't quite get it where I wanted using opacity.

The Product Preview Card Component challenge from Frontend Mentor. In this challenge I primarily used flexbox to create the responsive layout, as well as the button. This challenge was also where I learned about the picture tag, which I used to switch image sources at different breakpoints.

The Order Summary Component challenge from Frontend Mentor. This was the second challenge I took on, it was a simple layout in which I used flexbox to organize each part of the design.

The very first challenge on Frontend Mentor, used to get new users accustomed to how the process works and connecting your account to the Github repo to compare your work directly to the provided design.