CODE CLUB – FreeCodeCamp – Responsive Web Design Project 4 – Registration Form

Project No. 4 on the FreeCodeCamp Responsive Web Design track.

Today we make a fully functional Registration from that validates input from users. We add some CSS styling and FreeCode Camp stops holding our hands a little bits and leaves us to find information on our own.

00:00:00 – Intro
00:01:52 – Step 01 – Document Setup
00:04:19 – Step 02 – Document Setup 2
00:04:39 – Step 03 – Head and Body Tags
00:05:03 – Step 04 – Link Stylesheet and Add title
00:08:35 – Step 05 – h1 Text
00:08:59 – Step 06 – p Text
00:09:32 – Step 07 – Body Width and Height
00:10:25 – Step 08 – Removing Default Margin
00:11:18 – Step 09 – Background and text color
00:12:14 – Step 10 – Form Element
00:13:09 – Step 11 – Fieldset Elements
00:13:46 – Step 12 – Label Elements
00:14:17 – Step 13 – Label Text
00:14:58 – Step 14 – Display and Margin Properties
00:18:08 – Step 15 – Input Elements
00:18:58 – Step 16 – Text, Email and Password Attributes
00:20:15 – Step 17 – Submit Button
00:21:34 – Step 18 – Required Attribute
00:23:23 – Step 19 – Simple Password Validation
00:24:18 – Step 20 – More Complex Password Validation
00:26:32 – Step 21 – Label Elements 2
00:27:04 – Step 22 – Radio Buttons
00:27:46 – Step 23 – Checkbox
00:28:26 – Step 24 – Label Text
00:28:57 – Step 25 – Linking Radio Buttons
00:29:50 – Step 26 – Add a link
00:30:52 – Step 27 – File Input type
00:31:54 – Step 28 – Number Input Type with Range
00:33:51 – Step 29 – Dropdown selector
00:35:08 – Step 30 – Dropdown label
00:35:52 – Step 31 – Dropdown Options
00:36:32 – Step 32 – Dropdown Option Values
00:37:44 – Step 33 – Textarea input
00:39:38 – Step 34 – Rows and Cols attribute
00:40:08 – Step 35 – Placeholder Text
00:40:54 – Step 36 – Adding Name Attributes
00:43:19 – Step 37 – Changing the Font
00:45:06 – Step 38 – Centring Elements
00:46:25 – Step 39 – Center the Form
00:48:31 – Step 40 – Remove fieldset borders
00:49:26 – Step 41 – Not pseudo selector – difficult
00:54:50 – Step 42 – Arranging the Labels
00:55:48 – Step 43 – Arranging the Radio Buttons
00:56:31 – Step 44 – Styling the inline class
00:57:21 – Step 45 – Add some Margin
00:58:41 – Step 46 – Vertical align
00:59:06 – Step 47 – Background Color
01:00:04 – Step 48 – Styling Input Text
01:00:48 – Step 49 – Refactoring the Code
01:01:28 – Step 50 – Attribute Selector
01:04:17 – Step 51 – Center the Submit Button
01:04:41 – Step 52 – Adjust text size
01:05:13 – Step 53 – Style Submit Button
01:05:55 – Step 54 – Adjust the Margin
01:07:10 – Step 55 – Attribute Selector 2
01:08:24 – Step 56 – More Padding
01:08:48 – Step 57 – Change Link Color
01:09:05 – Outro