Despite having written a couple of posts here on DEV, I was still able to complete the HTML Tables and Forms quiz over on freeCodeCamp yesterday. That brought me to the Build a Survey Form - the first certification project in the curriculum.
Although it's a certification project, the structure will feel familiar if you've completed earlier labs. It's still built around user stories - sixteen of them in total - and once all sixteen are fulfilled, the project is considered complete.
Like the earlier labs, this project comes with an example of the finished result and some starter HTML boilerplate. Having that reference made it easier to understand what was expected before writing any code, and I've shared the boilerplate below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Survey Form</title>
</head>
<body></body>
</html>
As with previous labs, I began by structuring the body of the page, starting with an h1 heading, a descriptive paragraph, and then the form itself.
For this project, the form needed to include a variety of input elements: text, email, and number fields - using a dropdown menu for the number selection. I also added checkboxes, radio buttons, and a textarea for additional comments to meet all of the individual requirements.
Rather than following the example verbatim, I put my own twist on it by building a DEV Community feedback form.
I'll admit, some of the user stories were challenging - not because I wasn't prepared (I had reviewed the concepts a few days earlier), but because my attention disorder was particularly prevalent today, which made it harder to focus. Even so, working through the project was a rewarding experience.
This struggle has motivated me to be more consistent in recording the review sections of the curriculum. Whether I use a tool like Logseq or Zettlr, or stick with the Wiki-style solution I'm currently using, Zim, I want to make sure that my notes are structured and easy to reference in the future.
With all sixteen user stories completed and every check passing, I'm happy to share that I just finished the project! Below is the completed code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Survey Form</title>
</head>
<body>
<h1 id="title">DEV Community Feedback Form</h1>
<p id="description">Help us improve our community by filling in this form.</p>
<form id="survey-form">
<label id="name-label" for="name">Name:</label>
<input id="name" type="text" placeholder="Enter your name" required>
<label id="email-label" for="email">Email:</label>
<input id="email" type="email" placeholder="Enter your email" required>
<label id="number-label" for="number">Age:</label>
<input id="number" type="number" min="18" max="65" placeholder="Age" required>
<p>Which option best describes your current experience level?</p>
<select id="dropdown" name="experience" required>
<option value="">Select your experience</option>
<option value="beginner">Beginner</option>
<option value="junior">Junior</option>
<option value="senior">Senior</option>
</select>
<p>Would you recommend DEV Community to a friend/colleague?</p>
<label>
<input type="radio" name="recommend" value="yes" required>
Yes
</label>
<label>
<input type="radio" name="recommend" value="no">
No
</label>
<p>What would you like to see improved? (Check all that apply)</p>
<label>
<input type="checkbox" name="features" value="articles">
Articles
</label>
<label>
<input type="checkbox" name="features" value="moderation">
Moderation
</label>
<label>
<input type="checkbox" name="features" value="onboarding">
Onboarding
</label>
<p>Any further suggestions to improve our community?</p>
<textarea id="comments" name="comments" placeholder="Enter your comments here" rows="4" cols="50"></textarea>
<button id="submit" type="submit">Submit</button>
</form>
</body>
</html>
The HTML section of the Responsive Web Design certification is nearly complete, with just the accessibility subsection left to tackle. I'll share more about that next time. As always - keep coding!
Top comments (1)
Nice work! 🎉 Building a full survey form with all input types is a big step — these fundamentals really pay off later when working with real user data and UI forms.