Free


March 7, 2023
The built-in animation features and the simplicity of managing state and reactivity with Svelte made this much easier to approach than the toast notifications I've built with React.
Level 4
Tailwind CSS
SvelteKit
Solutions to Challenges from the community.
Free
March 7, 2023
The built-in animation features and the simplicity of managing state and reactivity with Svelte made this much easier to approach than the toast notifications I've built with React.
Level 4
Tailwind CSS
SvelteKit
Free
February 18, 2023
This is my second solution using SvelteKit. My favorite part of the challenge was creating the bullet point and border element on each experience item. It was surprisingly easy with CSS flexbox!
Level 1
SvelteKit
CSS
All-Access
January 23, 2023
This was the first time I'd used Vite to create a React application, and I was impressed by how easy and fast it was. I also used the LocalStorage middleware plugin for Zustand, which added a simple state persistence to the app.
Level 4
React
Zustand
Vite
Free
January 23, 2023
Do you know how to clean up async requests in useEffect hooks? Check out this code to learn how this can be achieved with an AbortController!
Level 3
Next.js
Tailwind CSS
Axios
All-Access
January 23, 2023
I wanted to use React components so updating and adding new portfolio items is easy. Next.js handles image processing and routing, plus gives the users more options later on if they want to expand the site.
Level 2
Next.js
Tailwind CSS
All-Access
February 18, 2023
This challenge called for a mobile menu, so I reached for the Svelte Headless UI, which made it easy to create and took care of accessibility.
Level 2
SvelteKit
Tailwind CSS
All-Access
February 3, 2023
This was my first app built with Svelte and SvelteKit. Although this project was simple, I can see why people love Svelte so much! Reactivity is so easy to handle compared to React, plus it comes with its own global storage solution.
Level 4
SvelteKit
Tailwind CSS
All-Access
January 23, 2023
I moved quickly with this challenge until I got to the portfolio modal. The image slider took me a long time to figure out because I couldn't figure out how to create the overlapping effect. Luckily Framer Motion helped smooth things out in the end.
Level 3
TypeScript
Framer Motion
Next.js
Free
January 23, 2023
I was thinking about using CSS Grid to make this footer but decided to stick with CSS Flexbox. Overall, I'm happy with the way it turned out!
Level 1
HTML
CSS
Parcel
Free
January 23, 2023
This solution uses Parcel JS, an easy-to-use JavaScript compiler, along with Tailwind CSS, a utility-first CSS library that makes styling projects super fast.
Level 1
Parcel
Tailwind CSS
Free
February 5, 2023
The one-page resume challenge is a simple project that really doesn't require more than HTML and CSS. So, that's exactly what I did for this solution.
Level 1
HTML
CSS
Free
January 23, 2023
Creating the masonry grid was harder than I expected, but I used CSS columns instead of a library. Eventually, I want to add animations for the images when the filter status changes.
Level 2
React
CSS
Vite
Free
January 23, 2023
Getting the animation perfect with a seamless transition was difficult, but with some tweaking of flexbox, I was able to figure it out!
Level 2
CSS
HTML
Animation
All-Access
January 23, 2023
I struggled with getting all the correct Tailwind CSS classes for all the radio input states. I used Headless UI for the modal, React Hook Form for the form, and Framer Motion for some basic animations.
Level 4
Framer Motion
Next.js
TypeScript