Photo by John Tekeridis: https://www.pexels.com/photo/person-using-smartphone-340103/

Simple Web Designs

Francis Salazar

March 10, 2023

Creating simple forms using HTML and CSS is an essential skill for web developers. In this article, I'll show you a simple design I made using HTML, CSS, and Bootstrap. By the time I'm creating this project, I'm still experimenting and exploring how to create layouts using bootstrap. This project helps me grasp simple concepts of flex using bootstrap.

The goal is to create a basic login form with a professional look and feels using Bootstrap and Font Awesome libraries. I imported the Bootstrap CSS and JavaScript libraries and the Font Awesome icons kit. The HTML Form consists of several elements, including a title, two input fields (for email and password), a "remember me" checkbox, a "forget password" link, and two buttons (one for login and the other for logging in with Google or Facebook).

Figure 1. Code Snippet of the HTML code of the Form Design.

I created this CSS code for styling the login form. I import the 'Inter' font from Google Fonts and applied it as the default font style for the whole page. The form is styled with a white background, border-radius, and a width of 50vw. I used flex on the body although it is a bad practice, I tried to use flex to center the whole login form. The form inputs and button are styled with appropriate widths, heights, and colors, and also have hover and focus effects. There are also media queries to adjust the styling for smaller screens.

Figure 2. Code Snippet of the CSS code of the Form Design.

This is the output of the HTML and CSS code above.

Screenshot of the Form Design created using HTML, CSS and Bootstrap
Figure 3. Output.