How to Webdesign - Flat Login Form

Welcome to part one of a this serie! When the other parts of this serie are made I will link them below. For this instructable you will need to know some of the basics of HTML and CSS.

Today, I will teach you how to create a flat login form that can be integrated into your website, blog or something else. If you are interested in learning more about the flat or material design, this is a good place to start your search.

So, let's get started!

Before You Begin

Before we begin with coding, you will need the following things.

• Code editor (Example: Notepad++)
• Online editor (Codepen is a great one)
• Coffee (Most important)

Download Notepad++

Once downloaded and installed, make a directory on your desktop and name it whatever you want. Within this folder your going to create two files (do this with notepad++). The first one is index.html and the second one is main.css. These are the stylesheet and the web page viewer.

If you want to use Codepen for this instructable, you will need to create an account at Codepen. When that is done you can start with creating a new pen.

PS: I will add some photos to each step to make it a little bit easyer for you.

The HTML

Before we begin style the login page with the CSS, we will first need the HTML which will include everything from the buttons, links, fields, and the basic layout.

First we’re going to create a simple container, and a form with a with the fields we need. Also I can't show the code here because I don't have a pro account, but below you will find a link to the codepen.

• Link

Do note that we’re only create the markup now, styling is in the next step.

I will include some comments in the file that explains some things.

The code

- HTML file

Now that we have added the HTML for our project we can start with the CSS part in the next step.

The CSS

After the completion of the HTML we now need to begin with the CSS part of the design. Firstly, we need to begin with the layout of the form. To begin, start by adding the code below. When adding this css be sure to add some white space to orginise it better. (try to add your own comments)

I will include some comments in the files so you know what it does.

The code

- CSS file

PS: I would have liked to include all of the code in code boxs, but I dont have a pro account.

Having added the code above, we have finished the CSS part for your project.

Finished!

This is the end of part one for this series. In part two we're gonne take a look inside PHP, PDO and much more!

I hope that you have learned much about desiging a flat login form and the animation of it, also feel free to use this in your projects.

Also I thought it would be a good plan to start the wordpress series that covers my own wordpress template. The serie explains how to make it on your own! If you guys want to see the serie getting started let me now!

If there are any problems feel free to contact me.