Create A 404 Error Page Using HTML,CSS & JS

Today we will learn how to create a 404 error page with the help of HTML, CSS & JS.

Overview:-
As we know that in our day to day life we use many silly or small things or gadgets, though we have only been using them for a specific purpose even these things can be somehow creatively implemented as the above video seems to tell something about Torch.

We can implement the functionality of torch on our website as it has its uniqueness and something new that makes us feel and look good to visit the site again and again, as the above content shows how to create a torch for the website of 404 pages not found.

By using HTML, CSS, javascript, and jquery plugin we can implement this.

so let us understand the code and try to implement it.........

If you want to understand the HTML, css, and javascript basics please refer the link given below:-
https://www.w3schools.com/ 

Add HTML:-

Step 1:-First we have to create index.html and style.css file in that write the basic Html tags like Html, head, body and in the head tag, we link the "style.css" file to the existing HTML file.
 
Step 2:-In the body tag we will create text class (i.e class=" text") and wrap it into the div tag.
 
Step 3:-In div tag we will use heading tag <h1>, <h2> ,and <h3> for writing the content.
 
 Step 4:- After closing the first div tag, we have to create another div tag and we have to wrap the torch class here(i.e class=" torch").
 
Step 5:-At the end we have to create javascript code, and then we have to add the jquery library in the script tag as shown below:

Step 6:- Then we have to create another script tag, in that we will write the actual javascript code. In this code we have to show that the torch is moving on the webpage for that we are going to use a mouse move event.
 
By using this event we are going to move our torch on the webpage in x and y coordinates. Refer to the image below:-

  

Add CSS:-

Once we finished writing the Html and javascript code, now we have to write code for CSS.

Now we have to write CSS for the webpage so that it can be a little bit attractive and way kind different look and feel for that we have created a style.css file in that we are going to write code.

Let us look at the below theory for writing the css:

• In the above code, we see that the background image is set with no-repeat which refers that there will be no repetition in the border-image with left top position.

• The background-size of the image is set to cover so that it can resize the background to cover the entire container, even if it has to stretch the image or cut the little bit one of the ages

• Overflow is set to hide so that it will clip and the rest of the content will be invisible.
• The display is set to flex to flexible length on flexible items.

#Error 404 page,#Error,#Create A 404 Error Page Using  HTML,CSS & JS,#404