DEV Community: codinglabweb

Login and Registration Form in HTML and CSS

codinglabweb — Fri, 25 Jun 2021 14:11:38 +0000

Hello friends, today we are going to learn How to Create a Responsive Login and Registration Form in HTML and CSS. There are a lot of Forms Design that I have created before but, to date, I have not created a login and registration forms together or on one page.

What is the Login and Registration Form
Login Form means the login page or section where users need to enter their login details like email, phone number, and password. Registration form is the process to register user details to make login details for entry in the particular page or website.

In the login form section, we can make two input fields one is for the user email address or phone number and another for password and this is mandatory and in the registration form we have to add some extra input field like the input field of name, phone number, password and other.

Let's have a look at the image of the Login and Registration Form. There you can see only Login Form but when you click on the Signup now the right side image smoothly flips into the left side then the Signup form appears and Login Form Hides.

I have made this Responsive Login and Registration Form in HTML and CSS only and I have not used any single code of javascript for building this Login and Registration Form. I promise that you can easily understand all the HTML CSS code that I have used to make this Form.

To see the real example of this Login and Registration, please do watch the video tutorial of this design. After watching the tutorial you will definitely understand that how HTML and CSS code is working to make this Login and Registration Page Perfectly.

Login and Registration Form in HTML and CSS | Source Code

You can download all source code from the given link. Click Here To Download All Source Code

Image Slideshow HTML CSS

codinglabweb — Mon, 21 Jun 2021 09:55:49 +0000

How to make an automatic image slider in HTML and CSS?

Hello readers, today in this blog I'm going to build an Automatic Image Slider in HTML CSS. Earlier I have created lots of Card with Sliding Animation but to date, I haven't built any Image slideshow. So without further ado let's get started.

What is an Automatic Image Slider?
Automatic image slide means the changing or sliding images and displays one by one and step by set.
In this automatic image, slideshow users do not need to change images manually.

As you can see on the given Image on the webpage. Actually, this is not one image there are other 3 images that are hidden. Let's watch the following video then we will know the real demo or example of this automatic image slider or automatic image slideshow.

You can download all source code from the given link. Click Here To Download All Source Code

Create Accordion in HTML CSS & JS

codinglabweb — Sat, 19 Jun 2021 08:27:24 +0000

How do you create an accordion using HTML, CSS, and JavaScript?

Hello Readers, we are going to learn How to Create an Accordion using HTML CSS, and JavaScript. This accordion will be fully responsive. There are several projects that I have created before like Complete website, Drop-down Navigation Menu, Login Form, Cards so on, but till I had not created any accordion. So That's why without further ado let's get started.

What is Accordion?
Accordion is the box on the webpage that contains mainly text article and have drop-down features. Accordion takes a small area and that displays only questions to the user, if the user wants to read the answer then they need to open it by clicking or doing a hover on the question.

As we can see on the webpage of google, when we search for something there on the news feed we see one section as a People Also Ask right? that section is called accordion.

Basically accordion contains five headings and we have to click on that heading to see an answer or more headings. You would be thinking what is heading, Look at the Image of accordion that I have given on the webpage, there are total five-question, that is called headings.

Responsive Accordion | Source Code

You can download all source code from the given link. Click Here To Download All Source Code

Dropdown Sidebar Menu using HTML CSS

codinglabweb — Tue, 15 Jun 2021 05:28:02 +0000

Q: How do I add a dropdown to the sidebar?
A: After reading and watching the given article and videos, you can create the Responsive Dropdown Sidebar that I have shown on the webpage.

Hello readers, today we are going to learn to create a Responsive Dropdown Sidebar Menu using HTML CSS, and JavaScript. If you want this sidebar design without a dropdown menu then you can visit this link - Responsive Sidebar Menu.

What is the Dropdown Sidebar Menu?
Sidebar means the section on the website that is located on the right or left side with some important navigation links and the user can open or close it. Dropdown menu means that sub-menu or nav links which are hidden in very first but when user do hover or click on the main nav link then sub-menu appears.

If you want to watch the real virtual demo and tutorial of this sidebar menu with a submenu then I highly recommend you to watch the given video tutorial of the dropdown. After watching the video I sure you will understand how all code works behind this design.

Dropdown Sidebar Menu | Free Source Code

You can download all source code from the given link. Click Here To Download All Source Code

Product Card HTML CSS

codinglabweb — Mon, 07 Jun 2021 12:56:27 +0000

Hello guys, we are going to create an Animated Product Card using HTML CSS, and JavaScript. Before I have created lots of product card design by using HTML CSS, Animated Profile Cards is one of them but today we will add Little JavaScript too, and I sure that helps to make out Product Card Template more beautiful

What is a Product Card?
A product card is a sample of the specific product from where the user can choose the product, product's size, colour and designs as they need. Basically, product card on the webpages helps for users to find products for buying and for the company to sell.

Generally, on the product card design, we add any types details as we want but some major things we must add are:
High-Resolution Image of Product
Names and logo of the Product
Price of the Product
Add To Cart Button
Colour and Sizes Option

