This article will give you a basic tutorial for creating a website login page with HTML, CSS, JavaScript (Bootstrap 5) and an external API. The login will perform by the use of an external **API **from MeCallAPI.com (my website :D). If you want to try a mockup API for CRUD and authentication operations, feel free to check on the website.

You can also check an example of the login page similar to what we want to achieve in this article

Software Installation

It’s only required a Text Editor/IDE (VS Code, Notepad, etc.) and a web browser (Chrome, Firefox, Edge, etc.) to do this tutorial!

Let’s Code! (HTML and CSS)

HTML documents are designed to be displayed in a web browser. There are more than a hundred of HTML elements you can choose to create an HTML file.

Let’s start from creating index.html. I will explain a bit about what is included:

• Bootstrap 5, a framework to create a responsive web pages (line 9 and 36).
• login.css,anextra CSS(Cascading Style Sheets) to style your **login.html **in addition from the Bootstrap 5 (line 12).
• A login form with the inputs for username and password and a button (line 15–32).
• Sweetalert,a JavaScript library for easily creating nice popups (line 35).
• login.js, JavaScript file using in **login.html **to call a login **API **(line 34).

#javascript #api #html #css #web-development