First, I inserted my prompt:
Create an html skeleton with bootstrap responsive design and responsive menu and responsive hamburger menu that works on mobile as well. And import all the necessary scripts before the closing body tag, such as jquery, popper and bootstrap.
It looks like we got a correct response from ChatGPT but to be sure let't just check it in replit to be sure and continue work with it there.
We can see that it's working but the mobile menu isn't. And it seems that ChatGPT chopped the skeleton a bit and we don't have a closing tag for one script and if we are checking https://getbootstrap.com/docs/4.1/getting-started/introduction/ we can see that bootstrap script is missing. So let's just fix it. Oh, and I will also change the imports to the latest ones based on bootstrap introduction.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Website</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">My Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Page content -->
<div class="container mt-5">
<h1>Welcome to My Website!</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare
magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa
sem. Etiam finibus odio quis feugiat facilisis.
</p>
</div>
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
Hurray, it's working! Let's work on the content. I would like to have a portfolio site.
First of all, what should be the title? I asked ChatGPT, as its doing the job 🙂 What should be my portfolio website title?
Ok I will go with Jane Doe - Beginner AI user
Write an introduction for my portfolio website. I am a beginner AI user and a programmer.
Show me an image element with a mountain for the bootstrap page.
I will use a mountain image from lorempicsum
This will be a single page for the sake of simplicity. Let's add id for the home part and lets add href to the anchor tags corresponding to the sections.
Create a text about me for an about page on a website. I like rock climbing and all outdoor sports and I like to program. I started my career as a Quality engineer in the automotive industry but I was always curious about programming. I started with automation and microcontroller programming. I moved to Poland 7 years ago. I started web development by myself 4 years ago with HTML and JavaScript. I am working now as a Full Stack Developer.
Let's paste this in our about section
We need to make this section as high as the device. Therefore I asked ChatGPT to show me the correct way to do it. How to make an element high as the device in bootstrap?
I will follow the instructions and paste the styling in the Head tag and adding the class to the div element that contains the section.
Create a contact form with Bootstrap with the following input fields. Name, email, message.
So let's copy this and create the section for the Contact form And finally, let's create some nice background for the website What is a nice css gradient for an html website background that is not too bright?
I used the paster option and pasted in the style tag in the head tag.
Ok, see the results: https://replit.com/@Flafi87/LegitimatePrevailingScript#index.html https://legitimateprevailingscript.flafi87.repl.co