The image of the Responsive Product Card that you are seen on the webpage is not only a design, but it is also an animated design. I mean that when I clicked on the colour option, the shoe colour changes according to the circle colour.

If you want to watch the real demo of Responsive with Animated Product Card, I highly recommend you to watch the given tutorial of this product card. And another benefit of watching the video tutorial is that you could get an idea of all the codes that I have used on this product card design.

Product Card HTML CSS | Free Source Code

You can download all source code from the given link. Click Here To Download All Source Code

Drop Down Menu with Sub Menu in HTML & CSS

codinglabweb — Mon, 24 May 2021 05:46:06 +0000

How to create a dropdown navigation bar in HTML CSS?
A: To create a responsive drop-down navigation bar with a submenu, I have provided essential codes article and video tutorial below:
Hello readers, today we will learn How to Create a Responsive Drop Down Menu with Sub Menu in HTML & CSS and a little touch of JavaScript. Earlier, I have created various blogs of Responsive Navigation Bar using HTML and CSS, but I haven't built any drop-down navigation menu bar.

What is Drop-Down Menu?
Simply, Drop down menu means that features on the navigation bar from the sub-menu come out while clicking or by doing hover on the parent navigation links. Submenu helps to reduce space on the navigation bar that makes it easier for users to explore the things that they want from the website.

How many links should be in your main navigation and sub-menu?
You can add nav links on your main navigation menu and sub-menu as need of your website and it also depends on the width of the navigation menu bar. Normally you can add 5 to 7 nav links on the main navigation bar and 3 to 5 on the drop-down sub-menu.

What is the element you have included on the drop-down navigation bar?
As you can see on the given image of the drop-down navigation menu with sub-menu. Basically, you can add the following elements that I have added to my drop-down menu. You can add the following elements to the navigation menu.
Your Logo
Navigation Links (5 to 7) normally
Sub-menu Links (3 to 5) normally
Social Media Icons.
Sidebar Open/Close Button (Responsive)

You can download all source code from the given link. Click Here To Download All Source Code

How To Create Admin Dashboard in HTML and CSS | Free Code

codinglabweb — Sun, 16 May 2021 06:11:58 +0000

Q: How do I create a dashboard in HTML and CSS?
A: After reading watching the following article and video tutorial you will definitely able to create a responsive admin dashboard panel in HTML and CSS with and a little touch of JavaScript.

Hello readers, today will learn to build an admin dashboard panel design by using HTML and CSS.
Earlier I have created a Complete Portfolio Website using HTML CSS and JavaScript with Free Source Code. Now it is time to create a dashboard template panel.

What is Admin Dashboard?
Admin Dashboard is a header section of the website where the admin can see the overall performance of his/her website. Admin dashboard panel helps to make quick decisions for admin to make decisions of what should they improve in his website or business.

What should an admin dashboard have?
Some Major thing that Admin Dashboard Pane Have Are:
Overall details of the website
Quick Navigation Links
Search box
Responsive Feature
Login and Logout Feature
Fully Controllable

As you can see on the given image of the admin dashboard panel on the webpage. I have added side navigation and a horizontal navbar. There are some boxes which are showing the overall performance of the business and some other major details.

Create Admin Dashboard in HTML and CSS | Free Code

You can download all source code from the given link. Click Here To Download All Source Code

How To Copy Text To Clipboard using HTML CSS and JavaScript | Free Source Code

codinglabweb — Fri, 07 May 2021 09:34:52 +0000

Q: How To Copy Text To Clipboard using HTML CSS and JavaScript?
A: After watching and reading the following video tutorial you will definitely know, how to copy text using HTML CSS & Javascript.

Hello friends, today we will be going to learn how do we copy text to a clipboard using JavaScript. I have posted many videos and articles before related to the Javascript project, now this the something new that we are going to build.

What do you mean by Copy Text To Clipboard?
The process of copying text, images, or other elements to our computer clipboard for paste in other places is known as copying text to clipboard. The copying method is the best and easy way to duplicating something for other purposes.

As you can see on the given image of our today project. We can see some HTML codes are inside the box and one button underneath this box. Basically, when we click on that copy-coded button, all text inside the box will be copied to our clipboard and we can paste it anywhere we want. We don't need to select text and copy them manually, it can be done with just one click.

Some questions and answers people asked on this topic.

Q: How do I copy text to the clipboard?
A: Normally, just select text, images or other elements with the mouse left button, and press CTR + C then selected items will be copied in the clipboard, now you can paste anywhere as you want.

Q: How do I copy text from div to clipboard on the button click?
A: Execute the div where text is in inside by making onclick() function on the button then in inside of that function, write div.select(); by doing this you text inside that div will select only, now to copy those selected texts, just type document.execCommand("copy"); then your text will be copied on your clipboard.

Copy Text To Clipboard using HTML CSS and JavaScript | Free Source Code

You can download all source code from the given link. Click Here To Download All Source Code

Make A Simple Website using HTML and CSS | Free Source Code

codinglabweb — Sun, 02 May 2021 17:10:13 +0000

