Launch Your First Website: From VS Code to GitHub to Vercel

Introduction#

Learn what you will build, who the tutorial is for, and how the tools fit together.

This tutorial teaches you how to build and publish a complete beginner-friendly landing page for a fictional brand named BrightPath Studio. You will create the site with HTML, CSS, and vanilla JavaScript, preview it locally, save its history with Git, upload it to GitHub, and deploy it publicly with Vercel.

Use this tutorial if you are new to website development, terminal commands, Git, GitHub, or deployment. You only need basic computer skills: creating folders, downloading files, typing text, and saving files.

Visual Studio Code -> Local Website -> Git -> GitHub -> Vercel -> Public Website

Before You Begin#

Confirm the tools, accounts, and basic skills you need before starting.

Before you write code, make sure you have the required software, accounts, and permission to install applications. Preparing these items first prevents interruptions later.

Install Visual Studio Code#

Download VS Code, install it, identify the interface, and enable helpful beginner settings.

Visual Studio Code, commonly called VS Code, is a free code editor used to create and manage website files. You will use it to create your HTML, CSS, and JavaScript files.

1. Open the official Visual Studio Code download page.

1. Select the correct download for your operating system.
2. Open the downloaded installer.
3. Review the installation options.
4. Complete the installation.

On Windows, useful optional installer settings may include adding Open with Code to file and folder context menus, adding VS Code to PATH, and creating a desktop icon. PATH is a system setting that helps your computer find programs from the terminal. These options are helpful, but do not treat every optional checkbox as mandatory.

On macOS, you may need to drag Visual Studio Code into the Applications folder. This keeps the app in the normal location for installed programs.

1. Launch Visual Studio Code.

Identify the Main VS Code Areas#

Configure Helpful Beginner Settings#

Beginner-friendly settings include Auto Save, Word Wrap, comfortable font size, a file icon theme, a default terminal, and optional Format on Save. Format on Save may require a formatter extension, so treat it as helpful rather than required.

1. Open VS Code.
2. Open the File menu.
3. Select Auto Save.
4. Edit a file and pause for a moment.
5. Confirm the file saves automatically.

1. Open the View menu.
2. Select Word Wrap.
3. Open a long line of text.
4. Confirm the line wraps instead of forcing horizontal scrolling in the editor.

Install Git#

Install Git, understand how it differs from GitHub, and verify the installation.

Git is a version-control system that records changes to files. It allows you to create labeled checkpoints, compare versions, return to earlier work, and send a project to GitHub.

Git and GitHub are different. Git runs on your computer. GitHub is an online service that stores Git repositories.

1. Open the official Git website.

1. Download Git for Windows.
2. Open the installer.
3. Keep beginner-safe defaults unless this tutorial identifies a useful option.
4. Complete the installation.
5. Restart Visual Studio Code if it was open.

On macOS, Git may already be installed or may be offered through Apple command-line tools when you first run a Git command. You can also use the official Git installer. This tutorial does not require Homebrew.

Verify the Git Installation#

1. Open Visual Studio Code.
2. Select Terminal > New Terminal.
3. Confirm the terminal opens in the lower panel.
4. Type the command below and press Enter.

git --version

The output should show a Git version number. Your exact number may be different from the example.

git version 2.x.x

Create Your Website Project#

Create the my-first-website folder and add the three project files.

Create one folder for the project and keep every website file inside it. Use the exact folder name my-first-website. Lowercase letters and hyphens are recommended because spaces and inconsistent capitalization can cause confusion across tools and operating systems.

1. Create a folder named my-first-website.
2. Open Visual Studio Code.
3. Select File > Open Folder.
4. Locate and select my-first-website.
5. Confirm the folder appears in the Explorer panel.

my-first-website/
|-- index.html
|-- style.css
|-- script.js

1. In the Explorer panel, select the New File button.
2. Create index.html.
3. Create style.css.
4. Create script.js.
5. Confirm all three files appear inside my-first-website.

A file extension is the ending after a period in a filename. The extension tells tools what kind of file it is. The name index.html is commonly used as the default homepage because many servers look for it first.

Build the Page Structure with HTML#

Create the complete semantic HTML file for the BrightPath Studio website.

