The aim of this tutorial is to learn GitHub Pages and enhance your skills in HTML, CSS and JavaScript by building a website in a fun, engaging way. We'll use ChatGPT to guide and enhance the learning process.

Let's start by designing a simple landing page for an AI company using GitHub Pages. This can later be expanded into a full website

Chek out the resulting website here

You can find the full Github example here

Prerequisites

A GitHub Account
Git command knowledge
Basic understanding of HTML and CSS.
[OPTIONAL] An IDE such as VScode, pycharm ...

As you know, I myself have a basic grasp of HTML, CSS, and JavaScript since it's not my regular focus, but ChatGPT has got your back

What is GitHub Pages ?

GitHub Pages is a GitHub service for hosting static websites directly from repositories.

It's free, user-friendly, supports custom domains, and integrates with Jekyll. Additionally, it leverages Git's version control.

However, it's limited to static content, has a 1GB repository size cap, and lacks advanced backend features like databases.
So if you’re expecting a lot of traffic or want complex features, paying for a great hosting service would be the way to go.

Prohibited uses :
GitHub Pages is not intended for or allowed to be used as a free web-hosting service to run your online business, e-commerce site, or any other website that is primarily directed at either facilitating commercial transactions or providing commercial software as a service (SaaS). GitHub Pages sites shouldn't be used for sensitive transactions like sending passwords or credit card numbers. See GitHub's documentation on prohibited uses for more details.

Setup the github project

I suppose that you are already familiar with the basics of github and git commands, if it's not the case, there are plenty of free resources on the net, please check them before diving into this tutorial.

Once you are logged in to your Github account, go to your repositories and create a new one

Note that in order to publish a GitHub Pages site, your repository must be public. Private repositories are not supported for hosting GitHub Pages websites for free

After the repository has been created, you can copy its link.

Now you can clone the project locally using either a terminal window or the built-in terminal in the IDE of your choice

[code language="bash"]git clone link-to-your-github-project.git
cd your-github-project[/code]

ChatGPT to the rescue

Now we'll have ChatGPT do most of the work for us, the idea is to get him generate the components of our website, that is to say:

index.html:

file that contains the structure and content of web pages using HTML markup. They define the semantic elements like headings, paragraphs, links, etc
style.css:

file to add styling to web pages using CSS code. They control visual elements like colors, layout, fonts, etc.
script.js:

file to add interactivity and dynamic behavior to web pages using JavaScript code. They enable functionality like click events, animations, data manipulation, etc.

Iterating with ChatGPT

To properly follow along with this tutorial, you can access the full chat history here

Here is the prompt I used to ask ChatGPT:

Prompt:

You are the best Web Developer from Apple, create a beautiful website for me on GitHub Pages.

This website is for my company, I'm making Ai products. I want it to be dynamic with fancy javascript things.
also here is the logo of my company:

https://raw.githubusercontent.com/AnisZakari/tutorial_create_website_with_ChatGPT/main/ai_company_logo.png
I want you to provide full code for the following files:

- style.css

- script.js

- index.html

index has to reference style.css and script.js

Remember it has to be very attractive ! Do not provide only raw html please.

You can resize the logo if you want.

Note that I added an image of the logo to my repository beforehand, so I was able to reference its link in the code ChatGPT generated, even though this may not be the best way to do it.

Oh and by the way, I generated the logo image using DALLE 2

ChatGPT's answer:

index.html

[code language="html"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your AI Company</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>

<section id="landing">
<img id="company-logo" src="https://raw.githubusercontent.com/AnisZakari/tutorial_create_website_with_ChatGPT/main/ai_company_logo.png" alt="Company Logo">
<h1>Your AI Company</h1>
<p>Innovating the Future</p>
<button>Learn More</button>
</section>

<section id="about">
<h2>About Us</h2>
<p>We are a leading company in AI product development, dedicated to revolutionizing the tech industry.</p>
</section>

<section id="products">
<h2>Our AI Products</h2>
<div class="product-card" id="product1">Product 1</div>
<div class="product-card" id="product2">Product 2</div>
<div class="product-card" id="product3">Product 3</div>
</section>

<footer>
<p>Contact us at: contact@yourcompany.com</p>
<div id="social-links">
<a href="#">Facebook</a>
<a href="#">Twitter</a>
<a href="#">LinkedIn</a>
</div>
</footer>
</body>
</html>
[/code]

style.css

[code language="css"]body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}

