NS GHS GOOGLE

Domain Gratis Sampai Akhir Tahun!! Buruan Klaim

2022-11-25T09:43:00.001-08:00

Domain Gratis my.id dan biz.id Sampai Akhir Tahun!!

Buruan klaim skrng juga...

Caranya Seperti dibawah ini:

1. Silahkan Daftar DISINI setelah daftar, verifikasi code dan login

2. Lalu pilih domain .my.id atau .biz.id

3. Kemudian masukkan kupon ludes-myid untuk domain .my.id dan ludes-bizid untuk domain .biz.id

4. Kemudian Live Chat Customer Service untuk aktivasi domain

5. Selesai.

#dewabiz

Get IPs List and Weblist 2022

2022-11-01T17:14:00.002-07:00

Get IPs List and Weblist 2022

(Cara mencari ips dan weblist 2022)

#Get IPs Multi API

Bahan

- Termux & X-plore (diplaystore)

- Script Get IPs Multi API

- Kuota/Wipi

Lalu buka X-plore untuk membuat folder agar mudah mempindahkan list/result

- Cara install :

$ pkg install python2 -y

$ pip2 install colorama

$ git clone https://github.com/Noniod7/Get-IPs-Multi-API

$ cd Get-Site-List-Multi-Api

$ python2 get-ip.py

Lalu pilih API dan pilih page.

#ReverseIP MultiThread V¹

- Cara install :

$ pip2 install requests

$ pip2 install colorama

$ git clone https://github.com/Noniod7/ReverseIP

$ cd ReverseIP

$ python2 reverse.py

List:~# result.txt

Thread :~# 35 (bebas)

Yang masi n00b bisa nonton tutorial installnya di bawah ini

#defacer #hacker #tools #toolsdeface #noniod7

Create Popup Modal Box in HTML CSS & JavaScript

2022-10-18T02:58:00.000-07:00

Hey buddy, I hope you are doing and creating mindblowing content. Today I have brought a beautiful and valuable project for you. Today you will learn to Create a Popup Modal Box in HTML CSS and JavaScript. As far as the modal box is concerned, if you want to create Popup Modal with Message Box HTML and CSS only click the given link. It is also called a dialog box.

A modal Box is the type of section which is displayed on the front of the webpage, and it contains information, warning, errors, and other things. Actually, it appears when the user did any action on the webpage. Similarly, content models can have different sizes and shapes.

Take a look at the given image of our project [ Popup Modal Box]. Basically, at the top, there is an icon of the tick, and below that tick, there is some text and underneath that text, there are two buttons. In fact, according to this project [ Popup Modal Box], the given modal box will appear after we click on the button which will be available before coming to this modal box. We can close this modal box simply by clicking on the close button or the outside of the modal box which will be in a little darker color.

To see the real demo of this project [Popup Modal Box]. How it appears, how we can close it, and all the animation I have added to this Modal Box you have to watch the video tutorial of this project, after watching the video tutorial of this project [ Popup Modal Box], you will also get the idea of HTML CSS and JavaScript code.

Create Popup Modal Box in HTML CSS & JavaScript | Video

Yeah, I have provided all the HTML CSS, and JavaScript code that I have used to create this project [ Popup Modal Box]. Before getting into the source code file, I would like to briefly explain the given video tutorial.

As you have seen in the video of this project [ Popup Modal Box]. At first, there was a button on the screen with the name "Open Modal", When I clicked on that button the button disappeared and a modal box, as well as a little dark color overly behind the modal box, appeared. As you the modal box can be closed by clicking on the close button or just by clicking on the outside of the modal box. To make the UI design of this project [ Popup Modal Box], I just used HTML and CSS, and to open and close it, I used some JavaScript code.

I hope now you can create this project [ Popup Modal Box] easily. If you are feeling difficulty making this modal box. You can take all the HTML CSS and JavaScript code of this modal box from below.

Popup Modal Box [Source Codes]

To create a Popup Modal Box using HTML CSS and JavaScript, follow the given steps line by line:

1. Create a folder. You can put any name in this folder and create the below-mentioned files inside this folder.

2. Create an index.html file. The file name must be index and its extension .HTML

3. Create a style.css file. The file name must be style and its extension .css

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source codes of this Border Loading Animation by clicking on the given download button.

First, paste the following codes into your index.html file

HTML CODE:

<!DOCTYPE html><!-- Coding by CodingLab | www.codinglabweb.com--><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <!--<title>Popup Modal Box</title>-->    <!-- CSS -->    <link rel="stylesheet" href="style.css" />    <!-- Fontawesome CDN Link -->    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"/>  </head>  <body>    <section>      <button class="show-modal">Show Modal</button>      <span class="overlay"></span>       <div class="modal-box">        <i class="fa-regular fa-circle-check"></i>        <h2>Completed</h2>        <h3>You have sucessfully downloaded all the source code files.</h3>         <div class="buttons">          <button class="close-btn">Ok, Close</button>          <button>Open File</button>        </div>      </div>    </section>     <script>      const section = document.querySelector("section"),         overlay = document.querySelector(".overlay"),         showBtn = document.querySelector(".show-modal"),         closeBtn = document.querySelector(".close-btn");        showBtn.addEventListener("click", () => section.classList.add("active"));        overlay.addEventListener("click", () =>        section.classList.remove("active")       );        closeBtn.addEventListener("click", () =>        section.classList.remove("active")       );     </script>  </body></html>

CSS CODE:

/* Google Fonts - Poppins */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");  * {   margin: 0;   padding: 0;   box-sizing: border-box;   font-family: "Poppins", sans-serif; } section {   position: fixed;   height: 100%;   width: 100%;   background: #e3f2fd; } button {   font-size: 18px;   font-weight: 400;   color: #fff;   padding: 14px 22px;   border: none;   background: #4070f4;   border-radius: 6px;   cursor: pointer; } button:hover {   background-color: #265df2; } button.show-modal, .modal-box {   position: fixed;   left: 50%;   top: 50%;   transform: translate(-50%, -50%);   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } section.active .show-modal {   display: none; } .overlay {   position: fixed;   height: 100%;   width: 100%;   background: rgba(0, 0, 0, 0.3);   opacity: 0;   pointer-events: none; } section.active .overlay {   opacity: 1;   pointer-events: auto; } .modal-box {   display: flex;   flex-direction: column;   align-items: center;   max-width: 380px;   width: 100%;   padding: 30px 20px;   border-radius: 24px;   background-color: #fff;   opacity: 0;   pointer-events: none;   transition: all 0.3s ease;   transform: translate(-50%, -50%) scale(1.2); } section.active .modal-box {   opacity: 1;   pointer-events: auto;   transform: translate(-50%, -50%) scale(1); } .modal-box i {   font-size: 70px;   color: #4070f4; } .modal-box h2 {   margin-top: 20px;   font-size: 25px;   font-weight: 500;   color: #333; } .modal-box h3 {   font-size: 16px;   font-weight: 400;   color: #333;   text-align: center; } .modal-box .buttons {   margin-top: 25px; } .modal-box button {   font-size: 14px;   padding: 6px 12px;   margin: 0 10px; }

Credit Card Ui Design in HTML & CSS

2022-10-13T22:55:00.000-07:00

Hello brother, I beleive you are doing and creating fantastic projects. Todya I have brought a interesting project for you and that is a Credit UI Desing using HTML and CSS. As I have already created lots of Card Desing but by now this credit card design will be my first project.

Credit card is the medium that issued by the bank and financial institution which allow card holder to our purchase goods and services in credit. There are lots of designs that card has and their various types also like master card, visa card, debit/credit and so on.

Take a look on the given image of our Credit Card. As you can see on the top section, I have added master card logo and text, next to it there is a chip of that card, in the middle section there is card number and underneath of it there are name and expiry date.

To see the real demo of this credit card and all the HTML and CSS code that I have used to create this credit card, You can watch the given video tutorial of this credit card.

Credit Card Ui Design in HTML & CSS | Video Tutorial

I have provided all the HTML and CSS code with the image that I have used to make this Credit Card UI Design. Before getting into the source code files, I would to explain about the given video in sort.

As you have seen in the video tutorial of the Credit Card UI Design. As the top section I added logo and chip which was image. At the middle section I added some text and number and at the bottom I added name and valide date. To create this all interface I just used HTML and CSS.

I hope now you can make this Credit Card Ui Design by using HTML & CSS. If you are feeling difficulty to create this credit card, I have provided all the code and images below, from there you can simply copy or download all the source code files.

Credit Card Ui Design [Source Codes]

To create a Credit Card Ui Design using HTML and CSS, follow the given steps line by line:

1. Create a folder. You can put any name in this folder and create the below-mentioned files inside this folder.

2. Create an index.html file. The file name must be index and its extension .HTML

3. Create a style.css file. File name must be style and its extension .css

First, paste the following codes into your index.html file

HTML CODE:

<!DOCTYPE html><!-- Created By CodingLab - www.codinglabweb.com --> <!DOCTYPE html><!-- Coding by CodingLab | www.codinglabweb.com--><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <!--<title>Credit Card Ui Design</title>-->    <link rel="stylesheet" href="style.css" />  </head>  <body>    <div class="container">      <header>        <span class="logo">          <!---->          <h5>Master Card</h5>        </span>        <!---->      </header>       <div class="card-details">        <div class="name-number">          <h6>Card Number</h6>          <h5 class="number">8050 5040 2030 3020</h5>          <h5 class="name">Prem Kumar Shahi</h5>        </div>        <div class="valid-date">          <h6>Valid Thru</h6>          <h5>05/28</h5>        </div>      </div>    </div>  </body></html>

Second, paste the following codes into your style.css file.

CSS CODE:

/* Import Google Font - Poppins */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");  * {   margin: 0;   padding: 0;   box-sizing: border-box;   font-family: "Poppins", sans-serif; } body {   min-height: 100vh;   display: flex;   align-items: center;   justify-content: center;   background: #e3f2fd; } .container {   position: relative;   background-image: url("images/bg.png");   background-size: cover;   padding: 25px;   border-radius: 28px;   max-width: 380px;   width: 100%;   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } header, .logo {   display: flex;   align-items: center;   justify-content: space-between; } .logo img {   width: 48px;   margin-right: 10px; } h5 {   font-size: 16px;   font-weight: 400;   color: #fff; } header .chip {   width: 60px; } h6 {   color: #fff;   font-size: 10px;   font-weight: 400; } h5.number {   margin-top: 4px;   font-size: 18px;   letter-spacing: 1px; } h5.name {   margin-top: 20px; } .container .card-details {   margin-top: 40px;   display: flex;   justify-content: space-between;   align-items: flex-end; }

That is all, now you’ve successfully created a Dynamic Calendar App in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It is free and a zip file will be downloaded that contains the project folder with source code files.

Border Loading Animation in HTML CSS & JavaScript

2022-10-08T01:10:00.000-07:00

Hello there, as usual, today you will learn to create exciting projects, Card's Border Loading Animation, and the animated percentage inside it from 0 to 100 in HTML CSS and JavaScript. As you know there are lots of Card Designs that I have already created and they are available on this blog, but today's project will be different and exciting.

Border Animation means the animation that happens with the border of any stuff like a card and others. Percentage animation means the increase of the number from 0 to 100%. You can see this type of loading animation in different websites and applications while we are exporting something from it.

