DEV Community: Hari Naga Sai Perisetla

10 Essential Tools Every Web Developer Should Know

Hari Naga Sai Perisetla — Sat, 20 May 2023 07:01:33 +0000

As a web developer, having the right set of tools can make a significant difference in your productivity and the quality of your work. Whether you're a beginner or an experienced professional, there are certain tools that every web developer should be familiar with. These tools can streamline your workflow, help you troubleshoot issues, and enhance your development process. In this blog post, we'll explore 10 essential tools that every web developer should know. From code editors to version control systems, we'll cover a range of tools that can empower you to build better websites and applications. Whether you're looking to improve your efficiency, collaborate effectively, or enhance your coding skills, these tools will be invaluable additions to your toolkit.

1. Code Editor

A reliable code editor is the cornerstone of every web developer's toolkit. From writing and editing code to syntax highlighting and autocomplete, a good code editor provides essential features that boost your productivity. Popular choices include Visual Studio Code, Sublime Text, and Atom.

2. Version Control System

Version control is crucial for managing your codebase and collaborating with others. Git, a distributed version control system, is widely used in the web development community. It allows you to track changes, create branches, and merge code seamlessly.

3. Package Manager

Package managers simplify the process of installing, updating, and managing external libraries and dependencies in your projects. NPM (Node Package Manager) and Yarn are popular choices among web developers, providing access to a vast ecosystem of open-source packages.

4. Browser Developer Tools

Browser Developer Tools are indispensable for debugging and optimizing your web applications. They allow you to inspect HTML, modify CSS styles in real-time, monitor network requests, and analyze JavaScript performance.

5. CSS Preprocessors

CSS preprocessors like Sass and Less enable you to write cleaner and more maintainable CSS code. They offer features such as variables, mixins, and nesting, which can significantly streamline your styling process.

6. Task Runner

Task runners automate repetitive tasks in your development workflow. Tools like Grunt and Gulp help you perform tasks such as minifying CSS and JavaScript files, optimizing images, and running tests, saving you time and effort.

7. Browser Compatibility Tools

Ensuring your websites work seamlessly across different browsers is crucial. Tools like BrowserStack and CrossBrowserTesting allow you to test your websites on various browsers and operating systems, ensuring maximum compatibility.

8. Performance Optimization Tools

Page speed and performance are critical factors in user experience. Tools like Lighthouse and PageSpeed Insights analyze your website's performance, identify bottlenecks, and provide recommendations for optimization.

9. Content Management System (CMS)

A CMS simplifies content creation and management for websites. Platforms like WordPress, Drupal, and Joomla offer powerful CMS features, allowing you to build dynamic and scalable websites with ease.

10. Online Learning Platforms

Continuous learning is essential for web developers. Online learning platforms like Udemy, Coursera, and Codecademy offer a wide range of courses and tutorials to enhance your coding skills and stay updated with the latest technologies.

By familiarizing yourself with these essential tools, you'll be well-equipped to tackle various challenges in web development. Keep exploring new tools and technologies to stay at the forefront of the ever-evolving web development landscape.

What other tools do you find essential as a web developer? Share your thoughts in the comments below!

tags: #webdevelopment #webtools #codingtools #frontenddevelopment

Why I Switched to Tailwind CSS

Hari Naga Sai Perisetla — Wed, 17 May 2023 08:44:55 +0000

As a web developer, Ive always been on the lookout for tools that make my work easier and more efficient. When I first started out, I was a big fan of using custom CSS for every project. But as I gained more experience, I realized that there was a better way to approach styling - thats when I discovered Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that makes it easy to create custom designs without having to write a lot of custom CSS. Its different from other CSS frameworks like Bootstrap or Foundation, which provide pre-built UI components that you can use in your project. Instead, Tailwind CSS provides you with a set of pre-built utility classes that you can use to style your HTML.

Why I Switched to Tailwind CSS

There are a few reasons why I decided to switch to Tailwind CSS:

1. Speed

One of the biggest advantages of Tailwind CSS is its speed. Since its a utility-first framework, you dont have to spend time writing custom CSS for every element in your design. Instead, you can just add pre-built classes to your HTML, which speeds up the development process significantly.

2. Customization

Another advantage of Tailwind CSS is the ability to customize your designs quickly and easily. With pre-built classes for spacing, typography, and color, you can create custom designs without having to write a lot of CSS. Plus, if you need to make changes to your design later, its easy to update your classes and see the changes immediately.