HTML stands for HyperText Markup Language. It describes the structure and meaning of webpage content. In this chapter, you will create the complete page structure before adding visual styling.

1. Open index.html in VS Code.
2. Select all existing text in the file if any exists.
3. Paste the complete HTML below.
4. Save the file.
5. Check that the filename is exactly index.html.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>BrightPath Studio | Practical Websites for Growing Teams</title>
    <meta
      name="description"
      content="BrightPath Studio creates simple, responsive websites for small teams and independent professionals."
    />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <a class="skip-link" href="#main-content">Skip to main content</a>

    <header class="site-header">
      <div class="container header-inner">
        <a class="brand" href="#top" aria-label="BrightPath Studio home">
          BrightPath Studio
        </a>

        <button
          class="menu-button"
          type="button"
          aria-expanded="false"
          aria-controls="site-navigation"
        >
          Menu
        </button>

        <nav id="site-navigation" class="site-nav" aria-label="Primary navigation">
          <a href="#about">About</a>
          <a href="#features">Features</a>
          <a href="#work">Work</a>
          <a href="#contact">Contact</a>
        </nav>

        <button class="theme-button" type="button" aria-label="Switch to dark mode">
          Dark mode
        </button>
      </div>
    </header>

    <main id="main-content">
      <section id="top" class="hero section">
        <div class="container hero-grid">
          <div>
            <p class="eyebrow">Simple websites. Clear next steps.</p>
            <h1>Build a Better Online Presence</h1>
            <p class="hero-copy">
              BrightPath Studio helps small teams turn scattered ideas into a
              focused website that is easy to read, easy to use, and ready to share.
            </p>
            <div class="hero-actions">
              <a class="button primary-button" href="#contact">Plan your project</a>
              <a class="text-link" href="#features">See what is included</a>
            </div>
            <p id="cta-message" class="interaction-message" aria-live="polite"></p>
          </div>

          <div class="hero-card" aria-label="Project highlights">
            <p class="card-label">Starter Site</p>
            <ul>
              <li>Responsive layout</li>
              <li>Accessible navigation</li>
              <li>Dark-mode support</li>
            </ul>
          </div>
        </div>
      </section>

      <section id="about" class="section">
        <div class="container narrow">
          <p class="eyebrow">About</p>
          <h2>Websites should make information easier to understand.</h2>
          <p>
            BrightPath Studio is a fictional design studio created for this tutorial.
            Its landing page demonstrates common website sections without requiring a
            framework, database, or build tool.
          </p>
        </div>
      </section>

      <section id="features" class="section muted-section">
        <div class="container">
          <div class="section-heading">
            <p class="eyebrow">Features</p>
            <h2>A small page with practical details</h2>
          </div>

          <div class="feature-grid">
            <article class="feature-card">
              <h3>Thoughtful Design</h3>
              <p>Clear headings, useful spacing, and readable text help visitors scan quickly.</p>
            </article>
            <article class="feature-card">
              <h3>Responsive Layouts</h3>
              <p>The page adjusts for mobile, tablet, and desktop screens with one CSS file.</p>
            </article>
            <article class="feature-card">
              <h3>Simple Solutions</h3>
              <p>Beginner-friendly HTML, CSS, and JavaScript keep the project understandable.</p>
            </article>
          </div>
        </div>
      </section>

      <section id="work" class="section">
        <div class="container work-grid">
          <div>
            <p class="eyebrow">Work</p>
            <h2>Designed for a focused first project</h2>
          </div>
          <div class="work-list">
            <p>Use this page as a starter portfolio, service page, or project landing page.</p>
            <p>After deployment, you can replace the example text with your own content.</p>
          </div>
        </div>
      </section>

      <section class="section cta-section" aria-labelledby="cta-heading">
        <div class="container cta-box">
          <h2 id="cta-heading">Ready to publish your first website?</h2>
          <p>Finish the tutorial to put this page online with GitHub and Vercel.</p>
          <button id="encouragement-button" class="button primary-button" type="button">
            Show encouragement
          </button>
        </div>
      </section>

      <section id="contact" class="section">
        <div class="container narrow">
          <p class="eyebrow">Contact</p>
          <h2>Start with one clear message.</h2>
          <p>
            This tutorial uses example contact information. Replace it before using
            the project for a real organization.
          </p>
          <a class="button secondary-button" href="mailto:hello@example.com">
            Email hello@example.com
          </a>
        </div>
      </section>
    </main>

    <footer class="site-footer">
      <div class="container footer-inner">
        <p>&copy; <span id="current-year">2026</span> BrightPath Studio.</p>
        <a href="#top">Back to top</a>
      </div>
    </footer>
  </body>
