Featured

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



Published
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
Category
Web design
Be the first to comment