Forem: Vicky Shinde

5 Tips to Write Clean Code and Best Practices in 2025

Vicky Shinde — Fri, 08 Nov 2024 17:39:01 +0000

Web Developer is not just about Learning a New Languages & Build some websites but one thing you keep in mind you have build website but you not write the clean code then your are not professional web developer in this post i will share 5 Best Tips to write the clean code in 2025

Use Meaningful and Descriptive Names:

Clear and descriptive names make your code easier to understand. Whether naming variables, functions, or classes, ensure the name conveys the purpose without needing comments.

Examples:

don't use this this type of variable/function/classes (Avoid this)
int x;

Use Like this type of Variable/function/classes (Use This)
int customerCount;

Pro Tip: Use nouns for variables, verbs for functions, and follow naming conventions for your language, like camelCase in JavaScript or snake_case in Python.

Keep Functions Short and Focused:

A clean function does one thing and does it well. It should be short, readable, and easy to test. Long functions can be broken down into smaller helper functions with single responsibilities.

Examples:

// Instead of doing multiple tasks in one function
function processOrder(order) {
    validateOrder(order);
    calculatePrice(order);
    applyDiscount(order);
    saveOrder(order);
}

Each helper function has a clear, focused task.

Pro Tip: Follow the "Single Responsibility Principle" (SRP) – each function should only handle one aspect of the task.

Avoid Deep Nesting

Deep nesting can make code hard to follow. Instead, consider using guard clauses to handle error cases first, which can reduce the nesting level and improve readability.

Example:

// Avoid
function processPayment(payment) {
    if (payment) {
        if (payment.isValid) {
            if (payment.amount > 0) {
                // Process payment
            }
        }
    }
}

// Use guard clauses instead
function processPayment(payment) {
    if (!payment || !payment.isValid || payment.amount <= 0) {
        return;
    }
    // Process payment
}

Write Comments Wisely

Only add comments to clarify complex logic or intentions that aren’t immediately obvious. Avoid comments that simply state what the code is doing; instead, focus on the "why" behind certain choices.

Examples:

// Avoid
let sum = 0; // Initialize sum to 0

// Better
// Using a rolling sum to optimize memory usage
let sum = 0;

Pro Tip: Use comments sparingly and only when they add value. Clean code should be self-explanatory whenever possible.

Use Error Handling Effectively

Don’t ignore errors; handle them in a way that keeps your application running or gives the user helpful feedback. Use try-catch blocks, handle promises properly, and avoid swallowing errors.

Example:

// Handle errors appropriately
async function fetchData() {
    try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        return data;
    } catch (error) {
        console.error("Failed to fetch data:", error);
    }
}

Pro Tip: Write custom error messages to improve debugging, and always log errors for future troubleshooting.

Conclusion:
Writing clean code is a habit that improves with practice. Following these best practices not only makes your code easier to read but also reduces errors, simplifies maintenance, and makes your software more reliable.

Remember, clean code is an investment that pays off in terms of readability, productivity, and maintainability. By following these tips, you’re not just improving your own coding skills—you’re creating a codebase that others can work with, appreciate, and build upon.

Top 20+ VS Code Shortcuts Every Developer Should Know

Vicky Shinde — Mon, 28 Oct 2024 05:10:51 +0000

Today's Blog Artical i will show you amazing 20+ VS code shortcuts that help you to become a pro developer this shortcuts boost your coding speed 10X.

General Editing :

CTRL+S - Save File
CTRL+Z - Undo
CTRL+Y - Redo
CTRL+X - Cut Line
CTRL+C - Copy Line
CTRL+V - Paste

Navigation

CTRL+P - Quick Open File
you want to open file instantly then you can use CTRL+P Shortscuts

CTRL+TAB - Switch Between Open Files
You want to switch one file to another file use this Shortcuts CTRL+TAB

CTRL+G - Go to Line
You have 1000 Line of code but you don't know Which line have you click just use this shortcuts CTRL+G

CTRL+SHIFT+E : Explore Sidebar
Sometime building the complex projects then you have multiple time open sidebar by using mouse but use this CTRL+SHIFT+E Shortcuts to open Sidebar

CTRL+SHIFT+F - Search in File
Develop the complex projects have multiple files at this time serach file using this shortcuts CTRL+SHIFT+F

