Form Web Design Project FreeCodeCamp: Build a Survey Form

form web design project

It’s a beautiful Saturday in Upstate NY so I’m taking a break from Udemy Bootcamp today. I did have time to do the second web design project in the “Responsive Web Design Projects” section of my FreeCodeCamp curriculum. The test was a form web design project.

Responsive Web Design Project #2

The survey form is FreeCodeCamp’s 2nd HTML/CSS design project. You can find the full detailed instructions of the project here: Freecodecamp Instructions. The main goal was to create a form that utilized several different methods. The HTML of the form is pretty straightforward and no CSS is required to complete the test successfully.

My Project Solution

form web design code solution
My final code for the form project on

This was actually a really quick and painless project as long as you follow the instructions. I was able to pass 15/17 tests on my first submissions to the test. I was just missing some IDs and that was easily corrected. You can find my final code on Codepen here: Survey Form Final Code. If you want to learn how to make your own form web design project this is a cool test to try.

Adding CSS to the Survey Form

It wasn’t required but I decided to give some character to my finalized project. I have to give a shoutout to uiGradients for creating an awesome background for the app! You can easily add their amazing gradients to any web design project with just a copy and paste! I also used some CSS from my previous ToDo list project.

My Survey Form Final Project

survey form web design project from freecodecamp
Great Questions for a Survey!

You can check out the final form on Codepen or in my portfolio: OneZen Survey Form. Hope you enjoy it!

Leave a Reply