8 Easy Steps: How to Design a Login Page in 5 Minutes?

by Roxanne Reyes Founder of Wae Tech Solutions Buffalo, NY

 

 

This tutorial is going to be incredibly and super sonic fast.  This is going to be about how to create an easy markup login page.

It will only take you minimum 5 minutes to create.  It’s easy to do because we will be using Bootstrap for the framework.  Bootstrap will enable us to build an easy markup login page by using classes that can make the design beautiful.  The buttons will be easy to do and not to mention the input types also.  You can also utilize Bootstrap’s classes for margins and padding and all kinds of awesome things, but we’re just going to mainly use it for the markup.

There’s not that much styling going on because PHP is about focusing on the back end.  We care more about the functionality of making the application work.

The fun has just begun.

Are you ready?

Because I am.

Lets get started.

Start the easy markup login page

8 STEPS TO DESIGN MARKUP LOGIN PAGE:

 

1.Create a login.php page with boilerplate HTML markup

 

html boilerplate

 

 

2.Go to getbootstrap.com 

 

  • Click on download button
  • Grab and copy the minified Bootstrap version

 

bootstrap

 

 

Copy minified Bootstrap

 

bootstrap min

 

 

3.Paste Bootstrap in your HTML head

  • See example below

 

bootstrap link head

 

 

4.Lets do the markup for the easy markup login page

  • Create a <div> with a class of container
  • Create another <div> with a class of col-sm-6 (this will make the columns responsive using 6 columns)

Example:

<div class=”col-sm-6″>

 

5.Next, create a form

  • Create tags <form action=”login.php” method=”post”>
  • Make a label
  • for=”username”

Example:

  • <div class=”form-group mt-5″>
  •    <label for=”username”>Username</label>

 

Next, Create an input field

  • <input type=”text” name=”username” class=”form-control”>

 

See Result below:

<div class=”col-sm-6″>

<div class=”form-group mt-5″>

<form action=”login.php” method=”post”>

<label for=”username”>Username</label>

<input type=”text” name=”username” class=”form-control”>

</div>

 

6.Copy and paste this markup for the password section

  • Change username label to password
  • Change username input to password type
  • See highlighted areas below

 

<div class=”col-sm-6″>

<div class=”form-group mt-5″>

<form action=”login.php” method=”post”>

<label for=”password“>Password</label>

<input type=”password” name=”password” class=”form-control”>

</div>

 

 

7.Finally, create a button for submit

 

  • Create a button for submitting the form
  • Create a class of btn btn-primary (this will make the button blue)
  • make sure to have the name=”submit” to use for PHP later
  • See example for easy markup login page

 

<input class=”btn btn-primary” type=”submit” name=”submit” value=”Submit”>

 

 

8.Here’s the Final result

It should display like this.

 

login markup

 

 

You did it!!!!!!!!!

Ignore the connected part at the top

Wasn’t that an incredibly easy markup login page?

That’s it!  If you found this helpful, leave a comment below.  The next article will be about the logic behind the markup.  We will be connecting to the database in the next article.

If you have an awesome design, send it my way.  I would love to see what you come up with.  This was just a plain ole login form.  I didn’t want it complicated, but just to the point.  This is supposed to be an incredibly fast and easy markup login page, so there you have it.

There’s some cool designs out there I’ve seen on codepen.io with overlay and animation and stuff.  But maybe next time.

If you’re following the PHPMyadmin database series in order, see below for the past articles.  I think you’ll find it interesting.

I think you’ll find it fun and not boring.

Thank you for enjoying the easy markup login page article!

Until next time, keep coding ladies and gents!

 

Some cool reads:

My journey to mastering PHP programming: Building my first PHPMyadmin database

My journey to mastering PHP programming: The easy and best way to PHPMyadmin creating tables and inserting data

 

Email me: r.reyes@waetechsolutions.com