[Online Micro-Course] Zero-Foundation Free Website Building Hands-On: From GitHub to Vercel, Build Your First Website in 1.5 Hours

In this 1.5-hour online micro-course, PM Mayors will guide you from scratch to complete your first hands-on website building project using free tools. The course will cover everything from creating a GitHub account and setting up a project to deploying it on Vercel, quickly walking you through both front-end and back-end concepts. The entire session features live prompt writing—there will be no recordings and no replays, but a practice website will be provided. Join the PM Mayors Resident Service Center to also enjoy one week of post-course support.

Course Outline

1. What Exactly Are We Learning in a Zero-Foundation Website Building Course?

We will first explain the basic structure of a website in plain language, letting you know what the front-end, back-end, GitHub, and Vercel are. You don't need to know how to code beforehand, but you do need to know what the entire process looks like.

2. Setting Up GitHub: Your Website Project Repository

We will guide you through the basic purpose of GitHub and demonstrate how to create an account and set up a project. This section will let you know:

• What GitHub is
• What a Repository is
• Why website files need to be stored on GitHub
• How AI-generated code can be organized into your project

3. Using Prompts to Generate Your First Website

PM Mayors will write prompts live on the spot, demonstrating how to ask AI to help generate a simple website. This section will demonstrate:

• How to describe the website you want to build
• How to ask AI to generate homepage content
• How to adjust the website layout
• How to modify text, blocks, and buttons
• How to let AI help you improve the website structure

This course does not rely on pre-recorded videos; it will directly demonstrate how to write prompts live, letting you see exactly what happens during actual hands-on operation.

4. A Quick Walkthrough of the Front-End: The Visible Website Interface

The front-end is the interface users see when they open a website. This section will take you through a quick understanding of:

• How a homepage is structured
• How headings, images, buttons, and blocks are generally arranged
• What HTML / CSS / JavaScript roughly do
• How to use AI to help you modify the front-end interface

You will not be required to memorize syntax; instead, the goal is for you to understand the basic logic behind the website interface.

5. A Quick Walkthrough of the Back-End: Data and Functional Concepts Behind the Website

The back-end is where data, logic, and services are processed behind the scenes. This section will explain in a way that absolute beginners can understand:

• What the back-end is
• What forms, data, logins, and APIs are roughly about
• Under what circumstances a website actually needs a back-end
• Why understanding concepts is more important than memorizing code when starting with zero foundation

This course will walk you through both the front-end and the back-end to establish a complete conceptual understanding of websites.

6. Deploying to Vercel: Getting Your Website Truly Online

Next, we will demonstrate how to connect your GitHub project to Vercel to complete your website deployment. You will see:

• What Vercel is
• How to connect a GitHub project
• How to deploy a website
• How to get a website link
• How to confirm whether the website is successfully online

After completion, you will know the basic process of turning a website from local files or project data into a live, accessible website.

7. Practice Website and Future Modification Directions

The course does not provide replays, but a practice website will be provided so you can continue operating and modifying it after class. You can use the practice website to create a:

• Personal profile page
• Event registration page
• Brand introduction page
• Portfolio page
• Course introduction page
• Product showcase page
• Consulting service page

Once you master the process, you can apply this exact same method to your own website needs.

8. Q&A: Live Handling of Live Questions

Finally, a Q&A session will be open to provide practical advice and solutions for any problems everyone encounters during the GitHub, Vercel, Prompting, front-end, back-end, and deployment processes. """