Quand ChatGPT essaye de coder partie 1 : HTML et CSS

Quand ChatGPT essaye de coder partie 1 : HTML et CSS

Publié par Fabrice le 28 mars 2023 - Temps de lecture estimé : 10 minutes
Catégories : Webmastering - Étiquettes :

C'est un peu le buzz du moment : les IA génératives et en particulier ChatGPT de la société OpenAI. C'est donc l'occasion de réaliser quelques tests, avec un premier article (sur une série de 3) dédié aux langages HTML et CSS.

En préambule, le terme Intelligence Artificielle est un peu inapproprié, dans le sens où elles ne sont pas capables de penser, n'y d'avoir conscience de ce qu'elles font. Elles sont conçues à partir de données d'apprentissage, les réponses sont ensuite retransmises via des algorithmes.
Pour cela, on utilise un "prompt", c'est-à-dire un texte qui explique ce que l'on souhaite obtenir comme résultat.

Le prompt

Create a page template for web agency. Write the HTML and CSS. It will be in responsive web design with a header including a logo and a menu, content page in 2 columns and a typical "about us" footer

Le code HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Agency Page Template</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <div class="logo">
      <img src="logo.png" alt="Web Agency Logo">
    </div>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

  <div class="content">
    <div class="left-column">
      <h2>Our Services</h2>
      <ul>
        <li>Web Design</li>
        <li>Web Development</li>
        <li>SEO</li>
        <li>Social Media Marketing</li>
      </ul>
    </div>
    <div class="right-column">
      <h2>About Us</h2>
      <p>We are a web agency that specializes in creating beautiful, responsive websites that help businesses grow.</p>
    </div>
  </div>

  <footer>
    <div class="about-us">
      <h2>About Us</h2>
      <p>We are a web agency that specializes in creating beautiful, responsive websites that help businesses grow.</p>
    </div>
    <div class="contact-us">
      <h2>Contact Us</h2>
      <ul>
        <li>123 Main St.</li>
        <li>Anytown, USA 12345</li>
        <li>(123) 456-7890</li>
        <li>info@webagency.com</li>
      </ul>
    </div>
  </footer>
</body>
</html>

Dans l'ensemble, le code est plutôt propre : simple, mais ultra-basique. Il y a tout de même quelques erreurs fondamentales comme l'absence des balises main et h1. Cela peut faire une base de travail, un peu comme les templates que l'on peut obtenir sur le web. Mais, il manque de nombreuses informations, qui vont faire le petit plus, comme les données structurées, le favicon, etc.

Le code CSS

/* Global Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

/* Header Styles */
header {
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.logo img {
  height: 50px;
}

nav ul {
  display: flex;
  list-style: none;
}

nav ul li {
  margin-right: 20px;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
}

/* Content Styles */
.content {
  display: flex;
  flex-wrap: wrap;
  padding: 50px;
}

.left-column, .right-column {
  flex-basis: 50%;
  padding: 0 20px;
}

.left-column h2, .right-column h2 {
  margin-bottom: 20px;
}

.left-column ul {
  list-style: disc;
  margin-left: 20px;
}

.right-column p {
  font-size: 1.2em;
}

/* Footer Styles */
footer {
  background-color: #eee;
  display: flex;
  justify-content: space-around;
  padding: 50px;
}

.about-us, .contact-us {
  flex-basis: 30%;
}

Voyons maintenant la feuille de style et passons outre le fait que le code ne semble pas terminé. Le premier point positif, le code est commenté et dispose d'un micro reset CSS ! Je ne sais pas si c'est du fait que le code n'a pas complet, mais ChatGPT n'a pas pris en compte ma demande de "responsive web design" ! Utilisation de flex, mais grid aurait aussi très bien pu convenir et il n'y a évidemment pas de couleurs ! On peut aussi lui reprocher l'utilisation systématique des pixels, au lieu d'unités relatives comme em ou rem.

En conclusion

Les IA génératives sont encore loin de produire du code prêt à l'emploi pour que le novice puisse mettre en ligne son site web lui-même. Cela pourrait éventuellement servir de base de travail ou convenir pour une page web perso. Mais, dès l'instant où le résultat devra être plus complexe et professionnel, il faudra toujours en passer par un développeur web, et ce, sans compter sur des concepts, peut-être encore plus abstraits à appréhender pour ChatGPT comme l'accessibilité ou les web performances.