Take a quick look at the given image of our project [Border Loading Animation with Percentage], at the right side you can see there is a card with a black border about it. At the top right side, there is a white border and inside the card, there is a percentage.

Basically, when the webpage is reloaded, the white border starts to rotate around that card, and along with the border, the percentage starts animating as well from 0 to 100%. When the percentage becomes 100 the border stops animating and the card's border color changed from black to white.

To watch the real demo of this project [Border Loading Animation with Percentage] how it animates and all the HTML CSS and JavaScript code that I have used to create this animation, I have provided a full video tutorial of this project [Border Loading Animation with Percentage].

Border Loading Animation in HTML CSS JavaScript

I have provided all the HTML CSS & JavaScript code that I used to create this project [Border Loading Animation with Percentage], before getting into the source code file, I would like to explain the given video tutorial briefly.

As you have seen in the video tutorial when the webpage is reloaded the border and percentage number started animating and after that when the percentage number became 100 it stopped to animate and the card border color changed from dark to white. To make that card and border animation and the percentage I used HTML and CSS to animate the percentage number and to make border white after I used some JavaScript code.

I believe now you can make this project [Border Loading Animation with Percentage], easily by using HTML CSS, and JavaScript. If you are feeling difficulty creating this card and its border animation with percentages, I have provided all the source codes below. From there you copy or download all the source code files.

You Could Like This:

Border Loading Animation [Source Codes]

To create a Border Loading Animation using HTML CSS & JavaScript, follow the given steps line by line:

1. Create a folder. You can put any name in this folder and create the below-mentioned files inside this folder.

2. Create an index.html file. The file name must be index and its extension .HTML

3. Create a style.css file. File name must be style and its extension .css

First, paste the following codes into your index.html file.

HTML CODE:

<!DOCTYPE html><!-- Coding by CodingLab | www.codinglabweb.com--><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <!--<title>Border Loading Animaton</title>-->    <link rel="stylesheet" href="style.css" />  </head>  <body>    <div class="container active">      <span class="overlay" id="percent">0%</span>    </div>     <script>      const container = document.querySelector(".container"),         percent = document.querySelector("#percent");        let perVal = 0;        let increament = setInterval(() => {         perVal++;         percent.textContent = `${perVal}%`;          if (perVal == 100) {           clearInterval(increament);           container.classList.remove("active");         }       }, 100);     </script>  </body></html>

Second, paste the following codes into your style.css file.

CSS CODE:

/* Google Fonts - Poppins */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");  * {   margin: 0;   padding: 0;   box-sizing: border-box;   font-family: "Poppins", sans-serif; } body {   height: 100vh;   background-color: #131221; } body, .container, .overlay {   display: flex;   align-items: center;   justify-content: center; } .container {   position: relative;   height: 450px;   width: 350px;   border-radius: 16px;   background-color: #fff;   overflow: hidden; } .container.active {   background-color: #000; } .container::before {   content: "";   position: absolute;   height: 650px;   width: 650px;   background-image: conic-gradient(transparent, transparent, transparent, #fff); } .container.active:before {   animation: rotate 4s linear infinite; } @keyframes rotate {   0% {     transform: rotate(0deg);   }   100% {     transform: rotate(360deg);   } } .container .overlay {   position: absolute;   height: 440px;   width: 340px;   font-size: 40px;   font-weight: 500;   color: #fff;   border-radius: 12px;   background-color: #131221; }

That’s all, now you’ve successfully created a Dynamic Calendar App in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It is free and a zip file will be downloaded that contains the project folder with source code files.

How to Create Profile Card in HTML & CSS

2022-09-30T23:36:00.000-07:00

Hey dude, I believe you are doing well. As usual, today you will learn to Create A Profile Card UI Design using only HTML and CSS. I have already created many Card Designs I hope you have watched them. Today's profile card will be simple and valuable.

Profile cards are card design that contains important details of a specific person in a brief way. It could contain details like a person's name, email, social media links for that person, and other important details. We can find this type of profile card on websites like portfolio websites and other types of websites

Have a quick look at the given image of our Profile Card Design. As you can see on the image there are lots of details I have added like profile image, name, social media link buttons, subscribe and message button, and the numbers of likes, comments, and shares.

You can watch the demo of this Profile Card UI Design from the video that I have provided below. Also, you can get all the ideas of HTML and CSS code that I have used to create this beautiful profile card design.

How to Create Profile Card in HTML & CSS | Video Tutorial

I have provided all the HTML and CSS code that I have used to create this Profile Card UI Design. Before getting into the source code file. I would like to explain the given video tutorial on the profile card briefly.

As you have seen in the video tutorial on the Profile Card UI Design. There was an image with a beautiful border, some buttons,s and social media links. To create this profile card I used only HTML and CSS. As you have seen I have created this profile card from scratch.

I hope, now you can make this profile card using HTML and CSS. If you are feeling difficulty creating this profile card, I have provided all the source codes below, from there you can copy or download all the source code files of this beautiful profile card.

Profile Card UI Design [Source Code]

To get the following HTML and CSS code for the Profile Card. You need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

HTML CODE:

<!DOCTYPE html><!-- Coding by CodingLab | www.codinglabweb.com--><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <!--<title>Profile Card UI Design</title>-->     <!-- CSS -->    <link rel="stylesheet" href="style.css" />     <!-- Boxicons CSS -->    <link       href="https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css"       rel="stylesheet"     />  </head>  <body>    <div class="profile-card">      <div class="image">              </div>       <div class="text-data">        <span class="name">CodingLab</span>        <span class="job">YouTuber & Blogger</span>      </div>       <div class="media-buttons">        <a href="#" style="background: #4267b2" class="link">          <i class="bx bxl-facebook"></i>        </a>        <a href="#" style="background: #1da1f2" class="link">          <i class="bx bxl-twitter"></i>        </a>        <a href="#" style="background: #e1306c" class="link">          <i class="bx bxl-instagram"></i>        </a>        <a href="#" style="background: #ff0000" class="link">          <i class="bx bxl-youtube"></i>        </a>      </div>       <div class="buttons">        <button class="button">Subscribe</button>        <button class="button">Message</button>      </div>       <div class="analytics">        <div class="data">          <i class="bx bx-heart"></i>          <span class="number">60k</span>        </div>        <div class="data">          <i class="bx bx-message-rounded"></i>          <span class="number">20k</span>        </div>        <div class="data">          <i class="bx bx-share"></i>          <span class="number">12k</span>        </div>      </div>    </div>  </body></html>

CSS CODE:

/* Google Fonts - Poppins */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");  * {   margin: 0;   padding: 0;   box-sizing: border-box;   font-family: "Poppins", sans-serif; } body {   height: 100vh;   display: flex;   align-items: center;   justify-content: center;   background-color: #f4f4f4; } .profile-card {   display: flex;   flex-direction: column;   align-items: center;   max-width: 370px;   width: 100%;   background: #fff;   border-radius: 24px;   padding: 25px;   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);   position: relative; } .profile-card::before {   content: "";   position: absolute;   top: 0;   left: 0;   height: 36%;   width: 100%;   border-radius: 24px 24px 0 0;   background-color: #4070f4; } .image {   position: relative;   height: 150px;   width: 150px;   border-radius: 50%;   background-color: #4070f4;   padding: 3px;   margin-bottom: 10px; } .image .profile-img {   height: 100%;   width: 100%;   object-fit: cover;   border-radius: 50%;   border: 3px solid #fff; } .profile-card .text-data {   display: flex;   flex-direction: column;   align-items: center;   color: #333; } .text-data .name {   font-size: 22px;   font-weight: 500; } .text-data .job {   font-size: 15px;   font-weight: 400; } .profile-card .media-buttons {   display: flex;   align-items: center;   margin-top: 15px; } .media-buttons .link {   display: flex;   align-items: center;   justify-content: center;   color: #fff;   font-size: 18px;   height: 34px;   width: 34px;   border-radius: 50%;   margin: 0 8px;   background-color: #4070f4;   text-decoration: none; } .profile-card .buttons {   display: flex;   align-items: center;   margin-top: 25px; } .buttons .button {   color: #fff;   font-size: 14px;   font-weight: 400;   border: none;   border-radius: 24px;   margin: 0 10px;   padding: 8px 24px;   background-color: #4070f4;   cursor: pointer;   transition: all 0.3s ease; } .buttons .button:hover {   background-color: #0e4bf1; } .profile-card .analytics {   display: flex;   align-items: center;   margin-top: 25px; } .analytics .data {   display: flex;   align-items: center;   color: #333;   padding: 0 20px;   border-right: 2px solid #e7e7e7; } .data i {   font-size: 18px;   margin-right: 6px; } .data:last-child {   border-right: none; }

How to Create Todo List App in HTML CSS & JavaScript

2022-09-27T01:51:00.000-07:00

Hello friend, I hope you are doing well. As usual, today you will learn How to Create Todo List App in HTML CSS & JavaScript. This project will definitely help boost your knowledge and give you some better ideas for creating this type of to-do list application.

Todo lists are the work that you have to do or you want to do. And, the to-do list app is the place where you can keep your to-do lists. You can find this type of application on any type of mobile device.

Have a look at the given image of our project todo list application, as you can see on the image there is an input field to write your todo, and bottom of the input field there are some todo lists that you have kept. The upper two are in the checked condition which means that two words have been done that's why its text has a line through. The last one is undone that's why it is unchecked and has not to line through.

At the bottom of the lists, you can see the text which indicates to us that one task has to be done. On the right side of that that there is a clear all button, by clicking it we can clear all the tasks at once. I have also added a clear button form so that we can delete our to-do list partially.

To watch the demo of this to-do list application, and all HTML CSS, and JavaScript, I have provided a video tutorial below. By watching the given video tutorial of this to-do list application, you can get an idea of how the to-do list application can be created easily.

Create Todo List App in HTML CSS & JavaScript | Video Tutorial

I have provided all the HTML CSS and JavaScript code that I have used to create this To-Do List Application, before getting the source code file, I would be delighted to briefly explain the given video tutorial of this To-Do List Application.

As you have seen in the video tutorial To-Do List Application. At first, there was an input field with a grey border and a grey icon, bottom of it there was an indicator text which shows we have no task to do and delete all button to delete which was in disabled status. When I focus input field its border color and icon color change into blues.

When I entered my to-do task and pressed enter that task appeared between the input field and indicator text, After that the indicator showed that we have one task to do. And, at the task list, we had the option of checking and unchecking, a task's delete button, and that disabled delete button was also activated.

I showed you that we can delete an individual task by clicking or all task by clicking on the clear all button. When I checked and unchecked the individual task then our total todo task also changed. When I started lots of to-do tasks on that to-do list application, after a limited height, we saw a scroll bar, from where we could see our other tasks.

The UI design of this to-do list application is made of HTML and CSS. To add the task, delete it and check and uncheck it I have used some vanilla JavaScript code.

I hope now you can create this Todo List Application using HTML CSS and JavaScript. If you are feeling difficulty making this application. I have also provided all the source code files below. From there you can download all the source codes.

You Could Like This:

Create Todo List App [Source Code]

To get the following HTML CSS and JavaScript code for the Todo List Application, you need to click on the given download button. Then you will be redirected to google drive, after that you have to download that file and unzip it.