How can I make a beautiful website using HTML and CSS?
After watching and reading the following video and article, you will definitely able to create beautiful websites using HTML and CSS as an image.

Hello, friends today in this blog I will teach you how to Create A Website in HTML and CSS Only. Earlier I have shared a blog about a Complete Personal Portfolio Website using HTML CSS & JavaScript and now I'm going to create a simple website.

What is a Website?
A website is a combination of several web pages of codes, and hyperlinks, and designs. There are various types of websites like E-commerce websites, Portfolio websites, magazines, or Social Media Websites actually blog is also a website. The website can be used for educational or marketing and other purposes. Websites have not limited boundaries.

How can I make my website attractive?
To make a website beautiful and attractive you need to follow the following steps

Take simple colors for your website.
Use a maximum of 3 to 4 color
Make Website Responsive (Fite in any screen sizes devices)
Try To use the same sizes and font family for text.
Keep essential navigation links inside the navigation bar

Simple Website using HTML and CSS | Free Source Code
You can download all source code from the given link. Click Here To Download All Source Code

Responsive Navigation Menu Bar HTML & CSS

codinglabweb — Sun, 02 May 2021 06:26:23 +0000

Q: How can we create a responsive navigation bar using HTML and CSS?
A: After reading the given article and watching the video tutorial for creating a Responsive Navigation Bar you will definitely able to create the navigation bar that i have given as an image
Hello readers, today in this blog I'm going to create a Responsive Navigation Menu Bar By using only HTML & CSS. In a previous blog, I have shared How to Create a Sidebar Menu without using JavaScript and now I'm going to create a responsive navbar.

What is Navigation Menu Bar?
Basically, the Navigation menu is a horizontal bar where one logo and some hyperlinks exist. It is the most important program on the webpage. The main purpose of the navigation bar is to directly redirect to the web pages by clicking on the hyperlinks they want. Another main purpose of the navigation bar is to make the user's works convenient and easier. The navigation bar should be perfectly fit in all screen devices.

As you can clearly look at the given image of this program Navbar Menu. On the top side, there is one horizontal bar. On the right side, there is one logo, and on the left side, there are some hyperlinks. Bottom of this bar there is a sidebar on the left side actually appears when that webpage moves into small devices screen. We have to put essential hyperlinks inside the navigation menu bar like "Home, About us, Contac us, Privacy policy, terms and & conditions and ofcourse a logo". The minimum we should keep 5 to 7 links to make the best navigation menu.

You can download all source code from the given link.
Click Here To Download All Source Code

Responsive Registration Form in HTML & CSS

codinglabweb — Sun, 02 May 2021 06:15:11 +0000

Q: How do I create a Signup or Registration form using HTML and CSS?
A: To Create a fully responsive registration form like n the image, you just have to read the following article and watch the video tutorial.

Hello Readers, today in this blog I will create a Responsive Registration Form using HTML and CSS. Earlier blog I have shared How can we create a simple login page using HTML and CSS?. Now I'm going to build a registration form.

What do you mean by the Registration of Signup Form?
Registration form is the form that contains various input fields of different input details where the user needs to fill his/her details to submit for a particular webpage. There are various types of registration but the main purpose of this type of form is to collect user's information or details.

As you can see on the given image of the signup of the registration form. Normally you can add 6 to 10 input fields on the signup form. Many people are confused about what they should include in the signup or registration form. You can add the following elements in your signup or registration form.

Company Logo
First and last name
User name or Email
Phone number
Country/ Region/ State
Date and Time
Gender Selection
Button

Responsive Registration Form or Page | Source Code
You can download all source code from the given link. Click Here To Download All Source Code

Responsive Footer using HTML And CSS | Copyright Footer

codinglabweb — Sat, 01 May 2021 18:34:17 +0000

Q: How do I make a fully responsive footer in HTML and CSS?
A: To create a fully responsive footer in HTML and CSS, you need to read the given article and watch the video tutorial. Then you will definitely build a beautiful responsive footer that I have given as an image.

Hello readers, today in this blog, we are going to create a simple but very beautiful footer by using HTML and CSS. Earlier I have created a responsive dark footer in HTML and CSS which you guys like most. So now it's time to create a footer in blue color as you can see on the image.

What does the website footer mean?
Website Footer is the section that is located at the bottom of every website and it contains essential quick links. The main purpose of the footer is to make user's work easier and convenient for a quick movement from one webpage to another. We just need a footer to make our website complete and to make users work faster.

As you have seen in the video tutorial of responsive footer design using HTML and CSS. For the footer or any type of design we should add code inside the body tag, we have a separate tag for the footer as the name of the footer. We have to add HTML code for the footer inside the footer tag. To get the footer stick to the bottom we have to give the following CSS.
position: fixed;
width: 100%;
left: 0px;
botttom: 0px;

From the CSS media query, we can make the footer fully responsive, you can watch on the video tutorial how we can make the footer responsive in just seconds.

Responsive Footer using HTML And CSS | Free Source Code

You can download all source code from the given link. Click Here To Download All Source Code