Welcome!

If there was a tech edition of Family Feud(it's a game show where people guess the answer to funny questions and win prizes), Steve Harvey would definitely ask this question: ”What is something that you dread filling out after taking a coding course?”

A. The final project

B. The survey form

C. Both

If you picked B, congratulations you win a Ford Edge! 🎊

Ooh, sorry I just remembered that I do not have the funds to buy you a Ford Edge. 😔 No worries, I can share my story on how I built a survey form from scratch, so grab a snack, your favorite drink, and enjoy the show!

How it all began

For this assignment, I had to build a functional form based on an app provided by FreeCodeCamp. As an educator turned coder, I decided to use this opportunity to combine my love for surveys with my newfound passion for web design. So, I created a survey form for a fictional company's training course, because what's more thrilling than filling out a survey, right? To get inspiration, I referred to examples from the course as well as past survey forms I've seen. And now, without further ado, let's dive into the creative process!

My Creative Process

I mainly relied on HTML5 and CSS to bring my vision to life. I started off using the trusty <article> element for the layout, but alas, it wasn't doing it for me. So, I bid ado to <article>, said hello to <div>, and voila!

As shown above, I went for a soothing linear-gradient effect of blue and white to create a calming vibe because let's be honest, filling out survey forms after a long course can be stressful.

If I had to pick a challenge in building this form, it would be the dropdown menu. It seemed like no matter what I did, the menu just wouldn't fit seamlessly into the form. But after some trial and error (and maybe a few frustrated sighs), I finally found a solution that worked. I won't bore you with the technical details, but let's just say it involved some creative CSS positioning and a little bit of magic. And just like that, the dropdown menu was tamed and added to the form like a pro! Now onto the next clip!

My Favorite Code Snippets

Ah, we’re at the best segment of the show, the Code Snippet Runway! Grab your cameras (or in this case, change your computer to screenshot) because coming up the walkway, we have the wonderful, Email Validation!!!

<label id="email-label"> Email Address</label>
<input type ="email" id="email-label" pattern ="[^ @]*@[^ @]*" placeholder="e.g. dantesmith@gmail.com">

I know you’re thinking “Email Validation? Really Chrissy?”, but creating this line of code was awesome because I usually keep my input elements pretty simple, but for this project, I wanted to spice things up with the <pattern ="[^ @]@[^ @]"> element. Who knew email validation could be so exhilarating?

Next up, we have the lovely resize!

textarea {
  resize: none;
}

Now, I know what you're thinking, "How could something as simple as resize: none be a favorite?" Well, sometimes the best things in life are the simplest ones. Before I discovered the magic of resize: none, the layouts I used for textarea was all over the place. They were like the wild west of form elements, just doing their own thing and wreaking havoc on my carefully crafted layout. But with just one little line of code, everything changed. Suddenly, my textarea layouts were organized and downright pretty. It was like watching a caterpillar turn into a butterfly, or turn into a majestic swan. Okay, maybe I'm being a bit dramatic, but you get the point. Resize: none may seem like a small feature, but it made a big difference in my form designing game.

Thank you for attending this year’s Code Snippet Runway! Now onto the next show!

Conclusion

Creating this form was a blast! It was like being a mad scientist, but instead of creating monsters, I was creating beautiful forms. Also, I learned that sometimes it’s ok to use the <div> element for building elements and to not be afraid of being a bit experimental with lines of code. If you’re looking for a project to develop or sharpen your layout skills, I highly recommend doing this assignment on FreeCodecamp. And if you need someone to cheer you on, feel free to follow me on Hashnode and my other socials via Linkfree. Happy Coding!😊

Credits

American Design GIF by Namaste Car

Let's Go GIF by Marvel Studios

SNL GIF by Saturday Night Live

Rockos Modern Life Nicksplat GIF by NickRewind

Young Storytellers GIF by Young Storytellers