</html>

Understand the Document Declaration#

<!DOCTYPE html> tells the browser to use modern HTML rules. It is short, but it prevents older browser behavior from affecting your page.

Understand the HTML Element#

The html element wraps the full page. The lang="en" attribute tells browsers and assistive technologies that the page language is English.

Understand the Head Section#

The head section contains information about the page. Character encoding supports standard text characters. The viewport line helps the page scale on mobile screens. The title appears in browser tabs. The meta description summarizes the page. The stylesheet link connects style.css. The deferred script connects script.js after the HTML is ready.

Understand Semantic Page Structure#

Semantic elements describe the role of content. Header contains the brand and navigation. Nav contains links. Main contains the unique page content. Section groups related content. Article is useful for reusable cards. Footer contains closing site information.

Connect Navigation Links to Sections#

Links such as href="#about" move the browser to an element with id="about". Spelling and capitalization must match exactly.

Connect the CSS and JavaScript Files#

<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>

The link element loads the CSS file. The script element loads the JavaScript file. The defer attribute tells the browser to wait until the HTML is ready before running the script.

Style the Website with CSS#

Add responsive visual design, focus states, dark mode, and reduced-motion support.

CSS stands for Cascading Style Sheets. It controls the visual design and layout of HTML content. The CSS below matches the HTML file exactly.

1. Open style.css.
2. Paste the complete CSS below.
3. Save the file.
4. Preview index.html again.
5. Confirm the page now has spacing, colors, cards, and responsive layout.

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-background);
}

:root {
  --color-background: #f8fafc;
  --color-surface: #ffffff;
  --color-muted: #eaf0f7;
  --color-text: #172033;
  --color-text-soft: #526179;
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-border: #d8e0ea;
  --shadow-soft: 0 18px 45px rgba(23, 32, 51, 0.1);
}

body.dark-theme {
  --color-background: #0f172a;
  --color-surface: #172033;
  --color-muted: #111827;
  --color-text: #f8fafc;
  --color-text-soft: #cbd5e1;
  --color-primary: #60a5fa;
  --color-primary-dark: #93c5fd;
  --color-border: #334155;
  --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.3);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.container {
  width: min(100% - 2rem, 1120px);
  margin-inline: auto;
}

.narrow {
  max-width: 760px;
}

.skip-link {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--color-text);
  color: var(--color-background);
  border-radius: 0.5rem;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--color-background) 92%, transparent);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(16px);
}

.header-inner {
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}