HTML CSS & JavaScript Projects for Beginners

2022-09-21T05:11:00.000-07:00

Hey buddy, I suppose you are creating mindblowing projects. Today I have brought some best and most useful projects that I have created using HTML CSS and JavaScript projects. In these projects, I have created a digital clock, a valid email checker, a dynamic calculator, an email and password validation website color switcher, and many more.

There are lots of other HTML CSS and JavaScript projects that I have already created and posted that you can find on this website, I have picked some of them that would help you to boost your knowledge and skills.

As you have seen in the image of our projects [HTML CSS & JavaScript Projects], You are going to learn to make those projects. and all the projects are made by using pure HTML CSS and JavaScript, I have not used any frameworks. I have provided each project's video tutorial and source code at every project's bottom.

1. Increament & Decreament on click

This is a useful project that you will learn, we can see this type of section on the main e-commerce website while we are going to place our product's order. Basically, when we click on the plus button the number will increase and when we click on the minus button the number will decrease. The number will not decreaseless by 1.

This is the most beginner-friendly project on this list. So, don’t forget to create it if you’re an absolute beginner. I suppose you liked this project [Increament & Decrement on click].; The source code of this dynamic digital clock and video tutorial links are given below.

2. Button Loading Animation in HTML CSS & JavaScript

In this video tutorial, you will learn to create a button with loading animation using HTML, CSS, and JavaScript. At first, on the screen, there will be the first button that you can see on the image. When you click on the button, a loading animation happens, and after a while, the button appears.

This is a beginner-based project and the most useful project for applications and web pages. I hope you will love to create this project. All the HTML, CSS, and JavaScript code and video tutorials for this project [Button Loading Animation] are given below.

3. Typing Text Animation in HTML CSS & JavaScript

In this project, the text will be automatically typed like a typewriter and will change too. Basically, the front text remains constant but the blue text animates. This type of text animation, or typewriter text animation, provides an attractive video on the webpage.

To make its UI design I have used HTML and CSS, to change the text change I have used some JavaScript code. I hope you will try to build this project [Typing Text Animation]. All the HTML CSS and JavaScript code and video tutorials of this project links are given below.

Watch Video Tutorial

Download Source Code

4. Circular Progress Bar in HTML CSS & JavaScript

In this project, the circle's stroke and the number of the percentage animate from 0 to a given value. To make this project [Circular Progress Bar], I have used pure HTML, CSS, and JavaScript code. There are lots of circular progress bars you can find on the internet, and I have used SVG code.

By building this project, you will learn to create different types of progress bars and loading animations. I suppose that you have liked this project [Circular Progress Bar]. All the HTML, CSS, and JavaScript code and video tutorial links for this project are given below.

5. Draggable Navigation Menu in HTML CSS & JavaScript

In this project, you will learn to create navigation action menus and draggable features. When you click on the plus icon at the top of the screen, five navigation buttons will appear with beautiful animation and align in a half-circular shape. You can also make it a full circular shape by adding navigation buttons. You can drag this navigation action menu vertically.

This Draggable Navigation Menu is made using HTML, CSS, and JavaScript. I hope you will be delighted to take on this project. All the HTML, CSS, and JavaScript code and video tutorial links for this project are given below.

6. Product Card in HTML CSS & JavaScript

In this project card, you will learn to make a project card with a color switcher feature by using HTML CSS, and JavaScript. Basically, when you click on those color tabs the shoe color will change. To make this product's card UI design I have used HTML and CSS, To change the shoes I have used some JavaScript code.

This is a very very important and useful project you need to learn. We can find this type of product card on the e-commerce website. All the HTML CSS and JavaScript code and video tutorials of this project links are given below.

7. Password Show in Hide in HTML CSSS & JavaScript

In this project [Password Show in hiding], you will learn to show and hide the password while clicking on the eye icon. Basically, at first, there will be a password in hidden status and when you click on that eye icon the password will be visible with changing, icon. Also, I have added some animation to the input field.

This is a useful project you have to learn. We can see this type of feature in the login and sign of form. I hope you will try to create this project. All the HTML CSS and JavaScript code and video tutorials of this project links are given below.

8. Image Gallery with Searchbox in HTML CSS & JavaScript

In this project [Image Gallery with Searchbox], you will learn to make an image gallery and a filterable search box. Basically, there are lots of images of movies with a beautiful search box. When you type the movie name in the search box and press enter, the related movie's name will appear on the screen. For example, when you type "spiderman" and enter it, then the top image related to "spiderman" will appear and the others will disappear.

To make this project [Image Gallery with Searchbox] UI design, I have used vanilla HTML and CSS, to filter the image that we type, I have used some JavaScript code.

9. Custom Select Menu in HTML CSS & JavaScript

In this project, you will learn to Custom Dropdown Select Menu in HTML CSS, and JavaScript. Basically, at the first, there will be a button only, when you click on that button drop box will appear with different social media lists and the selected list will appear inside the button.

To create this project [Custom Select Menu] UI design, I have used HTML and CSS and to show the selected option inside the button I have used some javascript code. I believe you liked this project [Custom Select Menu], For the source code and video tutorial, you can visit the given links.

10. Password Strength Checker in HTML CSS & JavaScript

In this project, you are going to learn to make a Password Strength Checker in HTML CSS, and JavaScript. Basically here, while you type the password character, it will show how strong your password is. When you enter a weak password like only an alphabet character then it will password is weak, similarly when you enter alphabet and number then it will show password is medium and at last when you enter alphabet character numbers and special character like #,@,+ then it will show password is strong. Also, the input's border color will change according to the strength of the password.

This is the most useful project [Password Strength Checker] you must learn. We can find this type of feature while we are going to create passwords in the registration process on the internet. I hope you will try to build this project and I believe it will boost your knowledge. I have provided the video tutorial and source code link below.

11. Valid Email Checker in HTML CSS & JavaScript

In this project [Valid Email Checker], you will learn to validate the email addresses by using HTML CSS, and JavaScript. Bascially in this project, I have created an input field and button. When

filling invalid email address and clicking on the check button then it will show an invalid email message at the bottom of the input field, similarly, if you enter a valid email address and click on the

check button then it will show email is valid. If you click on the check button without typing any character then it will show input field can not be blank. Input field color also changes

according to the error and success message.

This is on the important project [Valid Email Checker] you have to learn. This type of feature is mostly used in forms. I suppose you will try to build this project. Source code link and video

The tutorial for this project is given below.

12. Accordion Menu in HTML CSS & JavaScript

Here you will learn to create an Accordion Menu in HTML CSS and JavaScript. According to this project, I have created an Accordion menu with some question and answer sections. At first, all the tabs will be in closed condition and only questions are visible. When you click on the plus icon or in any area of the question tab then that tab opens and the answer will visible. When clicking on the second tab the first opened tab will close automatically and clicked tab will open. You can also open and close the tab by clicking on it.

This is also an important project [Accordion Menu] you should learn. We can see this type of section on various types of websites for example you can find this type of accordion menu on google too. I hope this project helps you to boost your knowledge of HTML CSS and JavaScript. The video tutorial and source code link are given below.

13. Toast Notification in HTML CSS & JavaScript

In this project, you will learn to create a Tost Notification in HTML CSS, and JavaScript. Bascially according to this project [Animated Toast Notification]. At first, there will be a button on the screen, when you click on the button a toast bar appears from the right top side of the screen with a small progressing bar that is decreasing. When that progressing bar decreased completely the toast bar automatically disappeared. You can also close that toast bar by clicking on the cross icon that is available on the tab.

This is also an important and useful project [Animated Toast Notification] that you need to learn. This type of project is used while showing the notification that the user has done. I hope you are interested in this project and would try to boost your HTML CSS and JavaScript knowledge by creating it. The video tutorial and source code link are provided below.

14. Multiple Options Select Menu in HTML CSS & JavaScript

In this project [Multiple Options Select Menu], you will learn to build a Multiple Options Select Menu in HTML CSS, and JavaScript. According to this project, there will be a button on the screen while you click on that button some lists with checkboxes will appear. When you click on that list the check box will be checked the selected number of the list will appear on the button tab.

I would say it is also interesting to project [Multiple Options Select Menu] for you to develop your HTML CSS and JavaScript skills. You can find this type of section on the internet while you have to select more than one option.

15. Validate Email in HTML CSS & JavaScript

Yeah, I know, you have done the same topic project before, but I have added lots of features that make this project different and interesting. At the same time, while you start to enter an email address, it starts to show a message that the email is valid or not, and at the same time, the email icon that you can see on the right side also changes. When you type the correct or valid email, the email icon changes to a tick icon.

I would love to say that it will be a very interesting project for you to increase your HTML, CSS, and JavaScrip knowledge. I suppose you will definitely try to build this project [How to Verify an Email]

Links to video tutorials and source code files are provided below.

16. Website Coming Soon Page in HTML CSS & JavaScript

Another most useful project that everyone should learn to make is this. You will learn how to create a website coming soon page section and an animated time using HTML, CSS, and JavaScript in this project. For this project, there will be a background image, some text animated in real-time, and an email field section. The time will be decreased by every second. I have added days, hours, minutes, and seconds here.

This type of page can be seen while some websites are being built. You should definitely learn to make this project [Website Coming Soon Page]. I hope you will try to make this project. Here you will learn to create an email field section. Source code links and video tutorial links are provided below. Just go and boost your HTML, CSS, and JavaScript limitations.

17. Password Confirmation Checker

In this project [Password Confirmation Checker], you will learn to make a Password Confirmation Checker and show how to hide passwords by using HTML, CSS, and JavaScript. Basically, according to this

If you enter the same password in both input fields, it will show that the password is matched. If you enter a different-different password character in those input fields, it will show that the password did not match. Also, I have added a password showing and hiding feature while you click on that eye icon. The eye icon also changes according to the password visibility.

This type of section and feature can be found while you are going to create a password. I would highly recommend you learn to create this project [Password Confirmation Checker]. I hope this project also helps to boost your HTML, CSS, and JavaScript skills. For the video tutorial and source code file, you can click the given links.

18. Website Color Switcher in HTML CSS & JavaScript

In this project [Website Color Switcher], you will learn to create a Website with a Color Switcher Feature using HTML, CSS, and JavaScript. Basically, in this project, there is a navigation bar, and some text and color switcher sections, and I also have a dark-light mode feature. When you click on the moon button that is available on the navigation menu bar, the whole page changes into dark mode and the sun icon appears. Similarly, when you click on that sun icon, the whole page turns into light mode.

Next to the dark-light mode button is a color switcher icon. When you click on that color switch button, a color section bar appears. There are lots of color options we will find and the active color will be highlighted. When we click on the other color, then the navigation bar's background color, text, and other colors will change to the same as the clicked color.

You should definitely try to build this project [Website Color Switcher]. By creating this project, you will learn to make dark-light mode and color switcher features on the website. Obviously, it will help to increase HTML, CSS, and JavaScript knowledge to some level. For the video tutorial and source code, you can visit the given link.

19. Digital Clock in HTML CSS & JavaScript

In this project, I have created a Digital Clock using HTML CSS, and JavaScript. I have also added a dark and light mode feature to it. This is the 12 hours time clock, I mean the time will not increase than 12. The time will automatically update according to your computer time.