Get the Free Front-end development Projects Visit our Blog

Code Editing

CTRL+SPACE - Trigger Intellisence
CTRL+SHIFT+SPACE - Trigger Parameter hints
ALT+UPARROW - Move to Line Up
ALT+DOWANARROW - Nove to Line Down
ALT+SHIFT+UPARROW - Copy Line Up
ALT+SHIFT+DOWNARROW - Copy Line Down
CTRL+/ - Toggle Line Comment

Windows Managements

CTRL+SHIFT+N - New Window
CTRL+SHIFT:W - Close Window
CTRL+- Toggle TerminalCTRL+B` - Toggle Sidebar Visibility

Final Words:

Mastering this 20+ Vs code Shortcuts that help you boost up your coding speed also you can using daily this shortcuts you will become a pro developer

Top 5 GitHub Repositories Every Developer Should Follow in 2024

Vicky Shinde — Wed, 18 Sep 2024 05:57:34 +0000

Github is best Platform for every new developer this platform is complelety

open source platform with the millons of repositories you can find the
specific repositories & Solve this bug in repositories

An today I Will Share you Top 5 GitHub Repositories Every Developer Should Follow in 2024 this repositories enhance your skills, and help you to build better projects.

1.FreeCodeCamp

Stars: 400K+
Primary Language: JavaScript

Why You Follow?

FreeCodeCamp is one of the most popular open-source learning platforms for developers.

With a mission to help people learn to code for free, this repository offers thousands of hours of coding lessons on web development, data science, and machine learning.

Key Features:

Comprehensive curriculum in JavaScript, Python, and more.
Certifications for skills like responsive web design and data visualization.
Active forums and a massive community to help you through the journey.

Ideal For:

Beginners looking to get into web development or data science.
Developers who want to practice coding challenges and contribute to open-source.

30-seconds-of-code

Stars: 114K+
Primary Language: JavaScript

Why You Follow?

"30-seconds-of-code" is a treasure trove of short, easy-to-understand JavaScript snippets.

It offers concise code snippets that can be read in 30 seconds or less, making it perfect for developers who want quick solutions to common coding problems.

Key Features:

Over 1,000 curated JavaScript snippets that solve real-world problems.
Consistently updated with new snippets and community contributions.
Covers concepts like arrays, strings, and more advanced topics like functional programming.

Ideal For:

JavaScript developers looking to improve coding efficiency.
Developers of all levels wanting bite-sized learning material.

The Algorithms

Stars: 170K+
Primary Language: Python (also available in other languages like Java, C++)

Why You Follow?

"The Algorithms" repository is one of the most comprehensive collections of algorithms implemented in Python.

From basic algorithms like sorting and searching to advanced concepts like machine learning and cryptography, this repository has it all.

It's a fantastic resource for brushing up on data structures and algorithms, which are crucial for technical interviews.

Key Features:

Hundreds of algorithm implementations in Python (also available in Java, Go, and other languages).
Organized into categories such as math, machine learning, and dynamic programming.
Great for understanding the theory behind algorithms and practicing implementation.

Ideal For:

Developers preparing for coding interviews.
Students and engineers wanting to deepen their understanding of algorithms.

Public APIs

Stars: 260K+
Primary Language: Markdown

Why You Follow?

Public APIs is a curated list of free APIs for developers to use in their projects.

APIs are critical in today's software ecosystem, whether you’re building mobile apps, websites, or automating tasks.

This repository offers a one-stop-shop for finding APIs related to weather, finance, machine learning, and more.

Key Features:

A categorized collection of free APIs for various domains like health, sports, and finance.
Regularly updated with new APIs.
Helps developers quickly find APIs to integrate into their applications.

Ideal For:

Web and mobile developers needing external services in their projects.
Developers building applications that rely on external data or functionality.

Build Your Own X

Stars: 220K+
Primary Language: Multiple (Python, Go, C++)

Why You Follow?

"Build Your Own X" is a collection of tutorials that teach you how to build various technical projects from scratch.

Whether you want to build your own operating system, search engine, or
blockchain, this repository has tutorials that guide you through the process step-by-step.

Key Features:

Comprehensive guides to building a wide range of projects like a programming language or a neural network.
Contributions from experts across different fields.
A hands-on learning approach to understanding how complex systems work.

Ideal For:

Developers who love building things from scratch.
Intermediate to advanced developers wanting to understand the inner workings of technology.

Bonus: EddieHub

Stars: 10K+
Primary Language: JavaScript, TypeScript

Why You Follow?

EddieHub is a community-driven repository focusing on open-source collaboration.

It encourages developers of all levels to contribute to open-source projects, participate in hackathons, and build a solid portfolio.

The community is welcoming to newcomers and offers support
for first-time contributors.

Key Features:

Focuses on building open-source contributions and providing support for developers.
Hosts regular open-source events and hackathons.
Encourages collaborative learning and networking with like-minded developers.

Ideal For:

Developers looking to get into open-source development.
Coders who want to build a network and improve collaboration skills.

Conclusion:

These GitHub repositories are valuable resources for developers at any level.

Whether you're preparing for interviews, looking for coding challenges, or wanting to contribute to open-source projects, these repositories offer everything you need to enhance your coding skills
in 2024.

Please Save This Valuable Blog Post Aslo you can follow me & Share to your Friends

Note: If you want to more resources Likes Ebook , Handwritten notes , Free Useful Websites & Stock Images then you can Join my Telegram Channel Link

What is an API? A Beginner's Guide

Vicky Shinde — Tue, 11 Jun 2024 17:40:24 +0000

What is an API? A Beginner's Guide

In today's interconnected digital world, APIs play a crucial role in how different software applications communicate with each other. Whether you're a developer, a business owner, or just a curious tech enthusiast, understanding APIs is essential. In this blog post, we'll dive into what an API is, how it works, and why it's important.

What is an API?

API stands for Application Programming Interface. It's a set of rules and definitions that allows different software applications to communicate with each other. Think of an API as a translator that enables two different systems to interact and share information seamlessly.

How Do APIs Work?

At its core, an API acts as an intermediary between two applications.

Here’s a simple analogy:
imagine you’re at a restaurant. You (the client) give your order to the waiter (the API), who then conveys your request to the kitchen (the server). The kitchen prepares your meal and the waiter delivers it back to you.

In the digital world, the process is quite similar:

Request: An application (the client) sends a request to the API.
Processing: The API processes the request and communicates with the server.
Response: The server sends the requested information or performs the desired action, and the API delivers this response back to the client.

Types of APIs

APIs come in various types, each serving different purposes:

- Web APIs: These are the most common types, allowing interaction between web servers and clients. Examples include REST (Representational State Transfer) and SOAP (Simple Object Access Protocol) APIs.

- Operating System APIs: These APIs allow software applications to interact with the operating system. Examples include Windows API and POSIX.

- Database APIs: These APIs enable communication between applications and databases, allowing data retrieval, manipulation, and management.

- Library or Framework APIs: These provide a set of functions and routines that developers can use within their applications.

- .NET Framework API: These provide a set of functions and routines that developers can use within their applications. Examples include the Java API and the .NET Framework API.

Why Are APIs Important?

APIs are vital for several reasons:

1. Interoperability: APIs enable different systems and applications to work together, regardless of their underlying technology.

2. Efficiency: By allowing applications to communicate directly, APIs streamline processes and reduce the need for manual intervention.

3. Innovation: APIs enable developers to build on existing technologies, fostering innovation and the creation of new services and applications.

4. Scalability: APIs make it easier to scale applications by allowing them to communicate with other services and resources seamlessly.

Conclusion

APIs are the unsung heroes of modern technology, enabling seamless interaction between different software applications. By understanding what an API is and how it works, you can appreciate the critical role they play in our digital world. Whether you're a developer looking to integrate new features into your application or a business owner seeking to streamline operations, APIs offer a powerful solution to enhance functionality and drive innovation.

How to Host Website on Netlify for FREE

Vicky Shinde — Thu, 06 Jun 2024 02:44:38 +0000

Hosting a website on Netlify is a straightforward process. Here are the steps to get your site up and running:

Create a Netlify Account:

Go to Netlify's website and sign up for a free account if you don't have one.

Connect Your Git Repository:

After logging in, click on "New site from Git".
Connect to your Git provider (GitHub, GitLab, or Bitbucket) and authorize Netlify to access your repositories.

Choose Your Repository:

Select the repository that contains your website code.
Netlify will automatically detect the build settings. If it doesn't, you can specify the build command and the publish directory (e.g., npm run build and dist).

Build and Deploy:

Click "Deploy site" Netlify will start the build process and deploy your website.
Once the build is complete, Netlify will provide you with a temporary URL where your site is live.

Custom Domain (Optional):

If you have a custom domain, you can add it to your Netlify site.
Go to "Domain settings" in your site's dashboard.
Click on "Add custom domain" and follow the instructions to configure your DNS settings.

Continuous Deployment:

Every time you push changes to your repository, Netlify will automatically rebuild and redeploy your site.

Additional Features:

Form Handling: Netlify offers built-in form handling without any backend code.
Redirects and Rewrites: You can configure redirects and rewrites using a _redirects file or netlify.toml.
Environment Variables: You can set environment variables for your build process in the site settings.
Functions: Netlify supports serverless functions that can be used for dynamic back-end processing.

Example:

Here’s an example for deploying a simple static HTML site:

Create a repository on GitHub and push your site’s code to it.
Connect the repository to Netlify as described above.
Since it’s a static site, you might not need any build command. You can directly specify the publish directory where your HTML files are located.
Deploy and check your site.

That’s it! Your site should now be live on Netlify.

Building a Calculator App with JavaScript: A Beginner's Guide

Vicky Shinde — Thu, 15 Feb 2024 04:04:12 +0000

Creating interactive applications is both challenging and rewarding. One classic example is a calculator app, which not only serves as a practical tool but also offers a great opportunity to learn fundamental JavaScript concepts.

In this article, we'll embark on a journey to build a simple calculator application using JavaScript.

For simplicity, I'll create a calculator with basic arithmetic operations (addition, subtraction, multiplication, division).

Understanding the Basic:
Before diving into the code, let's outline the basic functionalities our calculator app should have:

Display: A display area to show the input and output of calculations.

Buttons: Buttons representing numbers, arithmetic operators, and other controls like "Clear" and "Equals".

Arithmetic Operations: Support for basic arithmetic operations like addition, subtraction, multiplication, and division.
Setting Up the HTML Structure

We'll start by creating the structure of our calculator using HTML.

Here's a basic template to get us started:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Build Calculator App</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="calculator">
    <input type="text" id="result" readonly>
    <div class="keys">
      <button onclick="appendNumber('7')">7</button>
      <button onclick="appendNumber('8')">8</button>
      <button onclick="appendNumber('9')">9</button>
      <button class="minus" onclick="appendOperator('+')">+</button>
      <button onclick="appendNumber('4')">4</button>
      <button onclick="appendNumber('5')">5</button>
      <button onclick="appendNumber('6')">6</button>
      <button class="minus" onclick="appendOperator('-')">-</button>
      <button onclick="appendNumber('1')">1</button>
      <button onclick="appendNumber('2')">2</button>
      <button onclick="appendNumber('3')">3</button>
      <button class="minus" onclick="appendOperator('*')">*</button>
      <button onclick="appendNumber('0')">0</button>
      <button class="minus" onclick="clearResult()">C</button>
      <button class="minus" onclick="calculateResult()">=</button>
      <button class="minus" onclick="appendOperator('/')">/</button>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

Styling the Calculator
While styling isn't the primary focus of this tutorial, we'll add some basic CSS to make our calculator visually appealing and user-friendly.

Feel free to customize the styles according to your preference.

CSS Structure:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

* {
    font-family: 'Poppins', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #c2b2d8;
  }

  .calculator {
    background-color: #090012;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
  }

  #result {
    width: calc(100% - 20px);
    margin-bottom: 10px;
    padding: 10px;
    font-size: 20px;
    border-radius: 10px;
    border: none;
    outline: none;
  }

  .keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
  }

  button {
    padding: 10px;
    font-size: 18px;
    background-color: #ffffff;
    color: #000000;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    outline: none;
}

button:hover {
    background-color: #e9d8f7;
}

.minus{
    background-color: rgb(245, 113, 197);
    font-weight: 500;
    color: white;
  }

.minus:hover{
    background-color: rgb(243, 81, 184);
}

Implementing JavaScript Functionality:

Now, let's add the JavaScript logic to make our calculator functional. We'll define functions to handle number input, arithmetic operations, and calculation.

let result = document.getElementById('result');

function appendNumber(num) {
  result.value += num;
}

function appendOperator(operator) {
  result.value += operator;
}

function clearResult() {
  result.value = '';
}

function calculateResult() {
  try {
    result.value = eval(result.value);
  } catch (error) {
    result.value = 'Error';
  }
}

Wrapping Up
Congratulations! You've built a basic calculator app using JavaScript. While this example covers only the essentials, there's a lot more you can do to enhance its functionality and appearance.

Consider adding support for decimal numbers, handling keyboard input, or implementing more advanced operations.

If you want Download the Projects Source code Then Please Join Use our Telegram Channel Click on Below Button ⤵👇

Array methods in JavaScript - Code Vicky

Vicky Shinde — Thu, 25 Jan 2024 17:51:54 +0000

JavaScript provides several built-in methods for working with arrays. Here are some commonly used array methods:

push(): Adds one or more elements to the end of an array and returns the new length of the array.

const fruits = ['apple', 'banana'];
fruits.push('orange', 'grape');

console.log(fruits);
// fruits is now ['apple', 'banana', 'orange', 'grape']

pop(): Removes the last element from an array and returns that element.

const fruits = ['apple', 'banana', 'orange'];
const removedFruit = fruits.pop();

console.log(fruits)
// removedFruit is 'orange', fruits is now ['apple', 'banana']

shift(): Removes the first element from an array and returns that element.

const fruits = ['apple', 'banana', 'orange'];
const removedFruit = fruits.shift();
// removedFruit is 'apple', fruits is now ['banana', 'orange']
console.log(fruits);

unshift(): Adds one or more elements to the beginning of an array and returns the new length of the array.

const fruits = ['apple', 'banana', 'orange'];
const removedFruit = fruits.shift();
console.log(fruits);
// removedFruit is 'apple', fruits is now ['banana', 'orange']

indexOf(): Returns the first index at which a given element can be found in the array, or -1 if it is not present.

const fruits = ['apple', 'banana', 'orange'];
const index = fruits.indexOf('banana');
console.log(index);
// index is 1

splice(): Changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

const fruits = ['apple', 'banana', 'orange'];
fruits.splice(1, 1, 'grape', 'kiwi');
console.log(fruits);
// fruits is now ['apple', 'grape', 'kiwi', 'orange']

slice(): Returns a shallow copy of a portion of an array into a new array.

const fruits = ['apple', 'banana', 'orange', 'grape'];
const slicedFruits = fruits.slice(1, 3);
console.log(slicedFruits);
// slicedFruits is ['banana', 'orange'], fruits remains unchanged

forEach(): Executes a provided function once for each array element.

const fruits = ['apple', 'banana', 'orange'];
fruits.forEach((fruit) => {
    console.log(fruit);
});
console.log(fruits);
// Outputs: apple, banana, orange

These are just a few examples, and JavaScript provides many more array methods for various operations. Understanding these methods can make it easier to work with arrays in JavaScript.

How to use Better Comment Extension in VS Code

Vicky Shinde — Wed, 24 Jan 2024 04:11:54 +0000

In the fast-paced world of coding, effective collaboration and clear communication are paramount. As developers, we spend a significant amount of time reading and writing code. One crucial element in fostering a collaborative coding environment is the use of well-structured and informative comments. Enter "Better Comments," a VSCode extension that transforms the way we annotate our code.

Understanding Better Comments:
Better Comments is a powerful extension designed to enrich your code comments, making them more expressive and actionable. By introducing a set of customizable comment tags, this extension goes beyond the conventional "//" and "/* */" syntax, adding a layer of semantic meaning to your annotations.

Installation and Configuration:
Getting started with Better Comments is a breeze. Simply install the extension from the Visual Studio Code marketplace and customize your comment tags based on your preferences. Whether you want to highlight important tasks, mark critical issues, or emphasize future improvements, Better Comments allows you to tailor your commenting style to suit your workflow.

*How to use its On VS Code *
After Install Extension go to Extension Workplace setting & Click on Setting.json File You will get Better Comments Default code.

then Relaunch VS Code Editor and now you can comments in better way.

Examples :

the shortcuts for Comments is CTRL + / this is fastest way to comment your code but if you want to highlight & Good looking Comments then you can just add this Sign before comments is Start *'!' , '//' , '' & 'todo' **

But you need to install JSON file to your code editor

Just click on Setting.json file you will get the code file then you can easily highlight your comments

Conclusion:
I Think this is best Comments extension in VS Code. I will Suggest every new developer install this better comment extension is great way to show you comments to Other developer.

The Better Comments extension for Visual Studio Code is a game-changer, making your code not just functional, but also comprehensible and collaborative. Install it today and start experiencing the difference!

Get the FREE Resources Like Handwritten Notes,Quiz, Front-end Projects & Much More 🎉 Click Here to Join Telegram Channel

Design a Responsive Silding Sign in & Up Form using JavaScript

Vicky Shinde — Mon, 22 Jan 2024 02:33:28 +0000

Hello Coders, Today's Blog i will show you how to Create Responsive Sliding Sign in & Sign up Form Using HTML,CSS & Javascript

This is One of the Best project for as New & Intermediate Programmers This project really Improve your Understanding skills.

Nowadays you can see every Business Website Needs to Sign in &Sign Up Form I will Design the Beautiful sliding Login & Signup Animation Using Javascript

Sign up Form use to Create a New Account for a new users for a website and a Login form is Existing User details of a registered user into their particular account

There are so many websites use this types of Sign in & Sign Up form Because this form is Looking Nice 👍 & User can easily fill out this form. We will Combine sign in & up form in Single page Also the Form Sliding with Smooth animation

First of All I Will show you projects preview that you can easily understand what I'm Saying...

I Hope you can enjoy this projects I will step by Step Guide you to build this Responsive Sliding Sign in & Sign up Form Using HTML,CSS & Javascript. Also I will Explain code in written format. If you have seen Project Preview Video then you can Continue Reading the Post

File Structure :

First you can create a Folder that Name is Folder is Sliding Form After Creating Folder Add HTML File as name is Index.html & Add CSS File name is Style.css Also I've Write Some JavaScript Code in HTML File

To Create Responsive Sliding Sign in & Sign up Form Using HTML,CSS & JavaScript follow the given steps line by line:

Create a folder You can name this folder whatever you want, and inside this folder, create the mentioned files.

Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css

To start, add the following HTML codes to your index.html file to create the basic layout of the project.

HTML & JS CODE :

<!DOCTYPE html>
<!-- created by Coder Vicky || www.codervicky.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>Sign in/up Form</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container" id="container">
  <div class="form-container sign-up-container">
    <form action="#">
      <h1>Create Account</h1>
      <div class="social-container">
        <a href="#" class="social"><i class="fa fa-facebook-square"></i></a>
        <a href="#" class="social"><i class="fa fa-twitter-square"></i></a>
        <a href="#" class="social"><i class="fa fa-linkedin-square"></i></a>
      </div>
      <span>or use your email for registration</span>
      <input type="text" placeholder="Name" />
      <input type="email" placeholder="Email" />
      <input type="password" placeholder="Password" />
      <button>Sign Up</button>
    </form>
  </div>
  <div class="form-container sign-in-container">
    <form action="#">
      <h1>Sign in</h1>
      <div class="social-container">
        <a href="#" class="social"><i class="fa fa-facebook-square"></i></a>
        <a href="#" class="social"><i class="fa fa-twitter-square"></i></a>
        <a href="#" class="social"><i class="fa fa-linkedin-square"></i></a>
      </div>
      <span>or use your account</span>
      <input type="email" placeholder="Email" />
      <input type="password" placeholder="Password" />
      <a href="#">Forgot your password?</a>
      <button>Sign In</button>
    </form>
  </div>
  <div class="overlay-container">
    <div class="overlay">
      <div class="overlay-panel overlay-left">
        <h1>Welcome Back!</h1>
        <p>To keep connected with us please login with your personal info</p>
        <button class="ghost" id="signIn">Sign In</button>
      </div>
      <div class="overlay-panel overlay-right">
        <h1>Hello, Friend!</h1>
        <p>Enter your personal details and start journey with us</p>
        <button class="ghost" id="signUp">Sign Up</button>
      </div>
    </div>
  </div>
</div>
<script>
  const signUpButton = document.getElementById('signUp');
const signInButton = document.getElementById('signIn');
const container = document.getElementById('container');

signUpButton.addEventListener('click', () => {
  container.classList.add("right-panel-active");
});

signInButton.addEventListener('click', () => {
  container.classList.remove("right-panel-active");
});
</script>


</body>
</html>

Next, add the following CSS codes to your style.css file to make the layout look better. These codes will style the layout and give it a visually appealing appearance.

CSS CODE :

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');

* {
  box-sizing: border-box;
}

body {
  background: #f6f5f7;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: 'Montserrat', sans-serif;
  height: 100vh;
  margin: -20px 0 50px;
}

h1 {
  font-weight: bold;
  margin: 0;
}

h2 {
  text-align: center;
}

p {
  font-size: 14px;
  font-weight: 100;
  line-height: 20px;
  letter-spacing: 0.5px;
  margin: 20px 0 30px;
}

span {
  font-size: 12px;
}

a {
  color: #333;
  font-size: 14px;
  text-decoration: none;
  margin: 15px 0;
}

button {
  border-radius: 20px;
  border: 1px solid #FF4B2B;
  background-color: #FF4B2B;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: bold;
  padding: 12px 45px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: transform 80ms ease-in;
  cursor: pointer;
}

button:active {
  transform: scale(0.95);
}

button:focus {
  outline: none;
}

button.ghost {
  background-color: transparent;
  border-color: #FFFFFF;
  cursor: pointer;
}

form {
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 50px;
  height: 100%;
  text-align: center;
}

input {
  background-color: #eee;
  border: none;
  padding: 12px 15px;
  margin: 8px 0;
  width: 100%;
}

.container {
  background-color: #fff;
  border-radius: 10px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 
      0 10px 10px rgba(0,0,0,0.22);
  position: relative;
  overflow: hidden;
  width: 768px;
  max-width: 100%;
  min-height: 480px;
}

.form-container {
  position: absolute;
  top: 0;
  height: 100%;
  transition: all 0.6s ease-in-out;
}

.sign-in-container {
  left: 0;
  width: 50%;
  z-index: 2;
}

.container.right-panel-active .sign-in-container {
  transform: translateX(100%);
}

.sign-up-container {
  left: 0;
  width: 50%;
  opacity: 0;
  z-index: 1;
}

.container.right-panel-active .sign-up-container {
  transform: translateX(100%);
  opacity: 1;
  z-index: 5;
  animation: show 0.6s;
}

@keyframes show {
  0%, 49.99% {
    opacity: 0;
    z-index: 1;
  }

  50%, 100% {
    opacity: 1;
    z-index: 5;
  }
}

.overlay-container {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: transform 0.6s ease-in-out;
  z-index: 100;
}

.container.right-panel-active .overlay-container{
  transform: translateX(-100%);
}

.overlay {
  background: #FF416C;
  background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
  background: linear-gradient(to right, #FF4B2B, #FF416C);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0;
  color: #FFFFFF;
  position: relative;
  left: -100%;
  height: 100%;
  width: 200%;
    transform: translateX(0);
  transition: transform 0.6s ease-in-out;
}

.container.right-panel-active .overlay {
    transform: translateX(50%);
}

.overlay-panel {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 40px;
  text-align: center;
  top: 0;
  height: 100%;
  width: 50%;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
}

.overlay-left {
  transform: translateX(-20%);
}

.container.right-panel-active .overlay-left {
  transform: translateX(0);
}

.overlay-right {
  right: 0;
  transform: translateX(0);
}

.container.right-panel-active .overlay-right {
  transform: translateX(20%);
}

.social-container {
  margin: 20px 0;
}

.social-container a {
  border: 1px solid #DDDDDD;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 5px;
  height: 40px;
  width: 40px;
}

That’s all, now you’ve successfully Create Responsive Sliding Sign in & Sign up Form Using HTML,CSS & JavaScript. If my code doesn’t work or you’ve faced any problem, please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.