3. Flexibility

Tailwind CSS is also incredibly flexible. Since its a utility-first framework, you can use it in conjunction with other CSS frameworks or libraries. This means that you can easily integrate Tailwind CSS into your existing projects without having to completely overhaul your codebase.

Getting Started with Tailwind CSS

If youre interested in using Tailwind CSS, getting started is easy. You can either download the framework and add it to your project manually, or you can use a package manager like NPM or Yarn to install it. Once you have Tailwind CSS installed, you can start adding classes to your HTML and see your designs come to life.

Conclusion

Overall, Ive found that using Tailwind CSS has made my life as a web developer a lot easier. Its speed, flexibility, and customization options make it a great choice for projects of all sizes. So if youre tired of writing custom CSS for every project, give Tailwind CSS a try - you might be surprised at how much time and effort it can save you!

HTML and CSS? Learn React on the go!

Hari Naga Sai Perisetla — Sun, 07 May 2023 11:28:20 +0000

React has been making waves in the world of web development since its release in 2013. It's a powerful tool for building user interfaces and web applications, and it's been gaining popularity ever since. But for some developers who are just starting to explore it, React can seem daunting.

If you're familiar with HTML and CSS, however, you're already halfway there. React is just a matter of learning a few new concepts and patterns.

What is React?

React is a JavaScript library for building user interfaces. It was developed by Facebook and released to the public in 2013. Since then, it's become one of the most popular tools for building web applications.

React uses a component-based architecture, which means that you can break down your application into small, reusable pieces. Each component can have its own state and properties, making it easy to manage complex applications.

HTML and CSS vs. React

HTML and CSS are the building blocks of the web. They provide the structure and style for every website on the internet. React, on the other hand, is a library for building user interfaces.

While HTML and CSS are static, React allows you to create dynamic user interfaces that can update in real-time. This makes React ideal for building web applications and interactive experiences.

Learning React

If you already know HTML and CSS, you're already familiar with the basic building blocks of web development. Learning React is just a matter of building on that foundation.

The first step is to understand the basic concepts of React. This includes understanding the component-based architecture, as well as learning how to manage state and props.

Once you have a solid understanding of the basics, you can start building more complex applications. You'll need to learn how to work with data and APIs, as well as how to handle events and user interactions.

Why Learn React?

There are many reasons to learn React. For one, it's one of the most popular tools for building web applications. This means that there's a large community of developers who can help you when you run into problems.

React is also highly versatile. It can be used to build everything from simple web pages to complex applications. And because it's a JavaScript library, it's compatible with a wide range of other tools and frameworks.

Conclusion

If you know HTML and CSS, learning React is just a matter of building on that foundation. React is a powerful tool for building user interfaces and web applications, and it's a valuable addition to any developer's toolkit.

So if you're interested in building dynamic, interactive web experiences, consider diving into React. With a little time and effort, you'll be building complex applications in no time.

Why JavaScript is Here to Stay and Web Developers Are Too

Hari Naga Sai Perisetla — Thu, 04 May 2023 05:19:30 +0000

In the ever-evolving world of web development, one thing remains constant: JavaScript. Over the years, JavaScript has established itself as the go-to programming language for building dynamic and interactive web applications. But what makes JavaScript so resilient, and why are web developers an integral part of its enduring success? In this blog post, we'll explore the reasons behind JavaScript's longevity and why web developers continue to thrive in this exciting field.

JavaScript's Versatility and Ubiquity

One of the key factors contributing to JavaScript's staying power is its versatility. JavaScript is a multipurpose language that can be used both on the front end and back end of web development. It allows developers to create engaging user interfaces, handle client-side interactions, and build powerful server-side applications. Its versatility makes it a core technology in the web development ecosystem, ensuring its relevance across a wide range of projects and platforms.

Furthermore, JavaScript's ubiquity is undeniable. It is supported by all major web browsers, making it accessible to users across different devices and operating systems. With JavaScript, developers can reach a vast audience and deliver seamless experiences on the web.

The Thriving JavaScript Ecosystem

JavaScript owes much of its enduring popularity to its thriving ecosystem. The language boasts a vast collection of frameworks, libraries, and tools that empower developers to streamline their workflows and build robust applications more efficiently. Frameworks like React, Angular, and Vue.js have revolutionized front-end development, providing developers with powerful tools for creating dynamic user interfaces.

