Build & Deploy a Website | Resources by Shumbul Arifa
Back to Resources

🌐 Build & Deploy a Website

The most satisfying first project in tech: a website that is actually live on the internet, with a link you can text to anyone. You can go from blank file to shareable URL in a single afternoon, for free.

🚀 Live in one sitting 🆓 Free hosting 🌱 No experience needed

The plan in one line

Write an HTML page → make it look good with CSS → put it on GitHub → turn on free hosting. That is the entire journey. Let us do it.

In a couple of hours, that URL is really yours.

HTMLCSSGit & GitHubGitHub Pages

Step 1: Your first page

Create a folder, and inside it a file called index.html. Paste this and open the file in your browser, you have a webpage.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Portfolio</title>
</head>
<body>
  <h1>Hi, I'm [Your Name]</h1>
  <p>I'm learning to build things for the web.</p>
</body>
</html>

index.html is special, it is the default page a site loads. HTML is just structure: headings, paragraphs, links, images.

Step 2: Make it look good (CSS)

Add a <style> block inside <head>. CSS controls colors, spacing, and layout.

<style>
  body {
    font-family: system-ui, sans-serif;
    max-width: 680px;
    margin: 3rem auto;
    padding: 0 1rem;
    line-height: 1.6;
    color: #1f2937;
  }
  h1 { color: #7c3aed; }
  a { color: #7c3aed; }
</style>

Refresh the browser and watch it transform. Change the colors, add your links (GitHub, LinkedIn), a short bio, maybe a project or two. Make it yours.

Step 3: Put it on GitHub

To host it free, your code needs to live on GitHub. Create a free account, then in your project folder:

git init
git add .
git commit -m "My first website"

Create a new repository on GitHub named your-username.github.io (this exact name unlocks free hosting), then connect and push:

git remote add origin https://github.com/YOUR-USERNAME/YOUR-USERNAME.github.io.git
git branch -M main
git push -u origin main

New to Git? The Git Guide walks through every command calmly.

Step 4: Go live (free hosting)

Because you named the repo your-username.github.io, GitHub Pages may already be serving it. To be sure:

  1. Open your repo on GitHub → Settings → Pages.
  2. Under "Build and deployment", set Source to "Deploy from a branch", branch main, folder / (root).
  3. Save, wait a minute, and visit https://your-username.github.io.

That is a real, live website with a link you can share with anyone, at zero cost. This entire Resources site is hosted exactly this way.

Step 5: Level it up

Now iterate. Each of these is a small, satisfying upgrade:

Every push auto-updates the live site in under a minute. That fast feedback loop is what makes web development addictive.

Which path fits you next?

Want depth?

Follow the Full-Stack Path to learn JavaScript, React, and backends properly.

Want a job portfolio?

Turn this into a proper portfolio with the Resume & Portfolio guide.

Want to add AI?

Drop a small assistant onto your site, see Build an AI Agent.

Copy-paste AI prompts

Stuck or want to move faster? Paste these into any AI chatbot (or this site's ✦ Ask AI). Fill in the brackets.

🎨 Generate a starter page 
Write a single index.html (HTML + inline CSS, no frameworks) for a personal
portfolio for [your name], a [role you want]. Include a hero with my name, a short
bio, a projects section with 3 cards, and links to GitHub and LinkedIn. Clean,
modern, mobile-friendly, accessible. Explain the structure briefly.
📱 Make it responsive 
Here is my HTML/CSS: [paste]. Make it look great on mobile without changing the
desktop look. Use CSS media queries, explain what you changed and why, and keep it
to one file.
🚀 Deploy help 
Walk me through deploying my static site to GitHub Pages step by step, assuming I
have never used Git. Give exact commands for [Windows / Mac], and tell me how to
find my live URL and fix it if the page shows 404.
✨ Add one cool feature 
Add a [dark-mode toggle / typing animation / contact form] to my page using plain
vanilla JavaScript (no libraries). Give me the HTML, CSS, and JS, and explain how it
works so I actually learn it.

What to do next

🌐 Full-Stack Path 🚀 Git Guide 📄 Resume & Portfolio 🌍 Open Source
🌱 Absolute beginner? Perfect

You do not need to know how to code first. You will write a little HTML and CSS here and learn by seeing it work. The goal is momentum: get something live, feel the win, then improve it. Want the deeper, structured version afterwards? Follow the Full-Stack Developer Path. Stuck? Tap ✦ Ask AI.