Glam Up My Markup: Camp Activities

#frontendchallenge #devchallenge #css #javascript

This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities

What I Built

I built a web form that has a Camp Activities theme, aiming to enhance the markup and styling for a visually appealing experience. Here are the key features:

Background Image: I incorporated a custom background image that seamlessly blends with the camp theme. The AI-generated background adds an adventurous vibe to the page, setting the tone for camp-related content.
Custom Dropdown: To improve user interaction, I designed a custom dropdown menu. The dropdown enhances both functionality and aesthetics.
Font Style: I found that Bubblegum Sans perfectly aligns with the camp atmosphere. Its bouncy, cheerful style adds a sense of adventure and excitement to the form content.

Demo

Journey

During this challenge, I delved into CSS and JS techniques and learned how to:

Blend Backgrounds: The background image was carefully chosen to evoke the spirit of camping.
Style Custom Dropdowns: Customizing the dropdown menu involved tweaking colors, fonts and animations using both JS and CSS.
Validate Form Inputs: I also used JS to validate user's inputs, ensuring accurate and complete form submissions.

MIT License

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.