.brand {
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-nav a,
.footer-inner a,
.text-link {
  color: var(--color-text-soft);
  text-decoration: none;
  font-weight: 700;
}

.site-nav a:hover,
.footer-inner a:hover,
.text-link:hover {
  color: var(--color-primary);
}

.menu-button,
.theme-button,
.button {
  min-height: 44px;
  border-radius: 0.65rem;
  border: 1px solid var(--color-border);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.menu-button {
  display: none;
  padding: 0.55rem 0.85rem;
  background: var(--color-surface);
  color: var(--color-text);
}

.theme-button {
  padding: 0.55rem 0.85rem;
  background: var(--color-surface);
  color: var(--color-text);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1rem;
  text-decoration: none;
}

.primary-button {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: white;
}

.primary-button:hover {
  background: var(--color-primary-dark);
}

.secondary-button {
  background: var(--color-surface);
  color: var(--color-primary);
}

.section {
  padding-block: clamp(4rem, 8vw, 7rem);
}

.muted-section {
  background: var(--color-muted);
}

.hero {
  padding-top: clamp(5rem, 10vw, 8rem);
}

.hero-grid,
.work-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.eyebrow,
.card-label {
  margin: 0 0 0.75rem;
  color: var(--color-primary);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 760px;
  margin-bottom: 1rem;
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

h2 {
  margin-bottom: 1rem;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
}

h3 {
  margin-bottom: 0.6rem;
}

.hero-copy,
.section p {
  color: var(--color-text-soft);
  font-size: 1.05rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.hero-card,
.feature-card,
.cta-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  box-shadow: var(--shadow-soft);
}

.hero-card {
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.hero-card ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--color-text-soft);
}

.section-heading {
  max-width: 680px;
  margin-bottom: 2rem;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.feature-card {
  padding: 1.5rem;
}

.work-list {
  display: grid;
  gap: 1rem;
}

.cta-section {
  padding-block: 4rem;
}

.cta-box {
  padding: clamp(1.5rem, 5vw, 3rem);
  text-align: center;
}

.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: 1.5rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}

.interaction-message {
  min-height: 1.5rem;
  margin-top: 1rem;
  color: var(--color-primary);
  font-weight: 800;
}

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .header-inner {
    flex-wrap: wrap;
  }

  .menu-button {
    display: inline-flex;
    align-items: center;
  }

  .site-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: 0 0 1rem;
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a {
    padding: 0.75rem 0;
  }

  .theme-button {
    margin-left: auto;
  }

  .hero-grid,
  .work-grid,
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

Understand Selectors and Classes#

An element selector targets an HTML element such as body or h1. A class selector starts with a period, such as .container. An ID selector starts with a number sign, such as #contact.

Use CSS Custom Properties#

CSS custom properties are reusable values. A variable such as --color-primary stores a color once so it can be used in many places.

--color-primary: #2563eb;

Understand Margin and Padding#

Build Layouts with Flexbox and Grid#

Create Responsive Design#

A media query applies CSS only under certain conditions. This project uses a max-width media query to change navigation and card layouts on smaller screens.

Create Visible Focus States#

Keyboard users need to see which link or button is active. The :focus-visible rule creates a clear outline when someone tabs through the page.

Support Reduced Motion#

The prefers-reduced-motion media query respects people who reduce motion in their operating-system settings.

Add Dark Mode#

The dark-theme class changes color variables on the body element. JavaScript will add and remove that class when the reader selects the theme button.

Add Interactivity with JavaScript#

Add mobile navigation, dark mode, footer year, and a simple call-to-action interaction.

JavaScript adds behavior to a webpage. It can respond to button selections, update content, and remember simple preferences. This file uses readable names and defensive checks so missing optional elements do not cause errors.

1. Open script.js.
2. Paste the complete JavaScript below.
3. Save the file.
4. Preview the page with a browser.
5. Test the menu button, dark-mode button, footer year, and encouragement button.

const menuButton = document.querySelector(".menu-button");
const siteNavigation = document.querySelector("#site-navigation");
const themeButton = document.querySelector(".theme-button");
const currentYear = document.querySelector("#current-year");
const encouragementButton = document.querySelector("#encouragement-button");
const ctaMessage = document.querySelector("#cta-message");

function closeMenu() {
  if (!menuButton || !siteNavigation) {
    return;
  }

  siteNavigation.classList.remove("is-open");
  menuButton.setAttribute("aria-expanded", "false");
}

function setTheme(theme) {
  const isDark = theme === "dark";
  document.body.classList.toggle("dark-theme", isDark);

  if (themeButton) {
    themeButton.textContent = isDark ? "Light mode" : "Dark mode";
    themeButton.setAttribute(
      "aria-label",
      isDark ? "Switch to light mode" : "Switch to dark mode"
    );
  }

  localStorage.setItem("brightpath-theme", theme);
}

if (menuButton && siteNavigation) {
  menuButton.addEventListener("click", () => {
    const isOpen = siteNavigation.classList.toggle("is-open");
    menuButton.setAttribute("aria-expanded", String(isOpen));
  });

  siteNavigation.querySelectorAll("a").forEach((link) => {
    link.addEventListener("click", closeMenu);
  });
}

if (themeButton) {
  const savedTheme = localStorage.getItem("brightpath-theme");
  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
  setTheme(savedTheme || (prefersDark ? "dark" : "light"));

  themeButton.addEventListener("click", () => {
    const nextTheme = document.body.classList.contains("dark-theme") ? "light" : "dark";
    setTheme(nextTheme);
  });
}

if (currentYear) {
  currentYear.textContent = String(new Date().getFullYear());
}

if (encouragementButton && ctaMessage) {
  encouragementButton.addEventListener("click", () => {
    ctaMessage.textContent = "You are ready for the next step: save, commit, and deploy.";
  });
}

Select Page Elements#

document.querySelector finds the first matching element on the page. The selector must match the HTML exactly.

Store Values in Variables#

A variable stores a value so you can use it later. In this file, variables store buttons, navigation, and text areas.

Listen for User Actions#

An event listener waits for something to happen. The click event runs code when the reader selects a button or link.

Run Reusable Code with Functions#

A function groups steps that can run more than once. The closeMenu and setTheme functions keep repeated logic in one place.

Change Classes or Attributes#

JavaScript changes visual state by adding or removing classes. It also updates aria-expanded so assistive technologies know whether the mobile navigation is open.

Save a Theme Preference#

localStorage saves a small value in the browser. This project stores the theme choice so the page can restore it later.

Update Text#

textContent changes text safely. The current year and encouragement message both use textContent.

Preview the Website with Live Server#

Install Live Server and use a local development URL to preview the site.

A VS Code extension adds features to the editor. Live Server starts a small local development server and refreshes the browser after files are saved.

1. Open the Extensions panel.
2. Search for Live Server.

1. Verify the extension name and publisher.
2. Install the extension.
3. Open index.html.
4. Select Go Live or the matching Live Server command.
5. Allow the browser to open.
6. Verify that the BrightPath Studio page appears.

Localhost means your own computer. Local development means previewing the project before it is public. A port number identifies the local server connection. Live Server may show a URL similar to the example below, but your port may be different.

http://127.0.0.1:5500/

Save files before checking changes. To stop Live Server, use the status bar control or the Live Server stop command.

Test the page at a narrow browser width to confirm the layout stacks cleanly and the mobile navigation remains usable.

Understand the Git Workflow#

Learn the beginner Git terms you need before running commands.

Version control records changes over time. Git uses a few important terms that become easier once you connect them to the workflow.

Working Files -> Staging Area -> Local Commit -> GitHub -> Vercel

Configure Your Git Identity#

Set the name and email Git records with each commit.

Git records a name and email with each commit so the project history shows who made each checkpoint. Use your own information.

git config --global user.name "Your Name"
git config --global user.email "your-email@example.com"

git config changes Git settings. --global applies the setting to your user account on this computer. Quotation marks keep names with spaces together. Replace the example values with your real name and email. The email normally matches your GitHub account email, but GitHub also offers private email options.

git config --global user.name
git config --global user.email

Initialize the Local Repository#

Turn my-first-website into a Git repository and inspect the status.

Open the terminal inside the my-first-website folder. In VS Code, check the Explorer folder name and the terminal path before running Git commands.

git init

This command creates a hidden .git directory. Existing project files are not changed. The project becomes a Git repository, but files are not automatically staged or committed.

git status

git status shows the current branch, untracked files, and working-tree status. Untracked files are files Git can see but has not added to version history yet.

Stage the Website Files#

Add the project files to Git's staging area before committing.

Staging lets you choose what goes into the next commit. This tutorial stages all files because the project folder contains only the website files.

git add .

git add stages files. The period means the current project folder. Git separates staging from committing so you can review what will be saved.

git status

The status output should change from untracked files to changes to be committed.

Create the First Commit#

Save the first labeled checkpoint in the local Git history.

A commit is a saved checkpoint. The message explains what changed.

git commit -m "Initial website"

git commit creates the checkpoint. -m lets you add the message in the same command. Git also creates a commit identifier, which is a unique label for that checkpoint.

git log --oneline

git log --oneline shows recent commits in a compact format. Look for the Initial website message.

Create the GitHub Repository#

Create an empty GitHub repository named my-first-website.

GitHub stores Git repositories online. If you do not already have an account, create one with an email address you can access.

1. Sign in to GitHub.
2. Open the new repository page.
3. Enter my-first-website as the repository name.
4. Add an optional description.
5. Select Public or Private.
6. Leave README initialization unchecked for this workflow.
7. Leave .gitignore initialization disabled.
8. Leave license initialization disabled.

1. Create the repository.
2. Locate the repository URL.

This workflow begins with an empty GitHub repository because your local project already has files and a commit.

https://github.com/YOUR-USERNAME/my-first-website.git

Connect the Local Repository to GitHub#

Connect your local Git repository to GitHub and push the first commit.

A remote repository is an online copy connected to your local project. The conventional remote name origin points to your main online repository.

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

git remote add origin connects the local repository to the GitHub repository URL. git branch -M main renames the active branch to main. git push -u origin main uploads the commit to GitHub and sets upstream tracking, so future pushes can normally use git push.

GitHub does not accept a normal GitHub account password for command-line Git pushes. You may be asked to sign in through a browser, authorize Git Credential Manager, or confirm your GitHub account.

Verify the Files on GitHub#

Confirm the uploaded files and commit history are visible on GitHub.

1. Open the GitHub repository.
2. Refresh the page.
3. Confirm that the main branch is selected.
4. Confirm that index.html, style.css, and script.js are listed.
5. Open each file.
6. Review the latest commit message.
7. Open the commit history.
8. Confirm that the initial commit appears.

GitHub now stores the project online, but that does not always mean the project is published as a public website. Deployment happens in Vercel in the next chapter.

Deploy the Website with Vercel#

Import the GitHub repository into Vercel and publish the site.

Deployment is the process of making a project available through a public web address. Vercel connects to GitHub, builds or serves the project, and provides a public URL.

1. Open the official Vercel website.
2. Create an account or sign in.
3. Select GitHub as the sign-in method.
4. Authorize access when prompted.
5. Open the dashboard.
6. Select Add New Project.
7. Locate my-first-website.

1. Import the repository.
2. Review the project configuration.
3. Confirm that the project root contains index.html.
4. Choose an appropriate framework setting for a static HTML project.
5. Leave the build command empty when the current interface permits and no build process is needed.
6. Leave the output directory at the appropriate default for a root-level static site.
7. Start the deployment.
8. Wait for the deployment to finish.
9. Open the live website.
10. Copy the public .vercel.app URL.

A static HTML project typically does not need a framework build command because the files can be served directly.

Update the Website#

Make a visible change, push it to GitHub, and verify Vercel redeploys automatically.

A deployed website is not finished forever. You update the local files, commit the change, push to GitHub, and let Vercel deploy the new commit.

1. Open index.html.
2. Find the hero heading Build a Better Online Presence.
3. Change it to Create a Website You Are Proud to Share.
4. Save the file.
5. Preview the change locally.

git status
git add .
git commit -m "Update website content"
git push

git status confirms the file changed. git add . stages the update. git commit saves the checkpoint. git push sends the new commit to GitHub.

1. Confirm the new commit appears on GitHub.
2. Open the Vercel project dashboard.
3. Confirm a new deployment appears.
4. Wait for the deployment to show Ready.
5. Open or refresh the live website.
6. Confirm the new hero heading appears.

The live URL usually stays the same while Vercel replaces the deployed content behind it. If you do not see the update, the browser may be showing cached content.

Troubleshooting Common Problems#

Use concrete checks and repair steps when installation, preview, GitHub, or Vercel problems occur.

Troubleshooting works best when you isolate one problem at a time. Read the likely cause first, follow the solution steps in order, and confirm the fix before moving to the next task.

What You Accomplished#

Review the complete workflow and choose practical next steps.

You built and published a complete website workflow from local files to a public deployment.

• Installed Visual Studio Code.
• Installed Git.
• Created a website project.
• Built a semantic HTML page.
• Styled the website with CSS.
• Added JavaScript interaction.
• Previewed the project with Live Server.
• Initialized a Git repository.
• Configured Git identity.
• Staged files.
• Created commits.
• Created a GitHub repository.
• Uploaded the project.
• Deployed the site with Vercel.
• Updated the live website through a Git push.

Next Steps#

• Add more semantic HTML sections.
• Build real forms.
• Run accessibility testing.
• Practice advanced CSS layouts.
• Add carefully controlled CSS animations.
• Study JavaScript fundamentals.
• Use Git branches.
• Create pull requests.
• Connect a custom domain.
• Improve search-engine optimization.
• Explore React.
• Explore Next.js.

You now have the foundation for a professional website workflow. Keep the first version simple, make one improvement at a time, and use Git commits to record your progress.