Additionally, the JavaScript community is incredibly active and supportive. Developers can tap into a wealth of online resources, documentation, tutorials, and open-source projects. This vibrant community fosters collaboration, knowledge sharing, and continuous improvement, which further fuels JavaScript's growth and innovation.

JavaScript's Adaptability to Modern Technologies

As technology continues to evolve, JavaScript has proven its adaptability. It seamlessly integrates with emerging trends and technologies, ensuring its relevance in the ever-changing landscape of web development. From progressive web apps (PWAs) to serverless architectures and mobile app development with frameworks like React Native, JavaScript has demonstrated its ability to keep up with the demands of modern web development.

The Demand for Skilled Web Developers

With JavaScript being a fundamental language in web development, the demand for skilled web developers is continuously on the rise. Companies across industries recognize the value of having a strong online presence and user-friendly web applications. Web developers who possess expertise in JavaScript are sought after for their ability to create engaging, interactive, and performant web experiences.

Moreover, web development itself has become a dynamic and fulfilling career path. As the digital landscape expands, web developers are presented with diverse opportunities to work on exciting projects, collaborate with cross-functional teams, and contribute to the ever-evolving world of technology.

Embracing the Future of Web Development

In conclusion, JavaScript is here to stay, and web developers are an essential part of its enduring success. The versatility, thriving ecosystem, adaptability, and increasing demand for skilled web developers all contribute to JavaScript's continued prominence in the web development landscape. As we embrace the future of web development, it's clear that JavaScript will remain at the forefront, empowering developers to create innovative and immersive web experiences.

So, if you're a web developer or aspiring to be one, rest assured that JavaScript is a solid foundation for your career. Embrace its possibilities, continue learning, and join the ever-growing community of web developers shaping the digital landscape.

Happy coding!

Why Frontend Code is More Copied than Backend?

Hari Naga Sai Perisetla — Wed, 26 Apr 2023 07:09:05 +0000

Have you ever wondered why frontend code is more likely to be copied than backend code? As a front-end developer myself, Ive noticed this trend and have a few theories about why it might be the case.

The Visual Nature of Frontend Code

One of the main reasons why frontend code is more likely to be copied is simply because its easier to see whats going on. Frontend code deals with the visual components of a website or application, so its more tangible and accessible to people who dont have a deep understanding of coding.

On the other hand, backend code deals with the behind-the-scenes functionality of a website or application, which is less visible to the end user. Its not as easy to copy and paste backend code because its more abstract and requires a deeper understanding of programming concepts.

Copy-Pasting is Easier with Frontend Code

Lets be real, weve all copied and pasted some code at some point in our careers. Its just easier that way. And when it comes to frontend code, its often a matter of copying and pasting a few lines of HTML, CSS, or JavaScript to achieve the desired effect.

Backend code, on the other hand, can involve complex algorithms and logic, making it more difficult to simply copy and paste. Plus, copying and pasting backend code can be risky, as it may not work properly with other parts of the codebase.

The Abundance of Frontend Resources

Theres no denying that front-end development has exploded in popularity in recent years. With the rise of frameworks like React, Vue, and Angular, theres an abundance of resources available to front-end developers.

From online courses to blog posts and open-source libraries, front-end developers have a wealth of information at their fingertips. This abundance of resources makes it easier to find code snippets that can be copied and pasted into projects.

The Importance of Backend Security

One final reason why backend code is less likely to be copied is the importance of security. Backend code deals with sensitive information like user data and payment information, so it must be written correctly and securely.

Copying and pasting backend code without fully understanding what it does can have serious consequences. That backend code must be written by experienced developers who understand the potential risks and take appropriate measures to ensure the security of the codebase.

Conclusion

In conclusion, Frontend code is more copied than backend code because its more visible, easier to copy, and often reusable. While this may be a good thing, its important to remember that copying code isnt the same as understanding it. As a developer, I should strive to understand the code that Im working with, rather than simply copying and pasting it. And let's face it, I copy some code at some point - it's the life of a developer. But don't worry, I'll never tell anyone your secret copy-pasting habits!

Happy Coding!

20 Must-Know Windows Shortcuts for Supercharging Your Productivity

Hari Naga Sai Perisetla — Wed, 19 Apr 2023 06:18:01 +0000

If you are a Windows user, you probably know that using keyboard shortcuts can save you a lot of time and effort. Instead of navigating through menus and clicking on different options, you can perform various tasks with just a few keystrokes. In this blog post, we'll explore some of the most useful keyboard shortcuts in Windows that can help you increase your productivity.

