Building the Contact Page and Form


Not CompletedCreating the Initial Structure for the Contact Page

You've done an amazing job making it this far through the course, and you've built out a pretty cool website in a relatively short period of time and we're on our final page. I've saved one of the coolest features we're going to build for the very end.

Not CompletedBuilding the Contact Page Layout with CSS Grid

Now that we have all of our HTML in place, let's start styling this.

Not CompletedIntroduction to HTML Form Elements

In this lesson we are going to build out our HTML form. We're not going to try to style it or anything like that. Forms can be one of the more confusing topics in the world of web development and so I want to take it nice and slow so that you are completely familiar with everything that we're working on.

Not CompletedHow to Style Text Inputs with CSS

Now that we have all of the HTML that we're going to need in order to build out our form, we can start styling it.

Not CompletedStyling the Form Textarea and Button

Now that we have some of the base styles for our two text inputs, I think it's natural to move on to putting in styles for the textarea and the button.

Not CompletedBuilding the Label and Form Element Drop Shadow Styles

Now that we have the base styles for our text inputs, our message text area, and our button all in place, I think it is time to work on the next major item, which is going to be the label.

Not CompletedIntegrating Custom Form Placeholder Text Styles

We're making great progress on this form. We're getting pretty close to being done. The next item that we're going to take care of is how to update the placeholder value.

Not CompletedHow to Animate Form Labels

Okay, it is time for the moment of truth here. We are going to build out the full animation so that when we click on any of the form inputs, the placeholder is going to go away, and then our little label is going to slide down.

Not CompletedFinalizing Contact Page Styles

In this video, we are going to finalize the styles on the contact page. I've seen three items that I'd like to clean up.

Unsupported Browser

devCamp does not support ancient browsers.
Install a modern version for best experience.