CSS

    Using ChatGPT for building web pages

    websitebuildersnowBy No Comments8 Mins Read


    We’ve already talked about ChatGPT, an advanced language model designed by OpenAI that uses machine learning to understand natural language and generate human-like responses. With its vast knowledge base and sophisticated language “understanding”, it can serve as a powerful companion for those seeking information. Able to answer a wide range of questions, offer advice, and participate in conversations on a wide variety of topics, she has proven herself in a vast number of areas.

    But can ChatGPT create web pages? Let’s take it to task and find out.

    Note that this was created using ChatGPT 3.5 before the latest version was released.

    Let’s start with some basic HTML. Considering that ChatGPT has already proven itself as a talented coder and programming assistant, this is not much of a test.

    Here is the prompt I used in ChatGPT to successfully create a “Hello, World” HTML page.

    Create a simple “Hello, World!” Web page using HTML

    ChatGPT generated the following basic HTML, which of course worked as intended.

    <!DOCTYPE html>
<html>
  <head>
    <title>Hello, World!</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

    ChatGPT recommends placing this in a file with the extension “.html” and opening it in your browser. Mission complete.

    I don’t mind screenshots. You’ve probably seen unformatted HTML output.

    Rely on ChatGPT to look good.

    Can I use CSS to make this page look nicer?

    ChatGPT spits out:

    This example uses CSS to change the background color of the web page to light blue, center the text on the page, change the heading color to navy, and increase the heading font size to 4em.

    You can play around with CSS to style your web pages.

    I also recommend putting the css in a separate file and linking it to the index.html file.

    It will be as follows.

    Create a web page with ChatGPT

    A simple web page created by ChatGPT using HTML and CSS

    It’s certainly improved, but this is still child’s play. But before we go any further, let’s follow ChatGPT’s advice and separate the HTML and CSS.

    How can I put the CSS in a separate file and link it to the index.html file?

    To create another CSS file and link it to the HTML file, head A section of an HTML file. Here’s an example of how to do this:

    1. Create a new file called “https://www.kdnuggets.com/2023/03/styles.css” in the same directory as the “index.html” file.
    2. Add CSS code to the “https://www.kdnuggets.com/2023/03/styles.css” file.
    3. In the “index.html” file, change the line head section:

      <link rel="stylesheet" type="text/css" href="https://www.kdnuggets.com/2023/03/styles.css">

      of rel Attributes specify relationships between the current document and linked documents. type The attribute specifies the type of linked document, href The attribute specifies the location of the linked document.

    4. Save both files and open “index.html” in your web browser. The styles from ‘https://www.kdnuggets.com/2023/03/styles.css’ are applied to the web page.

    You can also include css files from online links such as “https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”.

    This also applies to web pages, so you don’t need to include them in your local directory.

    Create a Craigslist-style web page that:
    – You can add new ads
    – You can remove existing ads
    – Can list all existing ads
    – Edit existing ads

    Creating a Craigslist-style web page requires a combination of HTML, CSS, JavaScript, and a backend language such as PHP or Node.js to handle the dynamic aspects of the web page. . Here’s an example of what the basic structure of a web page might look like. 

    <!DOCTYPE html>
<html>
  <head>
    <title>Craigslist-style Webpage</title>
    <link rel="stylesheet" type="text/css" href="https://www.kdnuggets.com/2023/03/styles.css">
  </head>
  <body>
    <h1>Craigslist-style Webpage</h1>
    <form id="add-ad-form">
      <label for="title">Title:</label>
      <input type="text" id="title" name="title">
      <br>
      <label for="description">Description:</label>
      <textarea id="description" name="description"></textarea>
      <br>
      <button type="submit">Add Ad</button>
    </form>

    <table id="ads-table">
      <thead>
        <tr>
          <th>Title</th>
          <th>Description</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <!-- This section will be populated with ads using JavaScript -->
      </tbody>
    </table>

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

    The resulting frontend page without background functionality doesn’t look good. So I ask:

    Can I use CSS files to make my website look more professional? I want the color palette to be the national colors of Italy.

    And ChatGPT is required (when hovering over the “Add” button, the button turns red).

    Create a web page with ChatGPT
    A simple HTML form styled by ChatGPT

    But what about JavaScript? Let’s see if ChatGPT can add it.

    Can I add JavaScript to add and display new ads in my listings?

    // Get references to the form and table
const addAdForm = document.querySelector("#add-ad-form");
const adsTable = document.querySelector("#ads-table tbody");

