Become a Skillthrive author!

All Solutions

Solutions to Challenges from the community.

Level 3

Feature image for Web designer and developer portfolio
hunter
Hunter Becton

November 12, 2022

Web designer and developer portfolio

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.

TypeScript

Framer Motion

Next.js

Level 2

Feature image for Category tag marquee
hunter
Hunter Becton

October 28, 2022

Category tag marquee

Getting the animation perfect with a seamless transition was difficult, but with some tweaking of flexbox, I was able to figure it out!

CSS

HTML

Animation

Level 2

Feature image for Dad joke generator
hunter
Hunter Becton

October 17, 2022

Dad joke generator

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!

Next.js

Tailwind CSS

Axios

Level 1

Feature image for Four-column footer
hunter
Hunter Becton

October 14, 2022

Four-column footer

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!

HTML

CSS

Parcel

Level 4

Feature image for Feedback modal
hunter
Hunter Becton

October 17, 2022

Feedback modal with Next.js and Tailwind CSS

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.

Framer Motion

Next.js

TypeScript

Level 2

Feature image for Developer portfolio
hunter
Hunter Becton

October 9, 2022

Developer portfolio with Next.js and Tailwind CSS

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.

Next.js

Tailwind CSS

Level 1

Feature image for Contact me site
hunter
Hunter Becton

October 5, 2022

Contact me site with Parcel and Tailwind CSS

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.

Parcel

Tailwind CSS