🚀 Welcome to Day 4 of my #100daysofcode Challenge!
In this video, I am delving into HTML forms through freeCodeCamp’s Responsive Web Design Curriculum.
As someone with coding experience, I’m embarking on a journey of rediscovering the fundamentals and sharing insights along the way. Join me as I document my progress, tackling challenges, and navigating the vast landscape of web development with a fresh perspective.
Whether you’re a beginner or a fellow coder, let’s learn and grow together!
📚 Resources:
Freecodecamp Responsive Web Design Curriculum: https://www.freecodecamp.org/learn/2022/responsive-web-design/
🔗 Connect with Me:
Twitter: https://twitter.com/lowkeylogs
📌 Timestamps:
00:00:00 – Introduction
00:00:51 – Preview of what we will build
00:01:50 – Setting up basic HTML
00:06:04 – Adding styles to body element
00:09:23 – Adding first form elements for getting basic info
00:22:05 – Setting type attributes for all the input elements
00:24:34 – Adding submit button using input type attribute submit
00:27:32 – Basic form validation by adding required
00:28:48 – Custom validation with min-length & pattern for password field
00:33:38 – Adding a section for account type using radio buttons
00:41:10 – Section for terms and conditions using checkbox
00:44:44 – Setting a file upload section with input type file
00:47:27 – Input type number for age
00:49:50 – Adding a dropdown using select element
00:53:20 – Option text inside select
00:54:42 – Adding values to options
00:56:32 – Textarea element for multi-line text
01:02:14 – Adding placeholder text
01:07:17 – Adding font styles to body element
01:09:32 – Centering the heading and description
01:11:30 – Styling the form element (width, min & max widths, alignment)
01:16:42 – Styling the fieldset element
01:19:42 – Pseudo class(:last-of-type) for selecting last fieldset
01:23:16 – Styling input, textarea and select elements
01:30:32 – Using width value of unset
01:33:25 – Aligning elements vertically using vertical-align
01:34:38 – Adding form theme colors to input and textarea elements
01:40:26 – Using attribute selector to style submit button
01:49:32 – Final styling of form and form elements
01:52:35 – Outro
👍 If you find this helpful, consider subscribing for more coding adventures!
#100daysofcode #html #css #webdevelopment #coding #freecodecamp #backtobasics
source
Hey where are you from? I was also doing the same from fcc.. upload regular let's complete this together ❤
Hey guys, please refer to the timestamps here to go to the specific sections in the video. Hope it helps 😊
00:00:00 – Introduction
00:00:51 – Preview of what we will build
00:01:50 – Setting up basic HTML
00:06:04 – Adding styles to body element
00:09:23 – Adding first form elements for getting basic info
00:22:05 – Setting type attributes for all the input elements
00:24:34 – Adding submit button using input type attribute submit
00:27:32 – Basic form validation by adding required
00:28:48 – Custom validation with min-length & pattern for password field
00:33:38 – Adding a section for account type using radio buttons
00:41:10 – Section for terms and conditions using checkbox
00:44:44 – Setting a file upload section with input type file
00:47:27 – Input type number for age
00:49:50 – Adding a dropdown using select element
00:53:20 – Option text inside select
00:54:42 – Adding values to options
00:56:32 – Textarea element for multi-line text
01:02:14 – Adding placeholder text
01:07:17 – Adding font styles to body element
01:09:32 – Centering the heading and description
01:11:30 – Styling the form element (width, min & max widths, alignment)
01:16:42 – Styling the fieldset element
01:19:42 – Pseudo class(:last-of-type) for selecting last fieldset
01:23:16 – Styling input, textarea and select elements
01:30:32 – Using width value of unset
01:33:25 – Aligning elements vertically using vertical-align
01:34:38 – Adding form theme colors to input and textarea elements
01:40:26 – Using attribute selector to style submit button
01:49:32 – Final styling of form and form elements
01:52:35 – Outro