// Handle the form submit event
addAdForm.addEventListener("submit", function(event) {
  event.preventDefault();

  // Get the values from the form inputs
  const title = document.querySelector("#title").value;
  const description = document.querySelector("#description").value;

  // Create a new table row and add the ad data
  const newRow = document.createElement("tr");
  newRow.innerHTML = `
    <td>${title}</td>
    <td>${description}</td>
    <td>
      <button>Edit</button>
      <button>Delete</button>
    </td>
  `;

  // Add the new row to the table
  adsTable.appendChild(newRow);

  // Clear the form inputs
  addAdForm.reset();
});

    And the result:

    Create a web page with ChatGPT
    Semi-functional HTML form with JavaScript created by ChatGPT

    not bad. A few prompts went from nothing to ugly HTML to better HTML to JavaScript. something.

    Let’s try something useful. Below are some prompts for creating a simple (but potentially useful) home page for your blog, with some specific requirements.

    Let’s create a web page. We want you to create the HTML and CSS and everything else necessary to generate a blog homepage that complies with these requirements.
    – page uses 1024px width
    – Title appears in large font at the top of the page
    – Below this should be links to 3 helpful pages on the blog
    – Below this is a clickable banner ad that adheres to industry standard sizes
    – Below this is the Recent Blogs section, which displays the 6 most recent entries in a tiled layout of 3 tiles in 2 rows.
    – Below the latest blog entries, there should be an “About” section that lists information about the website’s founder and a photo of them.
    – Below this you should have a typical footer containing:
    – enter text using lorem ipsum
    – Pages should be attractive and use a modern style
    – Latest blog tiles should have CSS hover effects

    Here’s the HTML and CSS generated by ChatGPT:

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Blog</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 1024px;
      margin: 0 auto;
      padding: 1rem;
    }

    h1 {
      font-size: 2.5rem;
      text-align: center;
      margin-bottom: 1rem;
    }

    nav {
      display: flex;
      justify-content: center;
      margin-bottom: 1rem;
    }

    nav a {
      text-decoration: none;
      color: #333;
      margin: 0 1rem;
    }

    .banner {
      display: block;
      width: 728px;
      height: 90px;
      background-color: #ccc;
      margin: 0 auto 1rem;
      text-align: center;
      line-height: 90px;
    }

    .blogs {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 1rem;
    }

    .blog {
      width: 32%;
      background-color: #f0f0f0;
      padding: 1rem;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
      cursor: pointer;
    }

    .blog:hover {
      transform: translateY(-10px);
    }

    .about {
      display: flex;
      margin-bottom: 1rem;
    }

    .about img {
      width: 150px;
      height: 150px;
      object-fit: cover;
      border-radius: 50%;
      margin-right: 1rem;
    }

    .about p {
      flex: 1;
    }

    footer {
      background-color: #333;
      color: #fff;
      padding: 1rem;
      text-align: center;
      font-size: 0.875rem;
    }
 </style>
</head>

<body>
  <h1>My Awesome Blog</h1>

  <nav>
    <a href="#">Useful Page 1</a>
    <a href="#">Useful Page 2</a>
    <a href="#">Useful Page 3</a>
  </nav>

  <a href="#" class="banner">Ad - 728x90</a>

  <div class="blogs">
    <div class="blog">
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p>
    </div>
    <div class="blog">
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p>
    </div>
    <div class="blog">
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p>
    </div>
    <div class="blog">
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p>
    </div>
    <div class="blog">
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p>
    </div>
    <div class="blog">
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p>
    </div>
  </div>

  <div class="about">
    <img src="founder.jpg" alt="Founder's Photo">
    <div>
      <h2>About the Founder</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis. Integer sit amet tincidunt turpis, a lacinia ligula.</p>
    </div>
  </div>

  <footer>
    © 2023 My Awesome Blog. All Rights Reserved.
  </footer>

</body>
</html>

    And here is the final product:

    Create a web page with ChatGPT
    A simple blog homepage made with ChatGPT

    It looks pretty good. That said, I’m sure the prompt could look better with some extra CSS guidance, but overall, it’s not a bad start. It also has an effect (slightly raises on hover).

    One note is that I asked for “the 6 most recent entries in a tile layout with 2 rows and 3 tiles”, but ChatGPT produced this tile in 2. column Instead.

    ChatGPT certainly seems to demonstrate some features that allow it to generate web pages with very simple and friendly prompts. I wonder how it would perform when asked to generate something dynamic, how would it instruct a human to weave the various components together. .

    Matthew Mayo (@mattmayo13) is a data scientist and editor-in-chief of KDnuggets, the leading online data science and machine learning resource. His interests are in natural language processing, algorithm design and optimization, unsupervised learning, neural networks, and automated approaches to machine learning. Matthew has a master’s degree in computer science and his data mining diploma.He can be contacted at his kdnuggets editor1[dot]com.





    Source link

    Share.

    Related Posts

    Add A Comment

    Leave a Reply