Taskbar Apps

One of the most common tasks in Windows is switching between apps. You can do this quickly by using the taskbar. To open an app from the taskbar, simply press the Windows key and the number corresponding to the position of the app on the taskbar.

Action Center

The Action Center is a centralized location in Windows where you can access notifications, quick settings, and other features. To open the Action Center, press the Windows key and the letter A.

Desktop View

To quickly show the desktop or minimize all open windows and go to the desktop, press the Windows key and the letter D.

Explorer

If you want to open File Explorer quickly, press the Windows key and the letter E.

Settings

To open the Settings app, press the Windows key and the letter I.

Lock screen

If you need to lock your computer quickly and go to the lock screen, press the Windows key and the letter L.

Ease of Access

To open the Ease of Access Center, press the Windows key and the letter U.

Minimize Apps

To minimize the active app window, press the Windows key and the Down Arrow.

Reposition and Resize Apps

If you want to move or resize an app window quickly, use the Windows key and the arrow keys.

Run

If you need to open the Run dialog box, press the Windows key and the letter R.

Search

To open the search bar, press the Windows key and the letter S.

Virtual Desktop

If you need to create a new virtual desktop, press the Windows key and the Tab key to open Task View, and then click New Desktop.

Magnifier

If you need to zoom in using Magnifier, press the Windows key and the Plus Sign (+). To zoom out, press the Windows key and the Minus Sign (-).

Screenshots

To take a screenshot, press the Windows key and the Print Screen key. If you need to capture a specific area of the screen, press the Windows key , the Shift key , and the letter S.

Task View

If you need to see all open apps, press the Windows key and the Tab key to open Task View.

Task Manager

If you need to open Task Manager, press the Ctrl key , the Shift key , and the Esc key.

Game Bar

If you are playing a game and need to open the Game bar, press the Windows key and the letter G.

Close Windows

To close the active window or application, press the Alt key and the F4 key.

Switch Apps

To switch between open apps, press the Alt key and the Tab key.

Shut Down

To open the Shut Down Windows dialog box, press the Alt key and the F4 key.

Conclusion

In conclusion, these are just some of the many keyboard shortcuts available in Windows. By using these shortcuts, you can save time and increase your productivity. If you want to become even more efficient in your work, consider learning more keyboard shortcuts for Windows and other programs you use regularly.

For a demo of how to use these shortcuts, check out the video below.

https://www.youtube.com/watch?v=BMqwMFRQsJE

How to create a Cool Login Page using only Bootstrap (No Custom CSS required)

Hari Naga Sai Perisetla — Fri, 05 Aug 2022 12:37:11 +0000

I have been working with Bootstrap for a long time now. I have seen how well the framework has grown to this day. Now Bootstrap 5.2.0 is the latest one available.

Why Bootstrap?

You might ask why bootstrap?

My answer is simple: It's quick and easy!

Bootstrap is built on the concept of mobile-first web development. So, there is no need to worry about the baseline of the whole HTML document, which is already created for us. There is no need to worry about all the basic functionality as they are covered as different components, which we can find in their documentation.

Ok, enough explanation about Bootstrap. Let's get into the tutorial!

First steps, first

We need an HTML document to get started. I know you might know , but who knows who might need to know? LOL!

I am going to use VS Code emmets to automate my HTML boilerplate. To do this, you can create a new HTML document like index.html and type ! (Exclamation mark) and hit TAB key on the keyboard. Voila, now you can see an HTML code in your document.

The code looks something like this:

<!DOCTYPE html>
<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>Document</title>
  </head>
  <body>

  </body>
</html>

Now we can change the title from <title>Document</title> to something like this <title>My Cool Login Page</title>. Open the document in browser or your can install a plugin in VS Code called Live Server

What does this extension do?, Well it helps us to view the changes to the documents live. This makes my life easy without trying to refresh many times I change something in my HTML website. After installing you can right click on the document editor and select Open with Live Server, now you can view your webpage in the browser.

Wait! Something is wrong! You see a white page? Well that's because we didn't add anything to the body. Well let's do that now. Let's add a Heading to the webpage with the h1 tag. We can do that like <h1>My Cool Webpage</h1>, this adds a heading to the webpage and the document should look something like this:

<!DOCTYPE html>
<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>My Cool Login Page</title>
  </head>
  <body>
    <h1>My Cool Webpage</h1>
  </body>
</html>

Now save the document, open the browser again, and see the changes made instantly. The heading will look something like this in the browser:

