BigBinary Academy

Login Form Project

In this project, you need to style a form that allows people to login to an application. This form will collect a user's username and address. To get started, please scroll down and look at the tasks listed below.

Login Form

Task 1

Add a background image to the body using the provided resource.

Task 2

  1. Add Home, Services, Products and Contact Us links in the top header section.

  2. Add the heading with the text Login Form below the header section.

  3. Add the profile image using the provided resource.

  4. Make the profile image circular.

  5. Add a thick white border to the profile image.

Task 3

  1. Add the Username label below the profile image.

  2. Add an input element below the profile image.

  3. The input element should have a placeholder value of Enter Username.

  4. Ensure that the label and the input are side by side and not on top of each other.

  5. Next, add the label for Password.

  6. Add an input element to receive the password value.

  7. The input element should not show the password being typed in it.

  8. The input element should have a placeholder value of Enter Password.

  9. Ensure that the label and the input are side by side and not on top of each other.

Task 4

  1. Add the Login button.

  2. Add a checkbox with text Remember Me.

  3. Add the link for Forgot Password.

  4. Add the Cancel button.

  5. Style the buttons appropriately as shown in the image.

More Projects

These are some of the other projects you can build.

Password Generator Project
Password Generator

In this project, you'll make an application that creates strong passwords for the user. You will add features to control which characters are allowed in the password. Finally, you'll provide the user the ability to copy this password and use it.

Shopping Cart

In this project, you'll create a shopping cart webpage for a shoe store. You'll create the main dashboard where the shoes will be listed. You'll also create functionality for filtering and sorting the shoes. Finally, you'll add a shopping cart where the users can add the shoes of their choice and place an order.

Calculator Project
Calculator

In this project, you will build a calculator with all basic functionalities like addition, multiplication, division, and subtraction. With this, you'll get a good understanding of DOM manipulation, JavaScript logic & CSS design.

Chess Board Project
Chess Board

In this project, you'll style a Chess Board using HTML and CSS. You will create an 8x8 chessboard with alternating light and dark squares. You'll add icons for the chess pieces from the resource we provide below. Please ensure that you use only CSS Grid for this project. Avoid using CSS Flexbox.

Currency Convertor Project
Currency Convertor

In this project, you'll build an application that converts one currency to another. You will get the current conversion data using an API. You will also create the layout to provide the user the option to choose the two currencies and the quantity. Finally, you'll convert one currency to the other and show it to the user.

Tic-Tac-Toe Project
Tic-Tac-Toe

In this project, you'll create the tic-tac-toe game. This is a two-player game. Player 1 will click on a cell to mark an 'X' in it. Player 2 will then click on a different cell to mark an 'O' in it. This will continue till a player gets three marks of the same kind in a row. The three consecutive marks can be horizontal, vertical or even diagonal. You'll create the layout of the game and handle the winning, losing or tie conditions.

View all projects
Made with NeetoSite