Skip to main content

Posts

Showing posts from June, 2022

Neon button using HTML & CSS | How to style buttons using HTML & CSS | Deesan Tutorials

Hello there!!! Today we will be learning how to create and style a Neon button using basic HTML & CSS. Here is what we will be doing: Buttons are an integral part of any website in the world wide web. Buttons help us to navigate through a website or perform a certain action. Many websites which have a bad button design fail to convert visitors to customers because HTML & CSS Buttons are the call to action to make the client perform a certain step. So today, we will learn to create a simple, yet attractive neon styled button using HTML & CSS. I've also made a YouTube tutorial covering this under 15 minutes, so take a look if that interests you: So let's get started Step 0 - Prerequisites Nothing much, just basic knowledge of HTML & CSS. We use Google fonts to style the text, which you can skip if it is a problem. Step 1 - Basic Structure So, fire up your IDE and paste the following code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <!DO...
Post a Comment
Read more

How to create Login form in HTML & CSS | Simple Sign in form | Deesan Tutorials

Hello there!!! In this tutorial, we will learn to create a simple and minimalistic login form. A login form helps you to access the protected content in a website. You will require PHP & MySQL to make it functional, but today, we will learn to design the form using HTML & CSS. So let's get started! Here is what we will have by the end of this tutorial: I have also made a quick youtube video tutorial, which you can access if you are short of time. So let's get started! Step 0 - Prerequisites Nothing much, just basic HTML and CSS. That's it. You are still welcome to learn bootstrap, by which you can design the whole form with lesser lines of code. But since this tutorial is for absolute beginners, we ain't using it. We will be using Google fonts to beautify our text, you can just skip the part if you are not interested. Step 1 - Page structure So, fire up your IDE and paste the following lines of code: 1 2 3 4 5 6 7 8 9 10 11 <!DOCTYPE html...
Post a Comment
Read more

Creating a simple search bar using HTML and CSS

Hello there! Today we will be covering one of the most basic, yet essential things on most websites and blogs: A search bar. A search bar helps clients to navigate through the website rather than typing the URL in the browser, thereby avoiding the crumblesome process. In this post, we will be creating a simple and minimalistic search bar using basic HTML and CSS Here is what we will be doing: Here is the YouTube tutorial: So let's get started! Step 0 - Prerequisites Since this is a simple tutorial, not much is expected from you, except for basic HTML and CSS. We will be using font awesome library for the search icon. If you are not interested in external libraries, you can just insert a search image and style it accordingly. Step 1 - Initialize Just basic html tags and loading the font awesome library 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html> <head> <title> Simple search bar </title> <!-- Font awesom...
Post a Comment
Read more