Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:8Length:58 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Prerequisites

Hello, and welcome to the first lesson of this course. Before we start coding, let’s look at the CSS and JavaScript components we’ll need to build our form.

Related Links:

2.1 Prerequisites

Hello and welcome to the first lesson of this course. Now before we start coding, we need to know what kind of CSS and JavaScript components we need for our page and we're gonna start with the CSS ones. There are only two of them actually we need to normalize C.S.S. which is our go to reset file and we need some fonts from Google. We're going to be using Roboto condensed and Roboto Mono, now for JavaScript we're going to use jQuery. Go ahead and download it from here or if you're using a package manager. You can more easily download it from there, and we'll also be using a jQuery plugin called Input Mask. Now Input Mask works something like this. It basically adds a mask to your inputs so the data you enter has a predefined specific format. And we'll be using this for some of the fields, well actually for all the fields, from our credit card form. It's gonna come in real handy. Now once you download these, go ahead and create an index.html file and let's start by referencing the Stylesheets in the head of our page. As you can see I have two Stylesheets here. Let's go with normalized first, so we'll go CSS, normalized CSS. And then another one we're gonna reference our style.css which currently just has an addition to the CSS recess file box-sizing and font-smoothing. Then let's go ahead and load the Google fonts. That's pretty easy just grab the link provided by Google. So we're getting Roboto Condensed in the 300, 300 Italic and 700 weights, and Roboto Mono for 500 which is a medium weight. Now moving onto JavaScript we're gonna reference this in the the footer of our page and for JavaScript we have jQuery.latest, jQuery.inputmask.min.js I recommend you get this file and scripts.js. So we are loading them just like this. Now currently scripts.js is empty but we're gonna write all of our scripts in there at the appropriate time. Now also I have an IMG folder which just contains some SVGs currently, we'll deal with these a bit later. Now these are all the prerequisites for this particular form. Now that we have everything set up we can start coding and we'll begin in the next lesson with the markup for the entire page. I'll see you there.

Back to the top