Deploy a Product Catalog to Vercel

Build and deploy a static product catalog website using the Vercel CLI.

Introduction

30 Second Summary

Every online store you visit started as code on someone's computer. The magic step that turns local files into a live website is called deployment.

In this project, you will build a product catalog page from scratch and deploy it to the internet using Vercel. By the end, you'll have a public URL that anyone in the world can visit.

What You'll Build

A clean product catalog displaying 6 household items with images and prices, styled with a responsive CSS grid layout and deployed live to Vercel.

By the end of this project, you'll have:

  • A working local development setup with Node.js and the Vercel CLI installed on your machine.
  • A product catalog page built with HTML and CSS, featuring styled product cards in a responsive grid.
  • Hands-on experience with the Vercel deployment workflow, including both preview and production deployments.
  • Secret Mission: Add JavaScript category filtering so visitors can show only "Cleaning" or "Food" products.

Are there any prerequisites?

None. This project includes setup instructions for every tool you need. You just need a computer with VS Code already installed.

Before We Start

Before you can deploy your product catalog to the internet, you need a few tools installed on your computer. These tools handle the connection between your local code and Vercel's hosting platform.

In this step, you'll install Node.js, create a free Vercel account, and set up the Vercel CLI. The CLI is your command-line tool for pushing code live to the internet.

In this step, get ready to:
  • Install Node.js and verify it works.
  • Create a free Vercel account.
  • Install the Vercel CLI and log in.
Install Node.js

Node.js is a JavaScript runtime that powers the Vercel CLI. You need version 24 or higher for this project.

  • Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
  • Type Visual Studio Code and press Enter to open it.
  • Open a terminal inside VS Code by clicking Terminal in the top menu bar.
  • Click New Terminal.
  • Check if Node.js is already installed by running this command:
node -v

✔️ I see version 24 or higher

Node.js is ready to go. Move on to the npm check below.

ⓧ I see an older version

You have an older version of Node.js that won't work with the Vercel CLI. You need to install the latest LTS version.

  • Go to https://nodejs.org/en/download in your browser.
  • Download the LTS installer for your operating system (v24.16.0 at time of writing).
  • Run the installer and accept all default settings.
  • Close and reopen your VS Code terminal after the install finishes.
  • Run node -v again to confirm it now shows v24 or higher.

Why close and reopen the terminal?

Your terminal loads its environment variables when it first opens. A fresh terminal picks up the new Node.js installation path.

ⓧ Command not found

Node.js is not installed yet. Let's install it now.

  • Go to https://nodejs.org/en/download in your browser.
  • Download the LTS installer for your operating system (v24.16.0 at time of writing).
  • Run the installer and accept all default settings.
  • Close and reopen your VS Code terminal after the install finishes.
  • Run node -v again to confirm it now shows v24 or higher.

Why close and reopen the terminal?