Adding Bootstrap CDN to the document

Alright, we have done creating our HTML document. We need to link this to Bootstrap via a CDN Link which gets all the bootstrap CSS hosted by them into our document. To do this, we need to go to Bootstrap Docs.

Well, I will make it simple by adding the CDN Link here:

<link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
      crossorigin="anonymous"
    />

Now you can add this link tag into your document below the title tag we modified earlier, and that should look something like this:

<!DOCTYPE html>
<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>My Cool Login Page</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <h1>My Cool Webpage</h1>
  </body>
</html>

Note: This CDN is for Bootstrap 5.2 , and if you are viewing this sometime later when there is a new release in bootstrap, you might not get the latest features of the future versions. You know software is constantly evolving and updating. So keep yourself updated!

Now save the document and go to the browser. Saw something different? Well, the font is changed, right? So bootstrap has some defaults to make our lives easy by not worrying much about all the basic things. If the font changes, we can say that bootstrap is working.

Well, Now What?

It's time to start out login page UI using bootstrap now. As all the basic setup for our HTML document is done, we can now start doing some magic with bootstrap.

We can remove the h1 heading tag we added before; that was just to test whether bootstrap is working or not. Now, we can start our login page with the empty <body> body.

We need to change the background color of our document. Bootstrap has a few colors already written for us. We can just add those here.

I will be adding class="bg-primary" to the body to make the whole document a blue color. Now to make the blue lighter we can add a new class bg-opacity-25, it should be something like this:

<body class="bg-primary bg-opacity-25">

</body>

We can add a <section> inside the body tag. Just to make it unique (this is optional). Add a <div> inside section. the <div> should contain these classes d-flex flex-column min-vh-100 justify-content-center.

d-flex - Helps to create a flexbox container and transform direct children items into flex items. So we can make our components to arrange easily anywhere!
flex-column - To set a element in vertical direction
min-vh-100 - To set the min height to 100vh(viewport height)
justify-content-center - To align all the elements in center horizontally

The <div> should look like this:

<div class="d-flex flex-column min-vh-100 justify-content-center">

</div>

The Grid System

Let's add a container inside the div like <div class="container"></div>. A container is a component of the grid layout system made by bootstrap. Inside this div, we now add a row (nothing but a wrapper for all the columns we create next). Inside of a row we add col (columns to help us arrange the elements inside in a grid system).

Here we are going to use some cool numbers with columns. These numbers are to make sure that the width of the column stays the size we have assigned and change to auto when there nothing given. You can learn more about the grid system in Bootstrap documentation.

Our first col, <div class="col-sm-12 col-md-10 mx-auto bg-white rounded shadow">. This col-sm-12 is going to be taking all 12 spaces(which is full width of the device according to grid system) when the screen size is small i.e., our smartphones. The col-md-10 is going to take 10 columns space and leave the rest 2 alone in the medium screen devices like iPads, tablets, etc. mx-auto makes sure the elements inside this col maintains the margin-inline to be auto on both sides which makes the items to be centered. bg-white makes the background color white and rounded-shadow creates a shadow to our col. Now the code should look something like this:

<body class="bg-primary bg-opacity-25">
    <section>
      <div class="d-flex flex-column min-vh-100 justify-content-center">
        <div class="container">
          <div class="row">
            <div class="col-sm-12 col-md-10 mx-auto bg-white rounded shadow">

              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
</body>

Now we made the basic layout of our login section. We just need to add the components. First we create a new row and divide previous col into two halves so we can add the login text inputs and button, etc in the first half and the login image in the second half. To do that we create two col inside this row with md-6 so our layout looks like this until medium screens and should take all the space automatically at small screens because it won't look good in small screens with this layout. Alright let's create two <div> inside the row with class="col-md-6". The code should look like this:

<div class="row">
      <div class="col-md-6">

      </div>
      <div class="col-md-6">

      </div>
</div>

We add our login elements to the first col. We add a heading to this page with this <div class="m-5 text-center"><h1>Welcome!</h1></div>. Here we are just adding a div and inside of it we add a h1 where we write Welcome!. m-5 gives a margin of x5 on all directions. text-center makes the text to stay in the center of the div

The Form

We create a form to add all the inputs inside it. We add a margin of x5 m-5 to the form to have some border space. Now we add a div with class mb-3 which gives margin bottom x3 space. This div will have our label and input for the username. We have form-label class and for="username" for a label. We have form-control class and id="username" for a input.

