Ground Tutorial - Best place for Beginners

From this tutorial, you will learn how to create simple sidebar menus using HTML CSS, and JavaScript. Currently, the HTML sidebar menu is an important web element that is often used in the case of websites. Although navigation bars can be found on most websites. However, at the present time, both the navigation bar and the responsive sidebar menu are kept in the sites that are being created. Earlier I shared many more sidebar HTML CSS designs . They are very advanced but this design is very simple. Simple Sidebar Menu HTML CSS If you know basic Html and CSS then you can easily create this CSS sidebar navigation menu. Some HTML, CSS and just 2 lines of JavaScript have been used to create this sidebar Html CSS template . Earlier I created a drop-down sidebar menu . But I used some jquery in it. There are many types of side menubars. In some cases, this menu bar appears to be in a completely fixed state while in others it is in the form of a pop-up.  We do not see the...

Creating an image zoom is very easy if you know JavaScript. In this tutorial, I will show you how to create a JavaScript image zoom effect . You will find many tutorials on this topic on the internet. But here I will tell you the easiest way to zoom an image by HTML CSS JavaScript bar. With this, you will know how to add image zoom in an image using JavaScript. JavaScript Image Zoom on Hover  Earlier I shared tutorials on creating many types of Image Zoom , Image Magnifier Glass, and Image Hover Effects . There is no need to worry if you are a beginner. Here I have shown step by step how to make image zoom javascript. You can also create zoom effects using CSS only if you want.  However, in that case, you will not be able to control the position of the zoom. In this case, the zoom effect will follow your mouse cursor. This means that the image of the place where your mouse will be zoomed. See the Pen Vanilla image zoom by Shantanu Jana ( @shantanu-jana ) on C...

Limit Character is a common feature in the input box. Whenever we see this type of JavaScript Character Limit in the input box of any type of website. The biggest example of this is Twitter. Here I have created a limit character input box. Html, CSS, and javascript are used to create. Although you can create Limit Character using the max length attribute of HTML. Limit Character In Input Field However, even if you use the maxlength attribute , you will not be able to input more than that limit in the input box. But in this case, you can input as much as you want. When your input character exceeds the limit, a kind of error will appear. Here I have used the Character's limit of 50. When you input more than 50 characters, the color of the border will change. See the Pen Untitled by Shantanu Jana ( @shantanu-jana ) on CodePen . As you can see above, this is a simple Javascript Limit Characters . A box has been created on the webpage. An input box has been created i...

In this article, you will learn how to know the user operating system with the help of JavaScript. Many times the user needs to know the operating system in different projects.  For example, suppose a user wants to download an application from your website. Many applications are different for different operating systems. So which version to download depends on the user's OS. This is a very simple project which can easily detect the user's operating system by JavaScript . But for this, you need to know some JavaScript . Detect User Operating System in JavaScript Its design is very simple. A simple box has been created on the webpage. The name of the OS that will open the webpage by the operating system can be seen here. See the Pen Untitled by Shantanu Jana ( @shantanu-jana ) on CodePen . 1. A place to see the results of OS First, a box is created using the button tag. Although you can create boxes with any tag instead of this button. <button id="download...

Many times you need to preview the image before uploading it. This type of JavaScript image preview design is mainly used for various image uploading or editing websites. You can learn how to create this Preview an Image Before Upload project from this article. The input function of HTML and basic javascript is used to make it. First I selected the file using HTML input. Then with the help of JavaScript, it will be arranged on the webpage. We find many types of inputs. One of these types is 'file' . This type = "file" will help to select a file. If you want to create any kind of custom file upload button then you have to use this type = "file" . Preview an Image Before Upload I have shared many such javascript image preview tutorials on the internet. However, most of them are not designed for beginners. So here is a very simple way to create a Javascript Preview an Image Before Upload design. See the Pen Untitled by Foolish Developer ( @fght...

Do you want to create an Automatic Popup Window using JavaScript ? OK, in this article you will learn how to create JavaScript Automatic Popup Window . Popup box is a popular element for any webpage. In many places, this type of modal box is used to show any information to the user. Suppose you ask a user to subscribe to your website. In that case, you can use this type of Automatic Popup box.  In many other cases such as login forms , newsletters , ads, etc. What is needed to create this Automatic Popup Window    ✅  Basic structure by HTML    ✅  Need to design by CSS    ✅  JavaScript to activate the popup Do you think this type of Automatic Popup Window JavaScript is very difficult to create In fact, you can build it using simple code. Create Automatic Popup Window in JavaScript The design made in this article is made by HTML, CSS, and javascript. I have created many popup boxes before without using JavaScript. However, using J...

Do you want to create a javascript loan calculator ? If your answer is yes, then this article will help you. In this tutorial, I have shown you how to create a loan calculator using JavaScript . Using JavaScript Loan Calculator you can calculate various loan-related information.  Here you can input the amount, interest rate, and time. If you input that information, you will be able to know how much interest will have to be paid every year and what will be the total amount. This type of loan calculator we use in different places. We use calculators to calculate loan-related information which is cumbersome and time-consuming. In that case, you can use this type of JavaScript EMI calculator . Loan Calculator Javascript It's much easier to create if you know HTML, CSS, and javascript. No problem if you are a beginner. Here you will find complete step-by-step tutorials. The following preview will help you to understand how this JavaScript Loan Calculator works. See the Pen ...

In this tutorial, you will learn how to get user location using javascript . I have shared many types of JavaScript projects with you before. This javascript get user location project will help to know the current location of the user. Html, CSS, javascript, and API are used to create this project. First I designed the get user location city project using HTML and CSS. Then I activated it with the help of javascript and API . Many times in many projects it is necessary to take the location of the user. In that case, you can use this type of design (get user location in javascript). Where the user does not need to manually add his location. Clicking on a button will automatically collect the user's current location. Get user Location JavaScript Here you will find live previews, source code, and tutorials. Below you will find a preview that will help you learn how it works. See the Pen javascript get user location by Foolish Developer ( @foolishdevweb ) on CodePen . ...

Many times we see Characters Input in the input box . If you want to create that kind of limit input characters javascript then this tutorial is for you. Here I have shown step-by-step how to create JavaScript limit characters input . There is no need to worry if you are a beginner. Here I have created an input box that has a limit of 20 characters . You can change the value of this limit as you like. Limit Input Characters JavaScript This type of javascript limit input length is very easy to create. Using some amount of HTML first created the input space and display. Then I designed it using CSS. Finally activated using JavaScript. Below is a preview that will help you learn how it works. See the Pen Untitled by Foolish Developer ( @foolishdevweb ) on CodePen . As you can see above there is a box on the webpage. This box contains an input space. I created that input space using the input function of HTML.  To the right of the input box is a small box where the char...

JavaScript Random Password Generator will help you to easily create random passwords. Although this type of project is not used much.  However, this type of Random Password Generator JavaScript will help you to know more about JavaScript. This is a Random Password Generator so the password cannot be customized here.  Before that, I shared a tutorial on Advanced Password Generator . If you want to customize the password then you can watch that tutorial. Random Password Generator JavaScript Here you can create a password with a single click. If you are a beginner and want to create a password generator using just a little bit of JavaScript then this random password generator tutorial will help you completely. Below is a demo section that will help you get a preview of this project. However, I have shared all the step-by-step tutorials here. See the Pen Untitled by Foolish Developer ( @foolishdevweb ) on CodePen . As you can see above, a box has been created at t...