I hope you liked this project [Dynamic Digital Clock]. This is the most beginner-friendly project on this list. So, don’t forget to create it if you’re an absolute beginner. The source code of this dynamic digital clock and video tutorial links are given below.

20. Stopwatch in HTML CSS & JavaScript.

In this project [Animated Stopwatch], you will learn to build a working stopwatch in HTML, CSS, and JavaScript. According to this project, there are segment hours, minutes, seconds, and milliseconds. When you click on the start button, the milliseconds start to increase, then seconds, minutes, and hours. To stop the stopwatch, you can click on the stop button, and to reset the stopwatch, you have to click on the reset button.

This type of stopwatch you can easily find on mobiles and tablets. I just want to say this is the most useful and interesting thing you are going to create, and I highly recommend you try this project [Stopwatch] to boost your knowledge of HTML, CSS, and JavaScript. For the video tutorial and source code, you can visit the given link.

21. Calculator in HTML CSS & JavaScript

In this project, you will learn to create a calculator using HTML, CSS, and JavaScript. With this calculator, you can add, subtract, or divide anything that needs to be available in the calculator. I have also added an animated background that you get to see in the video tutorial.

The calculator is becoming an increasingly important and daily-used item in our daily life. You should definitely try to build this calculator. This project will help you improve your knowledge of HTML, CSS, and JavaScript.

22. Email & Password Validation in HTML CSS & JavaScript

In this project [Email & Password Validation], you will not only learn to validate email and passwords but also create a registration form. You can say this is the complete front-end project of the signup form. This project will validate your email address, the strength of the password, and whether it is matched or not. I have also added a password show and hide feature while you click on the eye icon.

I would highly recommend you try to build this project [Email & Password Validation]. With this project, you will learn various things that are needed for a registration form and a login form. I believe you will definitely try to make this project. Video tutorial links and source code file links are provided below.

In a nutshell,

Rather than copying and pasting the source code, I would highly recommend you to watch the video tutorial and follow it step by step, by doing this you will get the idea of how all the HTML CSS, and JavaScript code work behind each project and also the way of creating projects from beginning to end.

It would be wonderful if you comment on the project name that you are going to build and if you want other projects related to HTML CSS and JavaScript, you can find it on this website. And, there are lots of other project video tutorials available on My YouTube Channel you can subscribe to it.

Toggle Button Dark Light Mode in HTML CSS & JavaScript LocalStorage

2022-09-16T05:49:00.000-07:00

Hello buddy, I hope you are doing and creating mind-blowing projects using HTML, CSS, and JavaScript. Today on this blog, you are going to learn how to make a toggle button with dark and light modes using HTML, CSS, and JavaScript. I have also used local storage to keep the selected mode while we refresh the page or reopen the file. Earlier I have made a Simple Toggle Button, I hope you have liked it.

A toggle button is the type of button used to turn on or off. The dark and light modes are the color appearance of the page. We can see on many webpages and apps that they use this type of toggle button. For example, on Windows, we can see this button in the wifi section, where we use this toggle button to turn on or off the wifi.

Have a look at the given image of our project [Toggle Button Dark Light Mode]. As you can see in the image, there is a toggle button in close or off status because the blue circle is on the left side. Similarly, our background is also in blue, so this is our light mode. When we click on the toggle section, the blue circle moves to the right side and its color and background color change into dark mode, which will be called dark mode.

For the demo of this project and all the HTML, CSS, and JavaScript code that I have used to create this project [Toggle Button Dark Light Mode ], watch the given video tutorial. After watching the given video tutorial, you will get an idea of how all the HTML, CSS, and JavaScript codes are working behind this project.

Toggle Button Dark Light Mode in JavaScript/LocatStorage

I have provided all the HTML CSS & JavaScript code that I have used to create this project [Toggle Button with Dark Light Mode], but before getting into the source code, I would be delighted to berifly explain the given video tutorial.

As you have seen on the video tutorial [Toggle Button with Dark Light Mode]. At first, there was a toggle button with blue circle with white background on it, similarly the full wepage color was also blue. When I clicked on the toggle button the toggle's circle moves to right side and it's color also changed into dark, similarly the background of the body was also changed into dark with a beautiful animation.

I had refreshed the page and reopened that file in an another tab but the selected mode did not change to make this I used localstorage and the UI design of the toggle button is made by HTML and CS, to toggle that button I used some JavaScript code.

Now I believe that you can create this type of toggle button and also the dark and light mode by using HTML CSS and JavaScript. If you are feeling difficult to build this project [Toggle Button with Dark Light Mode], I have provided all the HTML CSS and JavaScript code below.

Toggle Button with Dark Light Mode [Source Code]

To get the following HTML and CSS code for Social Media Navigation Button. You need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

HTML CODE:

<!DOCTYPE html><!-- Created By CodingLab - www.codinglabweb.com --> <!DOCTYPE html><!-- Coding by CodingLab | www.codinglabweb.com--><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <!--<title>Toggle Button with Dark/Light Mode</title>-->     <!-- CSS -->    <link rel="stylesheet" href="css/style.css" />  </head>  <body>    <div class="toggle"></div>     <!-- JavaScript -->    <script>      const body = document.querySelector("body"),         toggle = document.querySelector(".toggle");        let getMode = localStorage.getItem("mode");       if (getMode && getMode === "dark") {         body.classList.add("dark");         toggle.classList.add("active");       }        toggle.addEventListener("click", () => {         body.classList.toggle("dark");          if (!body.classList.contains("dark")) {           return localStorage.setItem("mode", "light");         }         localStorage.setItem("mode", "dark");       });        toggle.addEventListener("click", () => toggle.classList.toggle("active"));     </script>  </body></html>

CSS CODE:

* {   margin: 0;   padding: 0;   box-sizing: border-box; } body {   height: 100vh;   display: flex;   align-items: center;   justify-content: center;   background-color: #4070f4;   transition: all 0.3s ease-in-out; } body.dark {   background-color: #18191a; } .toggle {   position: relative;   height: 130px;   width: 300px;   border-radius: 100px;   background-color: #fff;   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);   cursor: pointer; } .toggle::before {   content: "";   position: absolute;   height: 110px;   width: 110px;   background: #4070f4;   border-radius: 50%;   top: 50%;   left: 14px;   transform: translateY(-50%);   transition: all 0.3s ease-in-out; } .toggle.active::before {   background-color: #18191a;   left: calc(100% - 110px - 14px); }ont-family: 'Poppins', sans-serif; }

Website Image Slider in HTML CSS & JavaScript | Swiperjs

2022-09-11T04:08:00.000-07:00

Hey buddy, how are you doing nowadays? I hope you are doing and creating extraordinary. Today I have brought something exciting and useful HTML CSS & JavaScript project, In this project, you are going to learn to create a Website Image Slider. Earlier I created a Responsive Card Slider hope, you liked that project.

Website Image Slider means the features on the website header or hero section where the user can slide images by clicking on the nav button or as well as by grabbing the image too. Also, there is pagination that shows how many images that website has on the harder section. We can see such type of features in many types of websites like e-commerce, sports, newspaper, travel/tour, and many many others.

Have a quick look at the given image of our project [Website Image Slider]. As you can see on the given image there is an image that covered full height and width, on the right and left sides there are two nav buttons to slide the image and at the button, we can see a beautiful pagination section. At the center, there are some text and a button.

To watch the real demo of this project and all the animations that I have added to this project, you can watch the given video tutorial of this project [Website Image Slider], also by watching the video tutorial you will get an idea about all the code that I have used to create this image slider.

Website Image Slider in HTML CSS & JavaSCript | Video Tutorial

I have provided all the HTML CSS & JavaScript code with the Swiperjs file that I used to create this Website Image Slider, before getting into the source code, I would like to briefly explain the given video tutorial of the image slider.

As you have seen in the video tutorial of our project Image Slider. In the first view, we have seen a full-size screen, two nav buttons, pagination, and some text with buttons. When I click on the left side button the image moves to the left side and another image appeared from the right side, similarly when I again clicked on that button another image appeared. On the other hand, when I clicked on the left nav button the image slid to the right and another image came from the left side. Also, we could slide images by grabbing them.

Also, we have seen in the responsive part, that when the width of the screen comes into small sizes like tablet and mobile, then those nav buttons disappeared and pagination appeared and we can slide those images by just grabbing them. I have used HTML CSS and JavaScript and swiperjs extension to create this responsive image slider.

I hope, now I can build this Image Slider easily by using HTML CSS & JavaScript and offcourse Swiperjs. If you are feeling difficult to make this Image Slider, I have provided all the source codes below.

Website Image Slider [Source Code]

For all the HTML CSS and JavaScript code and Images that I have used to create this coffee website you need to click on the given "Download Button", When you click on the given button, it will redirect you to google drive then you have to download the file and extract it, that's it.

MCA Previous Year question paper of Data Structure CBCS Pattern

2022-09-02T15:22:00.000-07:00

MCA Previous Year question paper of Data Structure

Our website provide solved previous year question paper for Data Structure from 2016-2017. Doing preparation from the previous year question paper helps you to get good marks in exams.

Please Wait your download will begin in 15 seconds.

Disclaimer

All tutorials are for informational and educational purposes only and have been made using our own routers, servers, websites and other vulnerable free resources. we do not contain any illegal activity. We believe that ethical hacking, information security and cyber security should be familiar subjects to anyone using digital information and computers. Hacking Truth is against misuse of the information and we strongly suggest against it. Please regard the word hacking as ethical hacking or penetration testing every time this word is used. We do not promote, encourage, support or excite any illegal activity or hacking.

How to Create Sidebar in HTML CSS JavaScript

2022-08-28T08:40:00.000-07:00

Hello friend I hope you are doing and creating mindblowing UI/UX designs. Today in this blog you will learn, to Create a Sidebar in HTML CSS JavaScript, there are lots of Navigation Menus that I have created like a sidebar menu and a horizontal menu bar also hover animation on navigation links. Today's sidebar bar will be simple and very useful. The main feature of this sidebar is, that we can close it by clicking outside.

The sidebar Menu is the section that aligns the right or left side of the website and apps and helps users get redirected as they want. Generally, the sidebar is the transformation of the horizontal navigation menu that appears on small-width devices like tablets and mobile.

Have a quick look at the given image of our Side Navigation Menu Bar. As you can see on the preview of our sidebar menu, it is aligned on the left side. There is a logo name open/close button and some navigation links. Literally, according to my project, the sidebar is in the closed state and we will see a logo and open and close button. When we click on that open/close button then the sidebar will appear. Also, we can close the sidebar by clicking on the open/close button or outside of the sidebar.

Let's watch the given video of our dashboard Sidebar Menu. By watching the given video tutorial, you will see the virtual demo of this Side Navigation Bar and all the HTML CSS, and JavaScript codes that I have used to create this beautiful sidebar menu.

Create Sidebar in HTML CSS JavaScript | Video Tutorial

I have provided all the HTML CSS and JavaScript codes that I have used to create this beautiful Sidebar Menu. Before getting into the source code file. I would like to briefly explain the given video tutorial on our Side Navigation Menu Bar.

As you have seen in the video tutorial of our Sidebar Menu. At first, on the screen, there was a logo name and an open/close button. When I clicked on the open/close button, the sidebar appeared by siding on the left side. When the sidebar opened the outside part of the sidebar turned a little dark and when I closed the sidebar then that dark part disappeared. Then when I opened the sidebar and clicked on the dark part the sidebar closed, then we knew that we can close the sidebar by clicking on those dark parts too.

For the UI and UX part of this sidebar, I have used HTML and CSS. And, to open and close the sidebar I have used some JavaScript. All the fonts are brought from the box icons website and the fonts are imported from the google fonts website as you have seen in the video tutorial.

I hope now you can build this Sidebar Menu using HTML CSS and JavaScript. If you are feeling difficult to make this sidebar, I have provided all the source codes below.

Social Media Navigation Button [Source Code]

To get the following HTML CSS and Javascript code for Sidebar Menu or Side Navigation Menu Bar. You need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

HTML CODE:

<!DOCTYPE html><!-- Coding by CodingLab | www.codinglabweb.com--><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <!--<title>Sidebar Menu | Side Navigation Bar</title>-->    <!-- CSS -->    <link rel="stylesheet" href="css/style.css" />    <!-- Boxicons CSS -->    <link       href="https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css"       rel="stylesheet"     />  </head>  <body>    <nav>      <div class="logo">        <i class="bx bx-menu menu-icon"></i>        <span class="logo-name">CodingLab</span>      </div>      <div class="sidebar">        <div class="logo">          <i class="bx bx-menu menu-icon"></i>          <span class="logo-name">CodingLab</span>        </div>         <div class="sidebar-content">          <ul class="lists">            <li class="list">              <a href="#" class="nav-link">                <i class="bx bx-home-alt icon"></i>                <span class="link">Dashboard</span>              </a>            </li>            <li class="list">              <a href="#" class="nav-link">                <i class="bx bx-bar-chart-alt-2 icon"></i>                <span class="link">Revenue</span>              </a>            </li>            <li class="list">              <a href="#" class="nav-link">                <i class="bx bx-bell icon"></i>                <span class="link">Notifications</span>              </a>            </li>            <li class="list">              <a href="#" class="nav-link">                <i class="bx bx-message-rounded icon"></i>                <span class="link">Messages</span>              </a>            </li>            <li class="list">              <a href="#" class="nav-link">                <i class="bx bx-pie-chart-alt-2 icon"></i>                <span class="link">Analytics</span>              </a>            </li>            <li class="list">              <a href="#" class="nav-link">                <i class="bx bx-heart icon"></i>                <span class="link">Likes</span>              </a>            </li>            <li class="list">              <a href="#" class="nav-link">                <i class="bx bx-folder-open icon"></i>                <span class="link">Files</span>              </a>            </li>          </ul>           <div class="bottom-cotent">            <li class="list">              <a href="#" class="nav-link">                <i class="bx bx-cog icon"></i>                <span class="link">Settings</span>              </a>            </li>            <li class="list">              <a href="#" class="nav-link">                <i class="bx bx-log-out icon"></i>                <span class="link">Logout</span>              </a>            </li>          </div>        </div>      </div>    </nav>     <section class="overlay"></section>     <script>      const navBar = document.querySelector("nav"),         menuBtns = document.querySelectorAll(".menu-icon"),         overlay = document.querySelector(".overlay");        menuBtns.forEach((menuBtn) => {         menuBtn.addEventListener("click", () => {           navBar.classList.toggle("open");         });       });        overlay.addEventListener("click", () => {         navBar.classList.remove("open");       });     </script>  </body></html>

CSS CODE:

/* Google Fonts - Poppins */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");  * {   margin: 0;   padding: 0;   box-sizing: border-box;   font-family: "Poppins", sans-serif; } body {   min-height: 100%;   background: #e3f2fd; } nav {   position: fixed;   top: 0;   left: 0;   height: 70px;   width: 100%;   display: flex;   align-items: center;   background: #fff;   box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); } nav .logo {   display: flex;   align-items: center;   margin: 0 24px; } .logo .menu-icon {   color: #333;   font-size: 24px;   margin-right: 14px;   cursor: pointer; } .logo .logo-name {   color: #333;   font-size: 22px;   font-weight: 500; } nav .sidebar {   position: fixed;   top: 0;   left: -100%;   height: 100%;   width: 260px;   padding: 20px 0;   background-color: #fff;   box-shadow: 0 5px 1px rgba(0, 0, 0, 0.1);   transition: all 0.4s ease; } nav.open .sidebar {   left: 0; } .sidebar .sidebar-content {   display: flex;   height: 100%;   flex-direction: column;   justify-content: space-between;   padding: 30px 16px; } .sidebar-content .list {   list-style: none; } .list .nav-link {   display: flex;   align-items: center;   margin: 8px 0;   padding: 14px 12px;   border-radius: 8px;   text-decoration: none; } .lists .nav-link:hover {   background-color: #4070f4; } .nav-link .icon {   margin-right: 14px;   font-size: 20px;   color: #707070; } .nav-link .link {   font-size: 16px;   color: #707070;   font-weight: 400; } .lists .nav-link:hover .icon, .lists .nav-link:hover .link {   color: #fff; } .overlay {   position: fixed;   top: 0;   left: -100%;   height: 1000vh;   width: 200%;   opacity: 0;   pointer-events: none;   transition: all 0.4s ease;   background: rgba(0, 0, 0, 0.3); } nav.open ~ .overlay {   opacity: 1;   left: 260px;   pointer-events: auto; }

Social Media Navigation Button in HTML CSS & JavaScript

2022-08-22T06:39:00.000-07:00

Hello buddy, I believe that you are doing and creating incredible pieces of stuff. Today in this blog, you will learn to make Social Media Navigation Button in HTML CSS & JavaScript. I would like to tell you that I have created many projects about Media Icons and Hover animation. As with others, today's project will be beneficial for all types of websites.

Social Media Navigation button is the Icon that acts like a button and helps the user to redircet a particular webpage. For example, we can see on the website there is lots of social media icons like Facebook, Twitter, Instagram, and all and, when we click on the Facebook icons we are redirected to the Facebook website or application.

Have a quick look at the given image of our project [Social Media Navigation Button], On the image you can see a total of seven media icons, and at the bottom of those icons, there is a close button. Also, when we hover over that medial icon they indicate the name of the social media icon through the tooltip. Actually at first on the screen, those media icons will be hidden and there will be a icon. When clicking on that icon all the social media navigation button appears.

Let's watch the give video tutorial of our project [Social Media Navigation Button], a demo of our project, and all the HTML CSS and JavaScript code that I have used to create this project.

Social Media Navigation Button in HTML CSS & JavaScript

I have provided all the HTML CSS and JavaScript codes that I have used to make this Social Media Navigation Button. Before getting into the source code file, I would like to explicate the given video tutorial shortly.

As you have seen in the video tutorial of our project [Social Media Navigation Button], there was a button with a plus icon, and all the social media nav buttons were hidden. When I clicked on the plus icon, all the social media navigation buttons appeared and the plus icon also changed into a cross. Similarly, when I again clicked on that cross icon all the media navigation buttons disappeared and the plus icon changed into a plus icon. When I hover over that icon those icons a tooltip appeared with the name of that icon.

To create the UI design and bring all font icons of that social media navigation menu button I have used HTML and CSS and to show and hide the median nav icon and change the plus and cross buttons I have used some javascript code.

Now I supposed that you can build this Social Media Navigation Button in HTML CSS and JavaScript. If you are feeling tough to create this, I have provided all the source code below.

Social Media Navigation Button [Source Code]

To get the following HTML CSS and Javascript code for Social Media Navigation Button. You need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

HTML CODE:

<!DOCTYPE html><!-- Coding by CodingLab | www.codinglabweb.com--><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <!--<title>Social Media Navigation Buttons</title>-->    <!-- CSS -->    <link rel="stylesheet" href="css/style.css" />    <!-- Fontawesome -->    <link       rel="stylesheet"       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"     />  </head>  <body>    <div class="container">      <span class="close-btn">        <i class="fa-solid fa-xmark"></i>      </span>       <div class="media-icons">        <a href="#" style="background: #e60023">          <i class="fa-brands fa-pinterest"></i>          <span class="tooltip" style="color: #e60023">Pinterest</span>        </a>        <a href="#" style="background: #0e76a8">          <i class="fa-brands fa-linkedin"></i>          <span class="tooltip" style="color: #0e76a8">Linkedin</span>        </a>        <a href="#" style="background: #ff0000">          <i class="fa-brands fa-youtube"></i>          <span class="tooltip" style="color: #ff0000">YouTube</span>        </a>        <a href="#" style="background: #ea4689">          <i class="fa-brands fa-dribbble"></i>          <span class="tooltip" style="color: #ea4689">Dribbble</span>        </a>        <a href="#" style="background: #8e36ff">          <i class="fa-brands fa-github"></i>          <span class="tooltip" style="color: #8e36ff">Github</span>        </a>        <a href="#" style="background: #4267b2">          <i class="fa-brands fa-facebook-f"></i>          <span class="tooltip" style="color: #4267b2">Facebook</span>        </a>        <a href="#" style="background: #1da1f2">          <i class="fa-brands fa-twitter"></i>          <span class="tooltip" style="color: #1da1f2">Twitter</span>        </a>      </div>    </div>     <script>      const closeBtn = document.querySelector(".close-btn");        closeBtn.addEventListener("click", () => {         closeBtn.classList.toggle("open");       });     </script>  </body></html>

CSS CODE:

/* Google Fonts - Poppins */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");  * {   margin: 0;   padding: 0;   box-sizing: border-box;   font-family: "Poppins", sans-serif; } body {   background: #e3f2fd; } .container {   position: absolute;   top: 50%;   left: 0;   transform: translateY(-50%);   display: flex;   flex-direction: column-reverse;   align-items: center; } .media-icons {   display: flex;   align-items: flex-start;   flex-direction: column;   justify-content: center;   background-color: #fff;   padding: 6px;   border-radius: 6px;   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);   transform: translateX(-100%);   transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .close-btn.open ~ .media-icons {   transform: translateX(0); } .media-icons a {   text-decoration: none;   position: relative;   height: 35px;   width: 35px;   display: flex;   align-items: center;   justify-content: center;   border-radius: 6px;   margin: 6px; } .media-icons a i {   color: #fff; } .media-icons a .tooltip {   position: absolute;   left: 55px;   font-size: 14px;   font-weight: 400;   pointer-events: none;   background-color: #fff;   padding: 4px 8px;   border-radius: 4px;   transform: translateY(-25px);   opacity: 0;   transition: all 0.2s linear;   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05); } a:hover .tooltip {   opacity: 1;   transform: translateY(0); } a .tooltip::before {   content: "";   position: absolute;   height: 10px;   width: 10px;   top: 50%;   left: -5px;   transform: translateY(-50%) rotate(45deg);   background-color: #fff; } .close-btn {   display: flex;   align-items: center;   justify-content: center;   height: 35px;   width: 35px;   border-radius: 50%;   color: #fff;   font-size: 18px;   margin-top: 20px;   background-color: #8e36ff;   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);   cursor: pointer;   transform: rotate(45deg);   transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .close-btn.open {   transform: rotate(90deg);   background-color: #de0611; }

Why we pay for internet?

2022-08-21T05:44:00.000-07:00

Why we pay for internet?

ISP stands for internet service providers which are those whom help us to access internet. For example Jio, Airtel, BSNL etc.

one of the reason is because ISP spends his own money for transmiting internet over optical Fibre and optical fibre is too costly. Sometimes optical fibre get damaged so onthat time maintainance and repairing cost and efforts are too high.

The money spent over optical fibre thorugh deep sea is too costly and difficult it needs a lot of efforts team work and experts peoples.

Transmiting the internet over the country via cell towers and wifi towers is also need money for construction and maintainance. They also provice serivces to customers. They also hire employee for provide us best experience.

These are just few of reason about why we need to pay to ISP for internet!!!

Disclaimer

How to Validate Email & Password in HTML CSS JavaScript

2022-08-17T03:21:00.000-07:00

Hello friend, I hope you are doing and creating creative pieces of stuff. Today in this blog, you will learn How to Validate Email & Password in HTML CSS JavaScript. Although, I have a separate blog about Email Validation, Password Validation, and Password Show Hide, this time I'm going to add all these sections in one form.

Email and Password Validation means the process of verifying the email address and the strength of the password the user has input. And, the password show hide means the showing and hiding password while clicking on the icon for the security purpose.

Have a quick look at the given image of our project Email and Password Validation. On the left side form, you can see three input blank input fields and one button. On another right-side form, you can see I have filled some invalid data, that's why there is some red-colored text with an error message.

Actually when we put inaccurate data on the input field or directly click on the button then those errors appear with an error message. On the password field, on the right side, we can see the eye icon. When we click on the icon, it helps us to show the characters that we filled. The confirm password field will check the created password and the confirmed password is matching or not.

Rather than theoretically, I would highly recommend you to watch the given video tutorial of our project [How to Validate Email & Password in HTML CSS JavaScript], in that video, I have shown a demo of this project and all the HTML CSS & JavaScript code that I have used to validate this email and password and offcourse password show and hide feature.

Email and Password Validation in HTML CSS & JavaScript

I have provided all the HTML CSS & JavaScript code that I have used to Validate Email, Password, and Show/Hide passwords. Before getting into the source code file, Let me explain the given video tutorial on this form validation briefly.

As you have seen in the video tutorial. At first, there was a signup form with three empty input fields and a button. When I clicked on the button without filling in the required date, the red error message appeared. After that when I started to enter my valid data the error message disappeared. Also we could show and hide passwords by clicking on the eye icon. The email required proper valid email formation and the create password field needs the combination of numbers, special symbols, capital, and small letter. Basically, we need not put eight characters with mixing all those characters.

To make this sign-up form I have used HTML and CSS to validate the form and to show and hide the password, I have used some JavaScript code.

I accept, now you can create this type of form and validate email and password using HTML CSS and JavaScript, also show and hide password while clicking on the eye icon with changing icon. If you are feeling complicated, I have provided all the HTML CSS, and JavaScript code below.

Email & Password Validation [Source Code]

To get the following HTML CSS and JavaScript code for the Email & Password Validation, you need to create three files one is an HTML file and another is a CSS file and a JavaScript file. After creating these three files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

HTML CODE:

<!DOCTYPE html><!-- Coding by CodingLab | www.codinglabweb.com--><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <!--<title>Email and Password Validation</title>-->     <!-- CSS -->    <link rel="stylesheet" href="css/style.css" />     <!-- Boxicons CSS -->    <link       href="https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css"       rel="stylesheet"     />  </head>  <body>    <div class="container">      <header>Signup</header>      <form action="https://www.codinglabweb.com/">        <div class="field email-field">          <div class="input-field">            <input type="email" placeholder="Enter your email" class="email" />          </div>          <span class="error email-error">            <i class="bx bx-error-circle error-icon"></i>            <p class="error-text">Please enter a valid email</p>          </span>        </div>        <div class="field create-password">          <div class="input-field">            <input               type="password"               placeholder="Create password"               class="password"             />            <i class="bx bx-hide show-hide"></i>          </div>          <span class="error password-error">            <i class="bx bx-error-circle error-icon"></i>            <p class="error-text">              Please enter atleast 8 charatcer with number, symbol, small and               capital letter.             </p>          </span>        </div>        <div class="field confirm-password">          <div class="input-field">            <input               type="password"               placeholder="Confirm password"               class="cPassword"             />            <i class="bx bx-hide show-hide"></i>          </div>          <span class="error cPassword-error">            <i class="bx bx-error-circle error-icon"></i>            <p class="error-text">Password don't match</p>          </span>        </div>        <div class="input-field button">          <input type="submit" value="Submit Now" />        </div>      </form>    </div>     <!-- JavaScript -->    <!--<script src="js/script.js"></script>-->  </body></html>

CSS CODE:

/* Google Fonts - Poppins */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");  * {   margin: 0;   padding: 0;   box-sizing: border-box;   font-family: "Poppins", sans-serif; } body {   min-height: 100vh;   display: flex;   align-items: center;   justify-content: center;   background: #4070f4; } .container {   position: relative;   max-width: 370px;   width: 100%;   padding: 25px;   border-radius: 8px;   background-color: #fff; } .container header {   font-size: 22px;   font-weight: 600;   color: #333; } .container form {   margin-top: 30px; } form .field {   margin-bottom: 20px; } form .input-field {   position: relative;   height: 55px;   width: 100%; } .input-field input {   height: 100%;   width: 100%;   outline: none;   border: none;   border-radius: 8px;   padding: 0 15px;   border: 1px solid #d1d1d1; } .invalid input {   border-color: #d93025; } .input-field .show-hide {   position: absolute;   right: 13px;   top: 50%;   transform: translateY(-50%);   font-size: 18px;   color: #919191;   cursor: pointer;   padding: 3px; } .field .error {   display: flex;   align-items: center;   margin-top: 6px;   color: #d93025;   font-size: 13px;   display: none; } .invalid .error {   display: flex; } .error .error-icon {   margin-right: 6px;   font-size: 15px; } .create-password .error {   align-items: flex-start; } .create-password .error-icon {   margin-top: 4px; } .button {   margin: 25px 0 6px; } .button input {   color: #fff;   font-size: 16px;   font-weight: 400;   background-color: #4070f4;   cursor: pointer;   transition: all 0.3s ease; } .button input:hover {   background-color: #0e4bf1; }

JAVASCRIPT CODE:

const form = document.querySelector("form"),   emailField = form.querySelector(".email-field"),   emailInput = emailField.querySelector(".email"),   passField = form.querySelector(".create-password"),   passInput = passField.querySelector(".password"),   cPassField = form.querySelector(".confirm-password"),   cPassInput = cPassField.querySelector(".cPassword");  // Email Validtion function checkEmail() {   const emaiPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;   if (!emailInput.value.match(emaiPattern)) {     return emailField.classList.add("invalid"); //adding invalid class if email value do not mathced with email pattern   }   emailField.classList.remove("invalid"); //removing invalid class if email value matched with emaiPattern }  // Hide and show password const eyeIcons = document.querySelectorAll(".show-hide");  eyeIcons.forEach((eyeIcon) => {   eyeIcon.addEventListener("click", () => {     const pInput = eyeIcon.parentElement.querySelector("input"); //getting parent element of eye icon and selecting the password input     if (pInput.type === "password") {       eyeIcon.classList.replace("bx-hide", "bx-show");       return (pInput.type = "text");     }     eyeIcon.classList.replace("bx-show", "bx-hide");     pInput.type = "password";   }); });  // Password Validation function createPass() {   const passPattern =     /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;    if (!passInput.value.match(passPattern)) {     return passField.classList.add("invalid"); //adding invalid class if password input value do not match with passPattern   }   passField.classList.remove("invalid"); //removing invalid class if password input value matched with passPattern }  // Confirm Password Validtion function confirmPass() {   if (passInput.value !== cPassInput.value || cPassInput.value === "") {     return cPassField.classList.add("invalid");   }   cPassField.classList.remove("invalid"); }  // Calling Funtion on Form Sumbit form.addEventListener("submit", (e) => {   e.preventDefault(); //preventing form submitting   checkEmail();   createPass();   confirmPass();    //calling function on key up   emailInput.addEventListener("keyup", checkEmail);   passInput.addEventListener("keyup", createPass);   cPassInput.addEventListener("keyup", confirmPass);    if (     !emailField.classList.contains("invalid") &&     !passField.classList.contains("invalid") &&     !cPassField.classList.contains("invalid")   ) {     location.href = form.getAttribute("action");   } });

Can i learn hacking on my own ?

2022-08-16T10:56:00.000-07:00

Can i learn hacking on my own ?

Yes, if you follow these rules :

Be a problem solver

First, you have to be a problem sovler instead of complaining about it, like you face a computer error will try to setup something than fix it on you own by googling or youtube. This improves your knowledge about how things work and its very important for a hacker.

Join Community of Hacker

Yes, you have to join a community of like minded people so you can see what actually happening in the technical world and you can discuss your doubts and also help others with their problems and indirectly it improves your skills and knowledge.

Save Bookmark of Hacking Blogs

Find at least 3 website that post tutorials or guides about pen-testing, computer tricks, smartphone tricks, etc. So, you will learn the latest things which newly discovered or developed.

Find a problem then fix it

This technical world is full of problems, daily people face many problems and its oportunity for hackers or technical experts by finding their solutions and become famous or increase your value. It helps you give motivation for your journey and you start thinking out of the box.

Disclaimer

How to Validate Email in HTML CSS & JavaScript | Email Checker

2022-08-10T01:16:00.000-07:00

Hello friend, I hope you are doing and creating awesome projects. Today in this blog you will learn to Validate an Email Address in HTML CSS and JavaScript. There are lots of validation projects that you can found on this blog like Email Validation, password, and confirm password validation.

An Email Validation means authenticating the email address that the user filled. You can see on the apps of the website where a login or signup form available and we need to enter our email address and password to register. For such things, a valid email address is needed.

Let's have a quick look at the given image of our project [How to Validate Email Address]. On the image, you can see three input fields with text and icons. On the first input email field, we can see it is empty, on the second input email field, we can see an invalid email that's why the icon color is red and on the third input email field, we can see a valid email that's why the color of the icon is green and check icon. The color icons will automatically while you are typing the email.

You can watch the real demo of this email checker by watching the given video tutorial. Also by watching the given video tutorial, you will get the idea of how all HTML CSS, and JavaScript code are working behind this email validator.

Validate Email Address in JavaScript | Email Checker

I have provided all the HTML CSS and JavaScript code that I have used to create this Email Checker. Before getting into the source code file, I would like to explain the given video tutorial of email validators briefly.

As you have seen in the video tutorial on Email verifiers. At first, there was an empty input email field with grey colored icon, when I started to type my email the icon changed to red color and when I completed my email address with a valid email address, the icon colored change to green with a check icon.

To make the UI design of the input field I have used HTML and CSS only to validate the email address and change the color of the icon and icon, I have used some JavaScript Code, and to validate the email address I have used some regex pattern.

I hope, now you can create this Email Checker using HTML CSS, and JavaScript, if you are feeling difficulty validating the email address, I have provided all the source code below.

Email Checker [Source Code]

To get the following HTML and CSS code for the Email Checker you need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

HTML CODE:

<!DOCTYPE html><!-- Created by CodingLab | www.codinglabweb.com--><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <!--<title>JavaScript Email Vaidation</title>-->     <!-- CSS -->    <link rel="stylesheet" href="css/style.css" />     <!-- Unicons CSS -->    <link       rel="stylesheet"       href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"     />  </head>  <body>    <div class="input-field">      <input type="email" placeholder="Enter your email" spellcheck="false"/>      <i class="uil uil-envelope email-icon"></i>    </div>     <!-- JavaScript -->    <script>      const input = document.querySelector("input"),             emailIcon = document.querySelector(".email-icon")              input.addEventListener("keyup", () =>{               let pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;                if(input.value === ""){                 emailIcon.classList.replace("uil-check-circle", "uil-envelope");                 return emailIcon.style.color = "#b4b4b4";               }               if(input.value.match(pattern)){                 emailIcon.classList.replace("uil-envelope", "uil-check-circle");                 return emailIcon.style.color = "#4bb543"               }               emailIcon.classList.replace("uil-check-circle", "uil-envelope");               emailIcon.style.color = "#de0611"             })     </script>  </body></html>

CSS CODE:

/* Google Fonts - Poppins */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");  * {   margin: 0;   padding: 0;   box-sizing: border-box;   font-family: "Poppins", sans-serif; } body {   height: 100vh;   display: flex;   align-items: center;   justify-content: center;   background: #e3f2fd; } .input-field {   position: relative;   height: 50px;   width: 280px;   border-radius: 6px;   background-color: #fff;   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } .input-field input {   height: 100%;   width: 100%;   border: none;   outline: none;   border-radius: 6px;   padding: 0 15px;   font-size: 15px;   font-weight: 400;   color: #333; } input::placeholder {   color: #b4b4b4; } .input-field .email-icon {   position: absolute;   right: 15px;   top: 50%;   transform: translateY(-50%);   font-size: 22px;   color: #b4b4b4; }

Top 5 Security issues with cookies

2022-08-06T15:17:00.000-07:00

Top 5 Security issues with cookies

Computer cookies, for the most part, are beneficial to your online experience. They help websites provide personalized experiences for each user—which is incredible, considering the number of online users. But like anything online, hackers, cybercriminals and bad actors have discovered ways to utilize cookies to take advantage of people.

Before diving into the specific security issues with cookies, it’s important to understand the different types.

Computer cookies can be broken down into three categories:

Session cookies

What are cookies ?

Cookies are the text files with small pieces of data like username and password that are used to identify your computer as you use a computer network.

Types of cookies:

1. Session of cookies :

If you visit website requiring a password, session cookies are what allows you to hop from page to page without needing to log in every time.

2. Persistent Cookies :

Persistent cookies are used to update your perferences when you visit a website. They're used to analyze a user's browsing habits.

3. Flash Cookies :

Similar to persistent cookies, except they're stored as abode flash files instead of text files, these contains the same data and work just like other cookies.

Five security issues with cookies -

1. Cross-site request forgery attack (CSRF)

It is an attack that forces authenticated users to submit a request to a web application against which they are currently authenticated.

CSRF attacks exploits the trust web application has in an authenticated user.

Session Fixation

If a website allows session IDs in the query parameters, an attacker can include a specific session ID in the URL.

If they send that URL to a user and the user logs info the website using their legitimate credentials, the attacker can then take over that session and gain access to the user's account.

Cross-Site scripting (XSS)

The attacker writes malicious code and post it to a trusted website. When the user visits the website, their browser is loads the content.

It executes all the scripts and grants access to any session tokens, cookies, or other sensitive information including login details.

Cookies Tossing Attack

Attackers create a fake subdomains cookies for a website and send it to a user. When the user visits that website.

It'll pull the attackers fake cookies, then attackers will be able to take over the session and gain access to the user's account.

Cookies Capturing

If a cookie is being used for authentication purposes should always be sent via secure SSL/TLS channels.

If a website allows for cookies to be sent using cleartext, an attacker could potentially eavesdrop on network traffic to capture the unsecured cookie.

Conclusion

Cookies have made a significant contribution to making the web stateful, but they also add to the attack surface.

They can be used by hackers to gain control of privileged functionalities perform SQL injections, session hijacking, and account takeover.

How to approach target in bug bounty ?

2022-08-06T12:16:00.000-07:00

Every bug bounty hunter began by reporting low-hanging bugs and minor problems that business didn't care about at the time.

1) Architecture Based Approach