<label class="form-label" for="username">Username</label>
<input class="form-control" type="text" id="username" />

Now we create our first input elements. We can do the same for the password and change the type to password and for and id to password, after changes we have the code something like this:

<label class="form-label" for="password">Password</label>
<input class="form-control" type="password" id="password"/>

Now we add a new row with a mb-3 class for the Remember Me checkbox and Forgot Password link. We divide this row into two col as half. In the first col we add a checkbox input and in the second col we add forgot password link. We have form-check-input for checkbox input and form-check-label for checkbox label. In the second col we can simple add a a tag for Forgot Password.

The code for this looks something like this:

<div class="row mb-3">
    <div class="col-6">
      <div class="form-check text-start">
        <input
          class="form-check-input"
          type="checkbox"
          id="remember-me"
        />
        <label class="form-check-label" for="remember-me"
          >Remember Me</label
        >
      </div>
    </div>
    <div class="col-6">
      <div class="text-end">
        <a href="#">Forgot Password?</a>
      </div>
    </div>
</div>

After all those added the form code should look something like this:

<form class="m-5">
  <div class="mb-3">
    <label class="form-label" for="username">Username</label>
    <input class="form-control" type="text" id="username" />
  </div>
  <div class="mb-3">
    <label class="form-label" for="password">Password</label>
    <input
      class="form-control"
      type="password"
      id="password"
    />
  </div>
  <div class="row mb-3">
    <div class="col-6">
      <div class="form-check text-start">
        <input
          class="form-check-input"
          type="checkbox"
          id="remember-me"
        />
        <label class="form-check-label" for="remember-me"
          >Remember Me</label
        >
      </div>
    </div>
    <div class="col-6">
      <div class="text-end">
        <a href="#">Forgot Password?</a>
      </div>
    </div>
  </div>

  <div class="">
    <input
      type="submit"
      class="form-control btn btn-primary mt-3"
    />
  </div>
</form>

The Second Half

Well there is not much here. We are going to add a image in this part. I have downloaded an image in the SVG format from unDraw. There are a lot of beautiful vectors available for free.

Ok, now in the other col-md-6 we add a new div inside of which we add our image with these classes class="img-fluid p-5". The code should be something like this:

<div class="col-md-6">
  <div>
    <img src="./login.svg" alt="login" class="img-fluid p-5" />
  </div>
</div>

Well, now... Just Kidding, We're done!

That's how we can create a cool-looking login page using only Bootstrap without custom CSS. The complete code for this is:

<!DOCTYPE html>
<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>Document</title>

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  </head>
  <body class="bg-primary bg-opacity-25">
    <section>
      <div
        class="d-flex flex-column min-vh-100 justify-content-center"
      >
        <div class="container">
          <div class="row" >
<div class="col-sm-12 col-md-10 mx-auto bg-white rounded shadow">
              <div class="row">
                <div class="col-md-6">
                  <div class="m-5 text-center"><h1>Welcome!</h1></div>

                  <form class="m-5">
                    <div class="mb-3">
                      <label class="form-label" for="username">Username</label>
                      <input class="form-control" type="text" id="username" />
                    </div>
                    <div class="mb-3">
                      <label class="form-label" for="password">Password</label>
                      <input
                        class="form-control"
                        type="password"
                        id="password"
                      />
                    </div>
                    <div class="row mb-3">
                      <div class="col-6">
                        <div class="form-check text-start">
                          <input
                            class="form-check-input"
                            type="checkbox"
                            id="remember-me"
                          />
                          <label class="form-check-label" for="remember-me"
                            >Remember Me</label
                          >
                        </div>
                      </div>
                      <div class="col-6">
                        <div class="text-end">
                          <a href="#">Forgot Password?</a>
                        </div>
                      </div>
                    </div>

                    <div class="">
                      <input
                        type="submit"
                        class="form-control btn btn-primary mt-3"
                      />
                    </div>
                  </form>
                </div>
                <div class="col-md-6">
                  <div>
                    <img
                      src="./login.svg"
                      alt="login"
                      class="img-fluid p-5"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

If you want a demonstration of the same code, I have made a youtube video which you can watch it here How to create a Cool Login Page using only Bootstrap.

https://www.youtube.com/watch?v=j4LMaSw4bdA

Thanks for coming to the end!

This is my first blog. Hope you like it! Please let me know if any suggestions or any ideas or questions in the comments below. I will sure look into those!

Once again, thanks for reading!