Hey everyone! Welcome back to STEAM SQUAD Code Club where I share my coding adventures with you. Today I’m going to show you how I built a survey form using HTML and CSS for the FreeCodeCamp Responsive Web Design Certification. This is a beginner-friendly project that will help you practice your skills and learn some new tricks. You’ll see how to create a simple layout, add some input fields, style them with CSS, and make them responsive for different screen sizes. Don’t worry if you don’t understand everything at first, I’ll explain everything step by step and provide the code in the description below. If you like this video, please give it a thumbs up and subscribe to my channel for more coding fun. Thanks for watching and happy coding!

00:00 – Introduction
01:35 – Workspace
03:05 – Document Setup
04:20 – User Story 01 – h1
04:54 – User Story 02 – p
05:32 – Add a header element
06:26 – User Story 03 – form
07:20 – User Story 04 – Name Input
08:31 – User Story 05 – Email Input
09:55 – User Story 06 – Email Validation
10:38 – User Story 07 – Age Input
11:50 – User Story 08 – Number Validation
11:55 – User Story 09 – Min and Max Age
12:45 – User Story 10 – Adding Label IDs
13:59 – User Story 11 – Placeholder Text
15:14 – User Story 12 – Dropdown select
16:43 – User Story 13 – Radio Buttons
20:26 – Adding horizontal lines
21:47 – Dropdown Label
22:23 – Radio Buttons Label
22:59 – User Story 14 – Checkboxes
25:30 – User Story 15 – Text Area
26:25 – User Story 16 – Submit Button
26:46 – Complete
26:58 – Outro

source

46 Comments

  1. Hi all!

    Update on the 20% issue that so many of you are having!

    When I pasted my code back in I also just got 20% which I thought was weird, because all of the tests were passed.

    I googled the issue and discovered that the 20% number refers to your progress through the section, we have 1 of 5 projects completed hence the 20% number.

    I will make a video to explain this today also!

    In my video it shows 100% completion the first time I completed it but every other time I try it just shows 20%. If you go out to your main page there will be a check mark next to the certification project to confirm that you have completed it!

    Hope that helps.

  9. This was so helpful, I was feeling overwhelmed on my first project and did not properly organize. I was trying to tackle HTML and CSS at the same time like we do in the instructions

Leave A Reply

Please enter your comment!
Please enter your name here