Death or evolution. What is the future of programming?

Or another article about ChatGPT. This AI chatbot writes code in many programming languages, optimizes code, converts code from one programming language to another, writes scripts from scratch, etc. Although ChatGPT is unlikely to ever fully replace a software engineer or developer, this the tool can help solve many of the problems that programmers perform, as well as be the beginning of new possibilities in the field of programming.

If there’s one thing ChatGPT is good at, it’s coding. ChatGPT has “read” more documentation than anyone will read in a lifetime. That’s why it can easily write scripts in a short amount of time and also provide step by step instructions on what it does. The user only needs to give the correct command to this chatbot.

ChatGPT is a cool coder, but not a software engineer or developer. This AI will not be able to design software from an engineering perspective with business needs in mind or fix bugs other than those on its training inputs. This tool cannot replace those whose work goes beyond writing code. But this one can open up a wide variety of other possibilities for those who work with the code.

At least for now!

There are many tools that help programmers be more efficient. For example:

StackOverflow helps you find answers to many programming questions.

Scripts help automate routine processes.

Templates help you avoid re-writing code.

❯ Real encoder

ChatGPT goes much further than this. He’s not perfect. It does not always give the desired result. But when he clearly “understands” what they want from him, he is a real “machine”.

Let’s say you’re building a sales website. You can simply ask ChatGPT to write the HTML and CSS code for you, specifying which sections to include. You can even specify whether it will be an e-commerce or portfolio website to further customize the output.

Here is an example:

Below is the code generated by ChatGPT:

<!DOCTYPE html>
<html>
<head>
  <title>My Online Store</title>
  <link rel="stylesheet" type="text/css" href="https://habr.com/ru/post/709310/styles.css">
</head>
<body>
  <header>
    <h1>My Online Store</h1>
  </header>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <main>
    <h2>Featured Products</h2>
    <div class="product-grid">
      <div class="product">
        <img src="https://habr.com/ru/post/709310/product1.jpg" alt="Product 1">
        <h3>Product 1</h3>
        <p>$19.99</p>
        <button>Add to Cart</button>
      </div>
      <div class="product">
        <img src="https://habr.com/ru/post/709310/product2.jpg" alt="Product 2">
        <h3>Product 2</h3>
        <p>$29.99</p>
        <button>Add to Cart</button>
      </div>
      <div class="product">
        <img src="https://habr.com/ru/post/709310/product3.jpg" alt="Product 3">
        <h3>Product 3</h3>
        <p>$39.99</p>
        <button>Add to Cart</button>
      </div>
    </div>
  </main>
  <footer>
    <p>Copyright 2021 My Online Store</p>
  </footer>
</body>
</html>

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  justify-content: space-between;
  align-items: center;
}

nav li {
  display: inline-block;
}

nav a {
  color: #333;
  text-decoration: none;
  font-size: 18px;
  padding: 10px;
}

.product-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.product {
  width: 30%;
  margin-bottom: 30px;
  text-align: center;
}

.product img {
  width: 100%;
}

This is what the finished site looks like with this code.