#landing {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #333;
color: #fff;
}

#company-logo {
width: 150px;
height: 150px;
}

#about {
padding: 40px;
text-align: center;
background-color: #eee;
}

#products {
padding: 40px;
display: flex;
justify-content: space-around;
background-color: #fff;
}

.product-card {
width: 200px;
height: 200px;
background-color: #333;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s;
}

.product-card:hover {
transform: scale(1.1);
}

footer {
padding: 20px;
text-align: center;
background-color: #333;
color: #fff;
}

#social-links a {
margin: 0 10px;
text-decoration: none;
color: #fff;
}[/code]

script.js

[code language="javascript"]document.addEventListener("DOMContentLoaded", () => {
const productCards = document.querySelectorAll(".product-card");

productCards.forEach(card => {
card.addEventListener("mouseenter", () => {
card.style.backgroundColor = "#555";
});
card.addEventListener("mouseleave", () => {
card.style.backgroundColor = "#333";
});
});
});[/code]

Using VS Code, I created the index.html, style.css, and script.js files locally in the same directory. I then opened the index.html file in my web browser to view the website. Below is a screenshot of the resulting page displayed:

The result is not that bad ! But there are few issues we can improve:

I don't like the fonts.
The large gray header takes up too much space.
"Learn More" button is very ugly !
It would be better to have real product images rather than placeholders.

Let's tackle these improvements:

Prompt:

Could you change the fonts ? I don't like them, maybe we could have instead roboto or montserrat ?

ChatGPT:

Of course! Both Roboto and Montserrat are excellent choices for web design due to their readability and modern look. I'll incorporate Montserrat as the primary font, but you can easily switch to Roboto or any other font if you prefer.

To use Montserrat from Google Fonts, you'll need to add a link to the font in the index.html in the <head> section:

index.html

[code language="html"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your AI Company</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
...
</body>
</html>
[/code]

style.css

[code language="css"]body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
#landing {
...
}
#company-logo {
...
}
#about {
...
}
#products {
...
}
.product-card {
...
}
footer {
...
}
#social-links a {
...
}[/code]

Ok nice, I impemented the changes, now let's address the other issues

Prompt:

Ok nice ! now the header (the gray part) is way too big ! please make it shorter, also the "learn more" button is very ugly and not modern, please rework this

ChatGPT:

Absolutely, let's refine the design further:

Landing Section: I'll reduce the height of the landing section to make it shorter.
Learn More Button: I'll redesign the "Learn More" button to give it a modern, attractive look.

style.css

[code language="css"]body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}

#landing {
height: 60vh; /* Reduced height */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #333;
color: #fff;
}

#company-logo {
width: 150px;
height: 150px;
}

#about {
padding: 40px;
text-align: center;
background-color: #eee;
}

#products {
padding: 40px;
display: flex;
justify-content: space-around;
background-color: #fff;
}

.product-card {
width: 200px;
height: 200px;
background-color: #333;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s;
}

.product-card:hover {
transform: scale(1.1);
}

/* Updated button styling */
button {
background-color: #ff4500; /* Orangish color */
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 30px; /* Rounded edges */
font-weight: 500;
letter-spacing: 1px;
transition: background-color 0.3s;
}

button:hover {
background-color: #ff6347; /* Slightly different shade for hover effect */
cursor: pointer;
}

footer {
padding: 20px;
text-align: center;
background-color: #333;
color: #fff;
}

#social-links a {
margin: 0 10px;
text-decoration: none;
color: #fff;
}[/code]

Meanwhile I generated some extra images with DALLE 2 for the products, I added them into the repository and fetched the links.

Prompt:

ok here are the images corresponding to product 1, product 2 and product 3

product 1
https://raw.githubusercontent.com/AnisZakari/tutorial_create_website_with_ChatGPT/main/product_1.png

product 2
https://raw.githubusercontent.com/AnisZakari/tutorial_create_website_with_ChatGPT/main/product_2.png

product 3
https://raw.githubusercontent.com/AnisZakari/tutorial_create_website_with_ChatGPT/main/product_3.png

could you integrate them ?

ChatGPT:

Certainly! Let's integrate the product images into the design.

First, I'll update the index.html
to include the images within the product cards:

index.html

[code language="html"]...

Our AI Products