Your terminal loads its environment variables when it first opens. A fresh terminal picks up the new Node.js installation path.

  • Verify that npm (Node's package manager) is also available by running:
npm -v

You should see a version number printed. npm comes bundled with Node.js, so if node -v worked, this should too.

Not seeing a version number for npm?

Make sure you closed and reopened your terminal after installing Node.js. If the problem persists, try fully quitting VS Code and reopening it.

help me troubleshoot why npm is not found after installing Node.js

Create a Vercel account

Vercel is the hosting platform where your product catalog will live. The free Hobby plan is all you need for this project.

  • Go to https://vercel.com in your browser.
  • Click Sign Up.
  • Sign up with your email address.
  • Check your inbox and verify your email to activate the account.

What is the Hobby plan?

Vercel's Hobby plan is completely free and designed for personal, non-commercial projects. It includes up to 100 deployments per day, which is far more than you'll need for this project.

Install and authenticate the Vercel CLI

The Vercel CLI lets you deploy websites directly from your terminal. No need to drag and drop files or connect a Git repository.

  • Install the Vercel CLI globally by running this command:
npm install -g vercel

What does this command do?

npm install -g vercel downloads the Vercel CLI package and installs it globally on your machine. The -g flag means you can use the vercel command from any folder, not just this project.

  • Verify the CLI installed correctly by running:
vercel --version

You should see a version number printed in your terminal.

Seeing a permission error?

On macOS, you may need to prefix the install command with sudo (e.g. sudo npm install -g vercel). On Windows, try closing VS Code and reopening it with Run as administrator.

help me fix a permission error when installing the Vercel CLI globally with npm

  • Log in to your Vercel account from the terminal by running:
vercel login

This opens a browser tab where you confirm the login. Once confirmed, return to your terminal.

Browser didn't open?

If the browser didn't open automatically, look in your terminal for a URL. Copy and paste that URL into your browser manually.

help me complete Vercel CLI login when the browser doesn't open automatically

Your tools are locked and loaded. Next up, you'll build the product catalog page itself.

Build the Product Catalog HTML

Your tools are installed and your Vercel account is ready. Now it's time to build the actual product page you'll deploy to the internet.

You'll create an HTML file containing a page header and six product cards. Each card displays a placeholder image, a product name, and a price.

In this step, get ready to:
  • Create a project folder with two files.
  • Write the HTML structure for 6 product cards with images and prices.
  • Preview the page in your browser.
Create the project folder and files

Every web project lives in its own folder. You'll create one called product-catalog on your Desktop, then set up the two files your site needs.

  • Switch back to your VS Code terminal from the previous step.
  • Move to your Desktop by running this command:
cd ~/Desktop
  • Create your project folder and move into it by running these commands:
mkdir product-catalog
cd product-catalog
  • Open this folder in VS Code by clicking File in the top menu bar.
  • Click Open Folder.
  • Navigate to your Desktop, select the product-catalog folder, and click Open.

Why open the folder in VS Code?

Opening a folder tells VS Code to treat it as your workspace. The Explorer sidebar shows only that folder's contents, and the integrated terminal starts inside it automatically.

  • In the Explorer sidebar on the left, hover over the folder name and click the New File icon (a page with a plus sign).
  • Type index.html and press Enter.
  • Click the New File icon again.
  • Type style.css and press Enter.
  • Confirm both files exist by checking the Explorer sidebar. You should see index.html and style.css listed under product-catalog.

Don't see the New File icon?

Make sure the Explorer sidebar is visible. Press Cmd+Shift+E (macOS) or Ctrl+Shift+E (Windows) to toggle it open.

If you don't see a folder name at the top, you may not have opened the folder correctly. Go back to File > Open Folder and select product-catalog from your Desktop.

help me open a folder in VS Code and create files

Write the HTML structure

Your product catalog page needs a header with a title and six product cards arranged in a grid. Each card uses a placeholder image from placehold.co, which generates images on the fly without needing an account.

  • Click on index.html in the Explorer sidebar to open it in the editor.
  • Paste the following HTML into the file:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Catalog</title>
    <!-- Link to the external stylesheet -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Page header with title and subtitle -->
    <header>
        <h1>Product Catalog</h1>
        <p>Browse our household essentials</p>
    </header>
    <main>
        <!-- Grid container for all product cards -->
        <div class="product-grid">
            <!-- Product card 1 -->
            <div class="product-card">
                <img src="https://placehold.co/400x300/e2f0d9/333333?text=Shampoo" alt="Shampoo">
                <div class="product-info">
                    <h2 class="product-name">Herbal Shampoo</h2>
                    <p class="product-price">$8.99</p>
                </div>
            </div>
            <!-- Product card 2 -->
            <div class="product-card">
                <img src="https://placehold.co/400x300/d9e2f0/333333?text=Detergent" alt="Detergent">
                <div class="product-info">
                    <h2 class="product-name">Fresh Detergent</h2>
                    <p class="product-price">$12.49</p>
                </div>
            </div>
            <!-- Product card 3 -->
            <div class="product-card">
                <img src="https://placehold.co/400x300/f0d9e2/333333?text=Dish+Soap" alt="Dish Soap">
                <div class="product-info">
                    <h2 class="product-name">Lemon Dish Soap</h2>
                    <p class="product-price">$4.99</p>
                </div>
            </div>
            <!-- Product card 4 -->
            <div class="product-card">
                <img src="https://placehold.co/400x300/f0ead9/333333?text=Frozen+Pizza" alt="Frozen Pizza">
                <div class="product-info">
                    <h2 class="product-name">Margherita Pizza</h2>
                    <p class="product-price">$6.99</p>
                </div>
            </div>
            <!-- Product card 5 -->
            <div class="product-card">
                <img src="https://placehold.co/400x300/d9f0e8/333333?text=Coffee" alt="Coffee">
                <div class="product-info">
                    <h2 class="product-name">Dark Roast Coffee</h2>
                    <p class="product-price">$11.99</p>
                </div>
            </div>
            <!-- Product card 6 -->
            <div class="product-card">
                <img src="https://placehold.co/400x300/f5f0d9/333333?text=Pasta" alt="Pasta">
                <div class="product-info">
                    <h2 class="product-name">Penne Pasta</h2>
                    <p class="product-price">$2.49</p>
                </div>
            </div>
        </div>
    </main>
</body>
</html>

What does this code do?

The <header> section displays the page title and a short subtitle at the top.

The <div class="product-grid"> acts as a container for all six product cards. In the next step, you'll use CSS Grid to arrange these cards into responsive columns.

Each .product-card contains an <img> tag that loads a colored placeholder image from placehold.co, plus a .product-info section with the product name and price.

The <link rel="stylesheet" href="style.css"> in the <head> connects the (currently empty) stylesheet so your CSS takes effect the moment you add styles in the next step.

  • Save index.html by pressing Cmd+S (macOS) or Ctrl+S (Windows).

✔️ Awesome, I've got everything!

Great. Double check you've saved index.html and move on to previewing it in your browser.

ⓧ I'd like to double check the full code

Here is the complete index.html file for comparison:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Catalog</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Product Catalog</h1>
        <p>Browse our household essentials</p>
    </header>
    <main>
        <div class="product-grid">
            <div class="product-card">
                <img src="https://placehold.co/400x300/e2f0d9/333333?text=Shampoo" alt="Shampoo">
                <div class="product-info">
                    <h2 class="product-name">Herbal Shampoo</h2>
                    <p class="product-price">$8.99</p>
                </div>
            </div>
            <div class="product-card">
                <img src="https://placehold.co/400x300/d9e2f0/333333?text=Detergent" alt="Detergent">
                <div class="product-info">
                    <h2 class="product-name">Fresh Detergent</h2>
                    <p class="product-price">$12.49</p>
                </div>
            </div>
            <div class="product-card">
                <img src="https://placehold.co/400x300/f0d9e2/333333?text=Dish+Soap" alt="Dish Soap">
                <div class="product-info">
                    <h2 class="product-name">Lemon Dish Soap</h2>
                    <p class="product-price">$4.99</p>
                </div>
            </div>
            <div class="product-card">
                <img src="https://placehold.co/400x300/f0ead9/333333?text=Frozen+Pizza" alt="Frozen Pizza">
                <div class="product-info">
                    <h2 class="product-name">Margherita Pizza</h2>
                    <p class="product-price">$6.99</p>
                </div>
            </div>
            <div class="product-card">
                <img src="https://placehold.co/400x300/d9f0e8/333333?text=Coffee" alt="Coffee">
                <div class="product-info">
                    <h2 class="product-name">Dark Roast Coffee</h2>
                    <p class="product-price">$11.99</p>
                </div>
            </div>
            <div class="product-card">
                <img src="https://placehold.co/400x300/f5f0d9/333333?text=Pasta" alt="Pasta">
                <div class="product-info">
                    <h2 class="product-name">Penne Pasta</h2>
                    <p class="product-price">$2.49</p>
                </div>
            </div>
        </div>
    </main>
</body>
</html>
Preview the page in your browser

You can open any HTML file directly in a browser to see how it looks without needing a server.

  • Right-click index.html in the VS Code Explorer sidebar.
  • Click Reveal in File Explorer (Windows) or Reveal in Finder (macOS).
  • Double-click index.html in the file browser window that opens. It opens in your default web browser.

You should see a page with "Product Catalog" as the heading, "Browse our household essentials" as the subtitle, and 6 product cards stacked vertically. Each card shows a colored placeholder image, a product name, and a price.

Why do the cards stack vertically?

Without CSS, the browser displays all elements in a single column from top to bottom. In the next step, you'll add a CSS Grid layout that arranges the cards side by side in a responsive grid.

Seeing a blank page or missing images?

If the page is completely blank, open the file directly in the browser's address bar. The path should look like file:///Users/yourname/Desktop/product-catalog/index.html (macOS) or C:\Users\yourname\Desktop\product-catalog\index.html (Windows).

If images show as broken icons, check that the URLs in your src attributes match the code exactly. The placehold.co service requires an internet connection to load images.

help me troubleshoot why my index.html is not displaying correctly in the browser

Your HTML skeleton is complete. Next up, you'll add CSS styles to transform those stacked cards into a polished, responsive grid layout.

Style the Catalog with CSS

Your HTML is in place. You have a header, six product cards, and placeholder images ready to go.

Right now the page looks bare because there is no styling applied. In this step, you'll write CSS to transform those cards into a polished, responsive grid that reflows automatically on different screen sizes.

In this step, get ready to:
  • Set up base page styles with a CSS reset and clean fonts.
  • Create a responsive product grid using CSS Grid.
  • Style product cards with images, typography, and hover effects.
Set up the page layout

Different browsers apply their own default margins and padding to HTML elements. A CSS reset strips those defaults so your layout looks consistent everywhere.

  • Switch back to style.css in VS Code and add the following code:
/* Remove default browser margins and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Base page styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
}

/* Header styling */
header {
    text-align: center;
    padding: 40px 20px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
}

header h1 {
    font-size: 2rem;
    margin-bottom: 8px;
}

header p {
    color: #666;
    font-size: 1.1rem;
}

/* Content container */
main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

What does this code do?

The * selector targets every element on the page. Setting margin: 0 and padding: 0 removes all default spacing so you start from a blank canvas.

The body rule sets a system font stack, a light gray background, and comfortable line spacing. The main container is capped at 1200px wide and centered with margin: 0 auto so content doesn't stretch edge-to-edge on large monitors.

  • Save style.css and refresh your browser.
  • You should see the header centered on a white strip with a light gray page background behind it.

Page still looks unstyled?

  • Confirm your index.html has <link rel="stylesheet" href="style.css"> in the <head> section. Without this link, the browser won't load your CSS file.
  • Make sure style.css is in the same folder as index.html. If it's in a subfolder, the relative path won't resolve.

Still stuck? Help me figure out why my CSS isn't loading in the browser.

Create the product grid

CSS Grid lets you arrange elements in rows and columns with a single rule. The auto-fill keyword combined with minmax creates columns that automatically wrap to the next row when the screen gets narrower.

  • Add the following code below your existing styles in style.css:
/* Responsive grid layout */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

/* Individual product card */
.product-card {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

What does this code do?

The grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) rule is the magic line. It says: create as many columns as will fit, each at least 280px wide but allowed to grow to fill available space.

Each .product-card gets a white background, rounded corners, and a subtle shadow to lift it off the page. The transition property prepares the card for a smooth hover animation you'll add next.

  • Save style.css and refresh your browser.
  • Your product cards now display in a neat grid with white backgrounds and rounded corners. Try resizing your browser window to see them reflow into fewer columns.

Cards stacking in a single column?

  • Check that your class name is product-grid in both your HTML and CSS. A typo in either place breaks the connection.
  • Make sure your browser window is wide enough. The minmax(280px, 1fr) rule means each card needs at least 280px, so a narrow window legitimately shows one column.

Need more help? Why are my CSS Grid cards stacking in one column instead of a grid?

Style the product details

The final group of styles gives each card its polished look. Images will fill the card width, text gets proper sizing, and a hover effect adds a sense of interactivity.

  • Add the following code below your existing styles in style.css:
/* Hover effect lifts the card */
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Product image fills the card width */
.product-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* Spacing inside the card text area */
.product-info {
    padding: 20px;
}

/* Product name styling */
.product-name {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

/* Price stands out in green */
.product-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2d8a4e;
}

What does this code do?

  • The :hover rule shifts the card up 4 pixels and deepens its shadow when a visitor moves their cursor over it. This gives a tactile "lift" feel.
  • The object-fit: cover property ensures images fill their container without stretching or distorting, cropping edges if needed.
  • The price color #2d8a4e is a green that draws the eye to the most actionable piece of information on each card.
  • Save style.css and refresh your browser.
  • Images now fill each card, prices appear in green, and hovering over a card lifts it up with a deeper shadow.

Hover effect not working?

  • Make sure the transition property on .product-card (from the previous chunk) is present. Without it the hover state applies instantly and is hard to notice.
  • Check that .product-card:hover is spelled exactly with the colon before hover. A missing colon turns it into a class selector that never matches.

Still stuck? Help me debug why my CSS hover effect isn't showing.

✔️ Awesome, I've got everything!

Great. Double check you've saved style.css and the page looks right in your browser.

ⓧ I'd like to double check the full code

Here's the complete style.css file. Compare it against yours line by line.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
}

