Glam Up My Markup - Cozy Camp

#frontendchallenge #devchallenge #css #javascript

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

What I Built

This was a very fun challenge.
I explain the details of this journey after the demo.

Demo

Journey

I started by choosing the colors. I wanted to deliver a cozy and warm vibe, so I used CSS Variables to help me remember them.

:root {
  --color-camp-01: #738d5e; // muted green
  --color-camp-02: #293d31; // rich green
  --color-camp-03: #ffc78a; // warm golden
}

Looking at camp inspiration designs, I found strong typography, colorful contrasts and nature-inspired illustrations. Fonts are always hard to choose, so I made up my mind on Truculenta and kept moving forward.

Ok, time to build the thing.
Since we cannot edit the HTML, with flexbox I manage to achieve something like this.
Looks fine, but there is still some work to be done.

This is more of a mobile-first approach, since on desktop we have more room to work with, I thought about changing the direction of the flex elements. And using the :after pseudo element so I could place something inside the <h1> tag.
I used an SVG from game-icons library.

Putting it all together, we have this:

Good, we are getting somewhere.
Although, there is something missing 🤔

Getting back at the camp designs inspiration, I found some rough edges designs, and things that give some organic look. So I decide to try some border-image css to see how it looks.

Now, about the feedback when the form is sent?
Since I started this thinking about cozyness, we need some smooth animations:

At the last minute I decide to increased spacing between elements for improved readability 😊

Thank you Dev.to team for creating this challange.

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.