Product 1

Product 2

Product 3

...[/code]

Next, I'll update the style.css to style the images and the text within the product cards:

style.css

[code language="css"]/* ... */
.product-card {
width: 200px;
height: 250px; /* Adjusted height to accommodate image and text */
background-color: #f5f5f5;
color: #333;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 10px;
border: 1px solid #ddd;
border-radius: 10px; /* Rounded edges */
transition: transform 0.3s, box-shadow 0.3s;
}
.product-card:hover {
transform: scale(1.05);
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1); /* Shadow effect on hover */
}
.product-card img {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 5px; /* Rounded edges */
}
.product-card p {
margin-top: 10px;
font-weight: 500;
}
/* ... */[/code]

At this point the website looks like that

The updates look much better! But let's refine a few more things:

The product images aren't centered properly, likely due to the "Our AI Products" box on the left.
Instead of a big gray header, a background video could make it more dynamic. There are plenty of websites that let you download high quality videos for free like pexels.com
When hovering over the products, the background turns dark gray and doesn't revert back. This seems to be an issue with the JavaScript file.

Prompt:

few remarks:

- I prefer "Our AI Products" to be above the product cards not on the left

- I would like to add a background video behind the logo in the header of my website.

The video file is located at this URL:

https://github.com/AnisZakari/tutorial_create_website_with_ChatGPT/raw/main/back_video.mp4

- I think that the issue with the product card staying dark gray after the hover state comes from the script.js file, could you check it ?

ChatGPT:

- Certainly! I'll adjust the layout to place the "Our AI Products" title above the product cards.

- Great choice! Background videos can add a dynamic touch to the landing page and immediately engage visitors.

Let's integrate the video into your landing section.

- Ah, I see the issue. The script.js file is indeed setting the background color of the product cards to #555 on mouse enter and #333 on mouse leave. This overrides the CSS styles, which is why the background color remains dark gray after the hover effect...

After several iterations of refinements and adjustments guided by discussions with ChatGPT, we have arrived at the following design:

index.html

[code language="html"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your AI Company</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>

<section id="landing">
<video autoplay muted loop id="bgVideo">
<source src="https://github.com/AnisZakari/tutorial_create_website_with_ChatGPT/raw/main/back_video.mp4"
type="video/mp4">
Your browser does not support HTML5 video.
</video>
<div class="landing-content">
<img id="company-logo"
src="https://raw.githubusercontent.com/AnisZakari/tutorial_create_website_with_ChatGPT/main/ai_company_logo.png"
alt="Company Logo">
<h1>Your AI Company</h1>
<p>Innovating the Future</p>
<button>Learn More</button>
</div>
</section>

<section id="about">
<h2>About Us</h2>
<p>We are a leading company in AI product development, dedicated to revolutionizing the tech industry.</p>
</section>

<section id="products">
<h2>Our AI Products</h2>
<div class="products-grid">
<div class="product-card" id="product1">
<img src="https://raw.githubusercontent.com/AnisZakari/tutorial_create_website_with_ChatGPT/main/product_1.png"
alt="Product 1">
<p>Product 1</p>
</div>
<div class="product-card" id="product2">
<img src="https://raw.githubusercontent.com/AnisZakari/tutorial_create_website_with_ChatGPT/main/product_2.png"
alt="Product 2">
<p>Product 2</p>
</div>
<div class="product-card" id="product3">
<img src="https://raw.githubusercontent.com/AnisZakari/tutorial_create_website_with_ChatGPT/main/product_3.png"
alt="Product 3">
<p>Product 3</p>
</div>
</div>
</section>

<footer>
<p>Contact us at: contact@yourcompany.com</p>
<div id="social-links">
<a href="#"><img
src="https://raw.githubusercontent.com/AnisZakari/tutorial_create_website_with_ChatGPT/main/icons/facebook_logo.png"
alt="Facebook"></a>
<a href="#"><img
src="https://raw.githubusercontent.com/AnisZakari/tutorial_create_website_with_ChatGPT/792c7f7f0d792fcef3399a4572d0da00e9648af1/icons/twitter_logo.svg"
alt="Twitter"></a>
<a href="#"><img
src="https://raw.githubusercontent.com/AnisZakari/tutorial_create_website_with_ChatGPT/792c7f7f0d792fcef3399a4572d0da00e9648af1/icons/linkedin_logo.svg"
alt="LinkedIn"></a>
</div>
</footer>
</body>
</html>
[/code]

style.css

[code language="css"]body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
#landing {
position: relative;
height: 60vh;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
overflow: hidden;
/* Ensures that the video won't overflow the section */

}
.landing-content {
position: relative;
z-index: 1;
text-align: center;
}
#bgVideo {
position: fixed;
/* Fixes the video in place */
z-index: -1;
/* Keeps the video behind the content */
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translateX(-50%) translateY(-50%);
}
#company-logo {
width: 250px;
height: 250px;
}
#about {
padding: 40px;
text-align: center;
background-color: #eee;
}
#products {
padding: 40px;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
}
.product-card {
width: 150px;
height: 220px;
background-color: transparent;
color: #333;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 10px;
border: 1px solid #ddd;
border-radius: 10px;
transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s ease;
}
.product-card:hover {
transform: scale(1.1);
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
background-color: #f5f5f5;
}
.product-card:active,
.product-card:focus {
background-color: transparent;
}
.product-card img {
width: 100%;
height: 120px;
object-fit: cover;
border-radius: 5px;
}
.product-card p {
margin-top: 10px;
font-weight: 500;
}
.products-grid {
display: flex;
justify-content: space-around;
width: 100%;
max-width: 600px;
}
/* Updated button styling */
button {
background-color: #ff4500;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 30px;
font-weight: 500;
letter-spacing: 1px;
transition: background-color 0.3s;
}
button:hover {
background-color: #ff6347;
cursor: pointer;
}
footer {
padding: 20px;
text-align: center;
background-color: #333;
color: #fff;
}
#social-links {
display: flex;
justify-content: center;
align-items: center;
padding: 10px 0;
}
#social-links a {
margin: 0 10px;
text-decoration: none;
}
#social-links img {
width: 45px;
/* Adjust size as needed */
height: 45px;
/* Adjust size as needed */
transition: transform 0.3s;
}
#social-links img:hover {
transform: scale(1.2);
/* Slightly enlarges the icon on hover */
}
#social-links a:nth-child(1) img {
/* Targets the first image in #social-links */
width: 30px;
/* Reduced size */
height: 30px;
/* Reduced size */
}[/code]

