Morioh
Login
Moshe Langworth

Moshe Langworth

3 years ago

In this two part series I go over how to create this Account Creation Form with Basic Validation using HTML, CSS and Vanilla JavaScript. In the first part tutorial I showed you how I used the Figma design to define the structure of the elements in HTML and then I wrote all of the styling with CSS. I use a combination of CSS Grid and Flexbox for the layout. In this tutorial I show you how to add Vanilla JavaScript to complete basic validation. I go over all of the code line by line to show you the variables I created and how I wrote all of the functions. I also show you how to add css classes for the success and error states.

Codepen - Part 1: https://codepen.io/angeladelise/pen/mdEaQZd
Codepen - Part 2: https://codepen.io/angeladelise/pen/MWeLjZP

In this video I show you:

  • 0:00 - Intro
  • 1:03 - Starting HTML Code
  • 0:44 - HTML Code
  • 1:42 - JavaScript Variables
  • 3:46 - JavaScript Functions
  • 9:42 - CSS Classes for Success and Error States

#html #css #javascript

Account Creation with Basic Validation Part 2 | Figma Design to HTML CSS JS | Vanilla Javascript

youtube.com

Account Creation with Basic Validation Part 2 | Figma Design to HTML CSS JS | Vanilla Javascript

In this two part series I go over how to create this Account Creation Form with Basic Validation using HTML, CSS and Vanilla JavaScript. In the first part tutorial I showed you how I used the Figma design to define the structure of the elements in HTML and then I wrote all of the styling with CSS. I use a combination of CSS Grid and Flexbox for the layout. In this tutorial I show you how to add Vanilla JavaScript to complete basic validation. I go over all of the code line by line to show you the variables I created and how I wrote all of the functions. I also show you how to add css classes for the success and error states.

2.30 GEEK