Project using HTML and CSS for Beginners | Creating a working Torch animation | Explained in the easiest way

We will be creating a project using HTML and CSS. The project will be explained step by step and as easy as possible. You will be surely learning something from this project.

So, we will be creating a working Torch (as shown below) using only HTML and CSS.

So, let's get started. Follow these steps to create your own working Torch. We will be creating this project in Microsoft Visual Studio Code (VS Code).

Step 1 - Create a folder and open it in VS Code.

Step 2 - Create two files, one .html file and the other as .css file.

Step 3 - Write the following HTML code (given below) in .html file.

Click on the image to view

Now, let's understand the HTML Code - 

• Firstly, we wrote the basic structure of HTML.

• In the Head tag, we linked the css file by using the "link" command.

• Now comes, the body of HTML. Here we gave each part of the Torch, a different ID so that the CSS properties can be applied correctly.

• Input tag acts as the button to ON or OFF the torch light. Remember here the type of input is "Checkbox".

• All the parts of the torch are put together in the center tag, to make the torch visible on the center of the page and to align the parts of torch.

Step 4 - Write the following CSS code to make your torch visible and working.

Click on the image to view

Now let's understand the CSS code which is very important -

• "check::before" property  represents the initial stage of torch, that is the torch is OFF. It is marked by showing "OFF" on the button of the torch.

• When you toggle (change the state) the torch button, the "#check:checked::before" is executed and the state of torch becomes "ON". It is marked by showing "ON" on the button of the torch. 

• In the above command, the use of input tag comes into play, that is the checkbox is selected, when we toggle the button to ON and hence the properties of "#check:checked::before" are executed.

• Similarly, the "#check::after" and "#check:checked::after" are execute, on toggling the button.

• "#part", "#d", "#part1" are properties that we have used in CSS to design the upper part, light, and lower part of torch respectively.

• We have used "-webkit-appearance:none", to hide the checkbox from the torch.

These were the simple steps to create a working torch, you can customize in your way and make it look good.