First find the technologies used by the website.

For finding use this tool:

Wappalyzer
Buildwith

Then you can find if there are any CVE or public exploits related to the technology the web app.

You can read through documentations and bug bounty reports related to each dependencies. Find out what the most common mistakes that can be made by developer.

If you are a beginner, it would takes quite long time to understand each technologies behind. This approach works well on modern web app.

2) Asset-based Approach

Bug hunters using this approach heavily relies on tools to find out as many assets as possible.

For example -

Use sublist3r to find all subdomains
Use gau to fetch all URL.
Discover all IPs belonged to the target.

Then you need to have a proper way to sort out and analyze the information obtained. This approach works well if the target has wide scope (eg. Facebook, Microsoft, Google).

To become successful in this approach, You better familiar with some bash scripting or use python to automate some tasks. Also it might create a lot of unneccessary noice to the target and might lead to ip ban from the target.

Read more about what bug you want to Report :- Click Here

3) Function based approach

In this approach start testing the website as the normal user uses it and use burp suite to record all request/response. Then, try to do something that is not supposed to do, access some URL that is not authentication to do so. Creativity is a key to be successful in this approach. Here are some of the type of information that should be gathered on your target:

Create a list of all the subdomains and IPs that belong to the target.
Find information about the type of software and services the site uses.
Check if they have a github account?
check the robots.txt file
Does the site have any input forms, any parameters in the URLs?
Start hunting as soon as any organization introduces the program.