header {
    text-align: center;
    padding: 40px 20px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
}

header h1 {
    font-size: 2rem;
    margin-bottom: 8px;
}

header p {
    color: #666;
    font-size: 1.1rem;
}

main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.product-card {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.product-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.product-info {
    padding: 20px;
}

.product-name {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.product-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2d8a4e;
}

Your catalog looks great. Next up, you'll deploy it to Vercel and get a live URL that anyone in the world can visit.

Deploy to Vercel

Your product catalog looks great in the browser. But right now, only you can see it on your own computer.

In this step, you will take your local files and deploy them to Vercel. This means your website gets a public URL that anyone in the world can visit.

In this step, get ready to:
  • Deploy a preview version of your site to test it online.
  • Promote your site to a production deployment with a clean URL.
  • Understand the difference between preview and production deployments.
Deploy a preview

A preview deployment lets you test your site on a live URL before making it the official public version. Think of it like a dress rehearsal before opening night.

  • Switch to your VS Code terminal and navigate into your project folder by running this command:
cd product-catalog
  • Deploy your site to Vercel by running:
vercel

What will the CLI ask me?

Since this is your first time running vercel in this folder, the CLI asks a few setup questions. Here is what to expect:

  • Set up and deploy? Press Y to confirm.
  • Which scope? If you only have one account, it selects automatically. Otherwise, pick your personal account.
  • Link to existing project? Press N to create a new project.
  • What is your project's name? Press Enter to accept the default (product-catalog).
  • In which directory is your code located? Press Enter to accept ./ (the current folder).
  • Want to modify these settings? Press N to keep the defaults.

Once the deployment finishes, the CLI prints a preview URL ending in .vercel.app.

  • Copy the preview URL from the terminal output and open it in your browser.
  • You should see your product catalog page with all 6 product cards, exactly as it looked locally.

Don't see your site at the preview URL?

  • Make sure you ran vercel from inside the product-catalog folder, not from a parent folder. The CLI deploys whatever directory you are currently in.
  • If you accidentally chose Y for linking to an existing project, the CLI may have linked to the wrong project. Delete the .vercel folder inside product-catalog and run vercel again.
  • Check that index.html and style.css are directly inside product-catalog, not nested in a subfolder.

Still stuck? Help me troubleshoot my Vercel preview deployment.

Deploy to production

Your preview deployment is live, but it has a long URL with a random hash. A production deployment gives your site a cleaner, permanent URL.

  • Promote your site to production by running:
vercel --prod

What does this command do?

The --prod flag tells Vercel to create a production deployment instead of a preview. Production deployments get assigned to your project's main URL (something like product-catalog.vercel.app).

  • Copy the production URL from the terminal output and open it in your browser.
  • Confirm that your product catalog displays correctly with all 6 cards, images, and prices.

Production URL not loading?

  • Give it 10-15 seconds. Production deployments sometimes take a moment to propagate.
  • If you see a Vercel error page, run vercel --prod again. Transient network issues can interrupt the upload.

Need more help? Why is my Vercel production deployment not loading?

Understand what happened

You now have two live URLs for your product catalog. Each serves a different purpose in a professional deployment workflow.

What is the difference between preview and production?

Preview deployments are for testing changes before making them public. Every time you run vercel without the --prod flag, you get a new preview URL. This lets you check that everything looks right before going live.

Production deployments are the live version at your main project URL. Running vercel --prod promotes your code to production, replacing whatever was there before.

  • Visit your Vercel dashboard to see both deployments listed by opening this URL in your browser: https://vercel.com/dashboard
  • You should see your product-catalog project listed with both the preview and production deployments.

Why use the CLI instead of connecting to GitHub?

Vercel also supports deploying automatically from a Git repository. The CLI approach you used here directly shows you how deployment works: code goes up, URL comes back.

For a first deployment, this makes the process transparent. You can always connect a Git repository later for automatic deployments on every push.

Your product catalog is officially live on the internet. You have a professional deployment workflow with both a staging area (preview) and a public-facing site (production).

Secret mission

Add Category Filtering

Your product catalog looks great, but visitors have to scroll through everything to find what they need. Can you add filter buttons that let visitors show only "Cleaning" or "Food" products? This introduces JavaScript and DOM manipulation to your static site.

Clean Up Your Resources

Clean Up Your Resources

This project uses the Vercel Hobby plan, which is completely free with no billing cycle. There are no ongoing costs for keeping your site deployed.

Decide whether to keep your resources running, pause them to come back later, or delete them entirely.

Resources you used:

  • Local product-catalog folder (contains index.html, style.css, and script.js).
  • Vercel project and deployments (preview and production URLs).
  • Vercel CLI (installed globally via npm).
  • Vercel account (Hobby plan, free).

Keep everything running

No action needed. Choose this if you are still actively building or want your product catalog to stay live at its public URL.

  • Your site stays live at its production URL at no cost.
  • The Vercel CLI remains installed and authenticated for future projects.
  • Node.js stays available for any JavaScript project.

Pause - I'll come back to this later

Log out of the Vercel CLI to end your local session. Your deployed site stays live (it is free), but your terminal is no longer authenticated.

  • Log out of the Vercel CLI by running:
vercel logout
  • When you are ready to return, run vercel login to re-authenticate.
  • Your deployed site remains live at its production URL with no cost while you are away.

Delete - I don't want to use this again

Remove all project resources and start fresh. Follow each step below to fully clean up.

  • Delete the Vercel project (this takes down your live site). In your terminal, run:
vercel project rm product-catalog
  • Confirm the deletion when prompted.
  • Log out of the Vercel CLI by running:
vercel logout
  • Uninstall the Vercel CLI by running:
npm uninstall -g vercel
  • Delete your local project folder. On macOS or Linux, run:
cd ~/Desktop
rm -rf product-catalog
  • On Windows, run:
cd ~\Desktop
rmdir /s /q product-catalog
  • Delete your Vercel account (optional). Go to your Vercel dashboard, open your account settings, scroll to the bottom, and click Delete Personal Account. Follow the prompts to confirm.

Nice Work!

Nice Work!

Nice work! You just built a product catalog from scratch and deployed it live to the internet using Vercel.

You've learned how to:

  • Built a responsive product catalog page using HTML and CSS Grid with styled product cards and hover effects.
  • Set up a professional local development environment with Node.js and the Vercel CLI for deploying websites from the terminal.
  • Deployed to both a preview environment and a production environment on Vercel, learning how professional teams test changes before going live.
  • Secret Mission: Added JavaScript category filtering with interactive buttons and redeployed the updated site to production.

Ready to quiz yourself?