DEV Community

Cover image for Glam Up My Markup Challenge
Cipi
Cipi

Posted on

Glam Up My Markup Challenge

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

What I Built

I built an inquiry web app for camping activities using the starter code with vite vanilla javascript.
Since a plain form leavs a rather "boring" impression - at least for me -,
I'm trying to capture the atmosphere of a possible user and make a "boring" form somehow interesting.
Therefore I picked a background image by Kevin Erdvig and found a matching favicon.
Then added some css "glamping" style with glowing effects to headline and labels, and rounded some borders for a smooth and welcoming appearence.
I chose to handle user submission with toastify-js, so that there's only a brief notification for the user after hitting the button.

Demo

You can find the project here and the code here.

Journey

Although the purpose of the user visiting this web app is to get a quick info, it doesn't mean to lack of style. So taking this user's view, finding the fitting background I really enjoyed working on the forms look and felt challenged to get something done. Till now I didn't style web apps with "glowing" effcts, as there were no use cases for that and for the first time I used the text-shadow and the css selector label[for=""]. So now I know better :)

camp_activity_dev_to_challenge

Top comments (0)