Read more about Burp Suite Tutorial :- Click Here

Conclusion:

You can read more bug hunting report and find out more yourself. Then, you can mix and match these approaches and techniques.

As time passes you would find yourself developed your own methodology and getting smooth in bug hunting.

Disclaimer

Python projects you must try

2022-08-04T15:20:00.000-07:00

Python projects you must try

The best way to learn programming language is to build project with it. Here are some python projects you must try.

Difficulty Level : Easy(I)

1. Send Automatic Emails using python
2. Defang IP address
3. Password authentication using python
4. Web scrapping to create a dataset
5. Resume Scanner
6. Merge sort algorithm
7. Pick a random card using python
8. Quartile deviation using python
9. Count character occurrences
10. Pyramid pattern using python

Difficulty Level : Easy(II)

11. Sequential Search
12. Swap variables using python
13. Sorting NumPy Arrays
14. Validate anagrams
15. Create tables with python
16. Recursive binary search
17. Dijkstra's algorithm using python
18. Hash tables using python
19. Queues using python
20. Validate a binary search tree

Difficulty Level : Intermediate

1. Visualize a neural network using python
2. Bias and variance using python
3. Get live weather updates using python
4. Count objects in image using python
5. Scrape trending news using python
6. Real-time stock price data visualization using python
7. OTP verification using python
8. Choropleth map with python
9. Egg catcher game
10. Extract country details

Difficulty Level : Hard

1. Convert text to numberical data
2. AUC and ROC using python
3. Interactive language translator
4. Maximum profit finder
5. Language detection
6. Histogram and density plots with python
7. Radar plot with python
8. Create a chatbot with python
9. Stopwords removal
10. Unicode characters removal

Disclaimer

Make money legally as a Hacker without degree

2022-08-03T07:46:00.000-07:00

Make money legally as a Hacker

It's okay if you don't have college degree

Without a college degree you can make money as a hacker and you won't get arrested for it. Even this is possible you are just in your first year and you are already earning a good lumpsum of money. It's just matter of effort
you execute over things.

You don't need certificate to earn money, you'll just need skills to earn money!

Teaching cyber security

Teaching hacking is one of the most easy may to make money with the help of your skills, even the best hackers of
world still write books related to hacking.

Writing articles on cyber security, helping others with tutorial videos and ebooks will helo you out in earning.

If you are an undergraduate, don't go for making tutorials, you can sell your skill in your campus.

Bug Bounty Programs

Companies are on the rise looking to reward ethical hackers who notify them of any bug in their software before it could be exploited by malicious hackers.

Become a bug bounty hunter, no legislation is against it, you make money when you win it. Any no company will ask for your certificate, all they need are your fingers on those keys.

Write Software securities

The government won't blame you making money writing software securities that abort malicious attacks. Instead, you will get some accolades for that.

Disclaimer

How to make Testimonial Slider in HTML CSS & JavaScript | SwiperJS

2022-08-03T00:46:00.000-07:00

Hello friend, I hope you are doing and creating an excellent project. Today in this blog, you will learn to make a responsive Testimonial Slider in HTML CSS and JavaScript/SwiperJs. There are lots of Sliding Card that I have created using HTML and CSS only and HTML CSS and JavaScript with swiperjs.

Testimonials are the section that contains reviews of the products and services. As we can see on the coffee shop website there will be a review, where many reviews of the different person's kept about that coffee.

Have a quick look at the given image of our project [Testimonial Slider], as you can see on the given image there is an image of a person and the review text of that person on the product or services, the bottom of the image there is a quote icon and person's name and job. Technically there are two buttons on the right and left sides, and three-dot, which indicates that it is slideable. Actually when we click on the nav button that will slide right or left and another person's quote will appear. We can slide those content by grabbing and sliding the mouse right or left.

Let's watch the real demo of this testimonial and all the HTML CSS and JavaScript code that I have used to create this project [Testimonial Slider].

Testimonial Slider in HTML CSS & JavaScript | Video Tutorial

I have provided all the HTML CSS and JavaScript code that I have used to create this Testimonial Slider. Before getting into the source code file, I would like to explain the given video tutorial briefly.

As you have seen in the video tutorial of [Testimonial Slider], at first there was an image of some review text and the name and jot of the person. Bottom of that testimonial content there are three dots and on the right and left side, there is two nav button. When I clicked on the right button, then that content slid left side and right-sided content appeared, similarly when I clicked on the left side button, the content slid right side and left-sided content appeared. Also, I slid that content just by grabbing the content and moving the mouse right or left.

We saw that our testimonial was fully responsive, when I decreased the width of the testimonial it fitted according to the screen. When our testimonial width came as our normal tablet screen sizes, then its nav button disappear because we can slide it by finger too.

I hope now you can create this testimonial using HTML CSS and JavaScript with SwiperJs. If you are feeling difficulty creating this testimonial, you can take the source code that I have given below.

Testimonial Slider [Source Code]

To get the following HTML CSS and JavaScript code for the Testimonial Slider, you need to create three files one is an HTML file and another is a CSS file and a JavaScript file. After creating these three files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

HTML CODE:

<!DOCTYPE html><!-- Created By CodingNepal - www.codingnepalweb.com --><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <!--<title>Responsive Testimonial Slider</title>-->     <!-- Swiper CSS -->    <link rel="stylesheet" href="css/swiper-bundle.min.css" />     <!-- CSS -->    <link rel="stylesheet" href="css/style.css" />     <!-- Boxicons CSS -->    <link       href="https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css"       rel="stylesheet"     />  </head>  <body>    <section class="container">      <div class="testimonial mySwiper">        <div class="testi-content swiper-wrapper">          <div class="slide swiper-slide">                        <p>              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam,               saepe provident dolorem a quaerat quo error facere nihil deleniti               eligendi ipsum adipisci, fugit, architecto amet asperiores               doloremque deserunt eum nemo.             </p>             <i class="bx bxs-quote-alt-left quote-icon"></i>             <div class="details">              <span class="name">Marnie Lotter</span>              <span class="job">Web Developer</span>            </div>          </div>          <div class="slide swiper-slide">                        <p>              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam,               saepe provident dolorem a quaerat quo error facere nihil deleniti               eligendi ipsum adipisci, fugit, architecto amet asperiores               doloremque deserunt eum nemo.             </p>             <i class="bx bxs-quote-alt-left quote-icon"></i>             <div class="details">              <span class="name">Marnie Lotter</span>              <span class="job">Web Developer</span>            </div>          </div>          <div class="slide swiper-slide">                        <p>              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam,               saepe provident dolorem a quaerat quo error facere nihil deleniti               eligendi ipsum adipisci, fugit, architecto amet asperiores               doloremque deserunt eum nemo.             </p>             <i class="bx bxs-quote-alt-left quote-icon"></i>             <div class="details">              <span class="name">Marnie Lotter</span>              <span class="job">Web Developer</span>            </div>          </div>        </div>        <div class="swiper-button-next nav-btn"></div>        <div class="swiper-button-prev nav-btn"></div>        <div class="swiper-pagination"></div>      </div>    </section>     <!-- Swiper JS -->    <!--<script src="js/swiper-bundle.min.js"></script>-->    <!-- JavaScript -->    <!--<script src="js/script.js"></script>-->  </body></html>

CSS CODE:

/* Google Fonts - Poppins */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");  * {   margin: 0;   padding: 0;   box-sizing: border-box;   font-family: "Poppins", sans-serif; } .container {   height: 100vh;   width: 100%;   display: flex;   align-items: center;   justify-content: center;   background-color: #e3f2fd; } .testimonial {   position: relative;   max-width: 900px;   width: 100%;   padding: 50px 0;   overflow: hidden; } .testimonial .image {   height: 170px;   width: 170px;   object-fit: cover;   border-radius: 50%; } .testimonial .slide {   display: flex;   align-items: center;   justify-content: center;   flex-direction: column;   row-gap: 30px;   height: 100%;   width: 100%; } .slide p {   text-align: center;   padding: 0 160px;   font-size: 14px;   font-weight: 400;   color: #333; } .slide .quote-icon {   font-size: 30px;   color: #4070f4; } .slide .details {   display: flex;   flex-direction: column;   align-items: center; } .details .name {   font-size: 14px;   font-weight: 600;   color: #333; } .details .job {   font-size: 12px;   font-weight: 400;   color: #333; } /* swiper button css */ .nav-btn {   height: 40px;   width: 40px;   border-radius: 50%;   transform: translateY(30px);   background-color: rgba(0, 0, 0, 0.1);   transition: 0.2s; } .nav-btn:hover {   background-color: rgba(0, 0, 0, 0.2); } .nav-btn::after, .nav-btn::before {   font-size: 20px;   color: #fff; } .swiper-pagination-bullet {   background-color: rgba(0, 0, 0, 0.8); } .swiper-pagination-bullet-active {   background-color: #4070f4; } @media screen and (max-width: 768px) {   .slide p {     padding: 0 20px;   }   .nav-btn {     display: none;   } }

JAVASCRIPT CODE:

 var swiper = new Swiper(".mySwiper", {   slidesPerView: 1,   grabCursor: true,   loop: true,   pagination: {     el: ".swiper-pagination",     clickable: true,   },   navigation: {     nextEl: ".swiper-button-next",     prevEl: ".swiper-button-prev",   }, });

Killer website for hackers

2022-08-02T12:24:00.000-07:00

Killer website for hackers

Exploit Database

Exploit database (ExploitDB) is an archive of exploits for the purpose of public security, and it explains what can be found on the database. The ExploitDB is a very useful resource for identifying possible weakness in your network and for staying up to date on current attacks occuring in other networks.

Shodan

Shodan works by requesting connections to every imaginable internet protocol (IP) address on the internet and indexing the information that it gets back from those connection requests. Shodan crawls the web for devices using a global network of computers and servers that are running 24/7.

Archive org

Intenet Archive is a non-profit library of millions of free books, Movies, software, music, websites, and more.

Nmmapper

Pentest tool from nmap online to subdomain finder, theHarvester, wappalyzer. Discover dns records of domains, detect cms using cmseek & whatweb.

Builtwith

Builtwith is a website profiler, lead generation, competitive analysis and business intelligence tool providing technology adoption, ecommerce data and usage analytics for the internet.

Disclaimer

Python Libraries that can automate your life

2022-08-01T06:53:00.000-07:00

Python Libraries that can automate your life

1) Openpxl

Automate excel reporting

Openpyxl is a python library that can help us automate our excel reporting. With openpyxl, we can read an Excel file, write excel formulas, make charts, and format a worksheet using python.

Installation

pip install openpyxl

2) SMTPLIB

Email automation

smtplib is a built-in python module used for sending emails using the Simple Mail Transfer Protocol (SMTP).

You dont need to install smtplib or email because thay come with python.

3) Camelot

Automate table extraction from

PDFs

These tables can be exported into a Pandas dataframe and other formats such as CSV, JSON, Excel, HTML, Markdown, and SQLite.

Installation

pip install "camelot-py[base]"

4) Requests: Make Your Life Easier With an API

Automation sometimes involves working with an API. APIs can help you collect real-world data and also simplify the development process of an application.

To work with an API you need to send requests to a server and then read the responses. The message sent by a client to a server is known as an HTTP request.

With the Requests library, we can interact with an API by sending HTTP requests and accessing the response data. This library has useful features such as passing parameters in URLs, sending custom headers, form data, and more.
Installation

To install Requests, we only need to run the command below in our terminal.

python -m pip install requests

Disclaimer

Useful Github Repositories

2022-07-30T23:42:00.000-07:00

Useful Github Repositories

1) Project Based Learning

A list of programming tutorials in which aspiring software developers learn how to build an applications from scratch.

Link - https://github.com/practical-tutorials/project-based-learning

2) Free Programming Books

The Free Ebook Foundation now administers the repo, a not-for-profit organization devoted to promoting the creation, distribution, archiving, and sustainability of free ebooks. Donations to the Free Ebook Foundation are tax-deductible in the US.

This list was originally a clone of StackOverflow - List of Freely Available Programming Books with contributions from Karan Bhangui and George Stocker.

The list was moved to GitHub by Victor Felder for collaborative updating and maintenance. It has grown to become one of GitHub's most popular repositories, with 226,000+ stars, about 9,600 watchers, more than 7,000 commits, 1,900+ contributors, and 47,700+ forks.

Link - https://github.com/EbookFoundation/free-programming-books

3) Developer Roadmap

Roadmaps are being made interactive and have been moved to website.
View all Roadmaps

Here is the list of available roadmaps with more being actively worked upon.

Frontend Roadmap
Backend Roadmap
DevOps Roadmap
React Roadmap
Angular Roadmap
Android Roadmap
Python Roadmap
Go Roadmap
Java Roadmap
DBA Roadmap
Etc...

Link - https://github.com/kamranahmedse/developer-roadmap

4) Public APIs

A collective list of free APIs for use in software and web development

Link - https://github.com/public-apis/public-apis

NS GHS GOOGLE

Domain Gratis Sampai Akhir Tahun!! Buruan Klaim

Get IPs List and Weblist 2022

Create Popup Modal Box in HTML CSS & JavaScript

Create Popup Modal Box in HTML CSS & JavaScript | Video

Popup Modal Box [Source Codes]

Credit Card Ui Design in HTML & CSS

Credit Card Ui Design in HTML & CSS | Video Tutorial

You Might Like This:

Credit Card Ui Design [Source Codes]

Border Loading Animation in HTML CSS & JavaScript

Border Loading Animation in HTML CSS JavaScript

You Could Like This:

Border Loading Animation [Source Codes]

How to Create Profile Card in HTML & CSS

How to Create Profile Card in HTML & CSS | Video Tutorial

You May Like This:

Profile Card UI Design [Source Code]

How to Create Todo List App in HTML CSS & JavaScript

Create Todo List App in HTML CSS & JavaScript | Video Tutorial

You Could Like This:

Create Todo List App [Source Code]

HTML CSS & JavaScript Projects for Beginners

1. Increament & Decreament on click

2. Button Loading Animation in HTML CSS & JavaScript

3. Typing Text Animation in HTML CSS & JavaScript

4. Circular Progress Bar in HTML CSS & JavaScript

5. Draggable Navigation Menu in HTML CSS & JavaScript

6. Product Card in HTML CSS & JavaScript

7. Password Show in Hide in HTML CSSS & JavaScript

8. Image Gallery with Searchbox in HTML CSS & JavaScript

9. Custom Select Menu in HTML CSS & JavaScript

10. Password Strength Checker in HTML CSS & JavaScript

11. Valid Email Checker in HTML CSS & JavaScript

12. Accordion Menu in HTML CSS & JavaScript

13. Toast Notification in HTML CSS & JavaScript

14. Multiple Options Select Menu in HTML CSS & JavaScript

15. Validate Email in HTML CSS & JavaScript

16. Website Coming Soon Page in HTML CSS & JavaScript

17. Password Confirmation Checker

18. Website Color Switcher in HTML CSS & JavaScript

19. Digital Clock in HTML CSS & JavaScript

20. Stopwatch in HTML CSS & JavaScript.

21. Calculator in HTML CSS & JavaScript

22. Email & Password Validation in HTML CSS & JavaScript

In a nutshell,

Toggle Button Dark Light Mode in HTML CSS & JavaScript LocalStorage

Toggle Button Dark Light Mode in JavaScript/LocatStorage

You May Like This:

Toggle Button with Dark Light Mode [Source Code]

Website Image Slider in HTML CSS & JavaScript | Swiperjs

Website Image Slider in HTML CSS & JavaSCript | Video Tutorial

You May Like This:

Website Image Slider [Source Code]

MCA Previous Year question paper of Data Structure CBCS Pattern

MCA Previous Year question paper of Data Structure

Disclaimer

How to Create Sidebar in HTML CSS JavaScript

Create Sidebar in HTML CSS JavaScript | Video Tutorial

You Might Like This:

Social Media Navigation Button [Source Code]

Social Media Navigation Button in HTML CSS & JavaScript

Social Media Navigation Button in HTML CSS & JavaScript

You Might Like This:

Social Media Navigation Button [Source Code]

Why we pay for internet?

Why we pay for internet?

Disclaimer

How to Validate Email & Password in HTML CSS JavaScript

Email and Password Validation in HTML CSS & JavaScript

You Might Like This:

Email & Password Validation [Source Code]

Can i learn hacking on my own ?

Can i learn hacking on my own ?

Be a problem solver

Join Community of Hacker

Save Bookmark of Hacking Blogs

Find a problem then fix it

Disclaimer

How to Validate Email in HTML CSS & JavaScript | Email Checker