script.js

[code language="javascript"]document.addEventListener("DOMContentLoaded", () => {
const productCards = document.querySelectorAll(".product-card");

productCards.forEach(card => {
card.addEventListener("mouseenter", () => {
// You can add other dynamic behavior here if needed
});
card.addEventListener("mouseleave", () => {
// You can add other dynamic behavior here if needed
});
});
});[/code]

It finally looks like that

Now you can push your code changes to GitHub:

[code language="bash"]git status # view changed files
git add . # add all changed files to staging
git commit -m "my commit message" # commit changes with a message
git push # push commits to GitHub[/code]

Setting Up GitHub Pages

Now that we have built the webpage locally, the next step is to configure GitHub settings to host it live on GitHub Pages.
Follow the instructions bellow:

You may notice a small orange dot next to your latest commit after pushing to GitHub. This indicates that GitHub Pages is building your site (there's a GitHub pipeline running behind the scenes). Your website will be published shortly once the build is complete

There we go !

To find the live website URL, go to the repository Settings tab, click on Pages in the left sidebar, and you will see the web address for your published GitHub Pages site.

That's it for today falks ! I hope you enjoyed this tutorial !

Conclusion

This was an opportunity to get familiar with GitHub Pages and rethink teaching methods.

The sole objective is to create a landing page, but that will naturally force you to improve on:

Git/GitHub
How to ask questions to ChatGPT
HTML/CSS/JavaScript

Of course, at some point you may reach the limits of your understanding on one or more of these points. And in some cases, ChatGPT may not be able to guide you. This is where you'll be forced to consult external resources or to focus on your code to understand what's happening. That's where real learning will take place.

Create a website with ChatGPT and Github Pages

What is GitHub Pages ?

Setup the github project

ChatGPT to the rescue

Iterating with ChatGPT

Our AI Products

Setting Up GitHub Pages

Conclusion

You May Also Enjoy

RAG with LLMs: Easy to POC, Hard to Iterate On.

Google’s Python Style Guide for Data Scientists

The Role of Language in Reasoning and Conceptualization

Managing a Mainstream Open Source Library is Tough