How to share an HTML, CSS, and JavaScript project from VS Code as a link

You built a project in VS Code, maybe with ChatGPT or Copilot writing some of it: an index.html, a style.css, a script.js, and a folder of images. It works when you click Go Live. Now a teacher, a client, or your friends need a link, and the address in your browser, http://127.0.0.1:5500/index.html, opens only on your computer. This guide puts the project into one file, publishes it on Convika's Free plan, and gets you a link that opens on any phone.

What VS Code's live and sharing features do

Each of these does a real job while you build. None of them keeps your page online after you close VS Code:

• Live Server, the extension by Ritwick Dey, launches “a local development server with live reload feature for static & dynamic pages,” as its Marketplace page says. It serves the page at 127.0.0.1, port 5500 by default, which is your own computer. Its FAQ shows how to open the page on a phone by typing your computer's IP address, which needs “your PC & Mobile are connected through same network.” Because the server listens only on 127.0.0.1 by default, the phone reaches it only after you change the liveServer.settings.host setting to 0.0.0.0 (Live Server's settings).
• Live Preview, Microsoft's extension, “Hosts a local server in your workspace for you to preview your webpages on,” according to its Marketplace page.
• Live Share is for working on code together. It “enables you to collaboratively edit and debug with others in real time,” say Microsoft's docs. When you share a running server in a session, the connection “helps to ensure that only people in the collaboration session have access” (Share a server). Your teacher would join your session, not open a web page.
• Port forwarding is built into VS Code and can give the server on your computer a public address. In the Ports view, select Forward a Port, sign in with GitHub, and set Port Visibility to Public. Then “any user with your link can access the forwarded service,” as VS Code's docs put it. Each visit goes on to the server on your computer: in Microsoft's dev tunnels docs, the tunnel host, here VS Code on your computer, is the part that “forwards those connections to local ports.” So the link works only while your computer, VS Code, and that server are running. Microsoft says dev tunnels are “for adhoc testing and development, not for production workloads,” and visitors see an anti-phishing page the first time they open the link (dev tunnels security).

For a quick look while you're at your computer, a public forwarded port can be enough. For a link your teacher opens tomorrow on a phone, the page has to be on a host.

Make the project one file

Convika hosts one HTML file per page, up to 2 MB, so the CSS and the JavaScript have to be inside it. A tag such as <link rel="stylesheet" href="style.css"> tells the browser to fetch style.css from the folder the page is in, and that file is still on your computer. When we uploaded a project's index.html on its own, the upload screen warned: “These files are on your computer, so they won't load online: style.css, logo.png, and script.js.”

Before, index.html loads 3 other files:

<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <img src="images/logo.png" alt="Logo">
  <h1>Study Planner</h1>
  <script src="script.js"></script>
</body>

After, the same code is inside the page, and the logo is built in:

<head>
  <style>
    /* everything from style.css */
  </style>
</head>
<body>
  <img src="data:image/png;base64,iVBORw0KGgo…" alt="Logo">
  <h1>Study Planner</h1>
  <script>
    // everything from script.js
  </script>
</body>

Make these 4 edits in VS Code:

1. Save a copy to edit. Open index.html and choose File > Save As. Name the copy share.html and save it in the same folder. Your original project stays as it is.

2. Paste the CSS into a style tag. Open style.css and press Ctrl+A, then Ctrl+C, to copy all of it (Cmd+A and Cmd+C on a Mac). In share.html, delete the <link rel="stylesheet" href="style.css"> line, type <style> and </style> in its place, and paste between them. Do the same for every other stylesheet in the project. Stylesheets whose address starts with https://, such as Google Fonts or Bootstrap from a CDN, stay as they are.

3. Paste the JavaScript into a script tag. Copy all of script.js the same way. In share.html, delete the <script src="script.js"></script> line, and paste the code between <script> and </script> just before </body>. Put it there even if the old line was in the <head>: at the end of the page, the code runs after the buttons and lists it looks for exist. Do the same for every script file in the project, each in its own <script> tag, in the same order as the old lines, so each one still runs after the scripts it relies on. Scripts that load from an https:// address, such as jQuery from a CDN, stay as they are. A script with type="module" that loads other files with import won't work pasted in, because those files stay on your computer; a project like that fits a host from the section below.

4. Give each image an address. <img src="images/logo.png"> points to your computer too. If the image is already online, use its full https:// link. For a small image, such as a logo or an icon, you can put the image itself into the page. In VS Code, choose Terminal > New Terminal, and run the line for your computer with your image's path in place of images\logo.png on Windows or images/logo.png on a Mac. It copies the image as text.

   On Windows, where VS Code's terminal opens PowerShell:

   Copy

   [Convert]::ToBase64String([IO.File]::ReadAllBytes("$PWD\images\logo.png")) | Set-Clipboard
   

   On a Mac:

   Copy

   base64 -i images/logo.png | pbcopy
   

   Then replace the image's path with data:, the image's file type, ;base64,, and what you copied. For a PNG file it looks like this:

   Copy

   <img src="data:image/png;base64,iVBORw0KGgo…" alt="Logo">
   

   The file type is image/ plus the format: image/png for .png, image/jpeg for .jpg, image/gif for .gif, and image/svg+xml for .svg. The same works inside url() in your CSS. An image built in this way takes about a third more space than its file, and the whole page has to stay under 2 MB, so give large photos a link instead.

Save share.html, then open it in a browser and check that it looks and works like the original. The upload screen in step 3 below warns about files the page still points to on your computer, so you can catch a line you missed.

If ChatGPT or Copilot wrote the project, you can also ask it: “Combine index.html, style.css, and script.js into one HTML file. Put the CSS in a style tag in the head and the JavaScript in a script tag just before the closing body tag. Don't change anything else.” Check what it gives you the same way.

We checked these steps on October 13, 2026, with a small project of 3 files, index.html, style.css, and script.js, plus a logo. Combined this way, the file uploaded without the warning above. On the published page, the styles from style.css applied, the logo showed, the script's add button and dark mode switch worked, and the browser console showed no errors.

What else to change

• Links to your other pages. A link such as about.html points to another file in the folder. Each Convika page is one file with its own address, so a site of several pages fits a host that takes the whole folder. See when GitHub Pages or Netlify fits better.
• Files your script loads. A script that reads data.json with fetch() can't reach it, because the file isn't online. Put the data in the script as a variable instead.
• Data from other websites. A page on Convika can fetch data only from its own address, so a script that calls another site's API, such as a weather API, is blocked on every plan. A project built around an API fits one of the hosts in the next section.
• Fonts saved in the project. Load the font from Google Fonts with its https:// link instead.
• A contact form. A form you built has nowhere to send what people type. Replace it with <div data-convika-form></div> before you upload. Then click Add a form to my page on the page's dashboard screen, and Convika puts a form that keeps the entries in that spot; the Free plan shows 50 entries a month. How to make the form on your page work has the details.

Stylesheets, fonts, and scripts from https:// addresses keep working on every plan, including Free, and so do onclick attributes and localStorage.

When GitHub Pages or Netlify fits better

Some projects are many files by design: a site with several pages, or a React or Vite project that you build with npm run build. Combining those by hand isn't practical, and a project that calls another site's API needs a host that lets it. Put the whole folder on a host that takes one:

• GitHub Pages “takes HTML, CSS, and JavaScript files straight from a repository on GitHub,” according to GitHub's docs. In VS Code, run Publish to GitHub from the Command Palette to create the repository (VS Code's docs), then turn on Pages in the repository's settings. On GitHub Free, the repository must be public. GitHub Pages commercial use covers what it allows.
• Netlify Drop lets you “drag and drop a folder of files,” and a folder dropped without signing in stays behind a temporary password until you claim it (Netlify's quickstart). Teams created on or after July 28, 2026 start new projects private (project visibility docs), so after you claim the drop, select Make public before you send the link. Netlify Drop alternatives compares it with 6 other hosts.

Convika fits a project that is one page: a portfolio, an assignment, a landing page, or a small app such as a quiz or a to-do list. A Convika page can also have a password and a visit count, which the sections after the steps cover.

Share your VS Code project as a link in 5 steps

Combine the project into one file

Make the 4 edits in Make the project one file, and save the result as one .html file, such as share.html. Open it in a browser and check that it looks and works like the original.

Create a free Convika account

Sign up at app.convika.com. The Free plan needs no credit card and covers 10 pages.

Upload the file

In the dashboard, click Upload an HTML file. On the Upload a file tab, drop share.html or click Choose a file; .html and .htm files up to 2 MB work. If the screen says “These files are on your computer, so they won't load online,” the page still points to those files. The notice names the first 3 and counts the rest, as in “and 2 more.” Move them all in, save, and choose the file again. The page name comes from the page's <title>, and you can change it. Click Create my preview. Uploading uses no AI credits.

Check the private preview

When you see “Your preview is ready,” click Open preview. The preview link is private and expires in 7 days, so nothing is public yet. Click every button, type into every box, and open the link on your phone too.

Publish and send the link

Click Publish, then Publish again in the dialog. The page goes live at an address like yourpage.convika.com. Send that address on WhatsApp, by email, or wherever your teacher collects work. It opens in one tap in any phone's browser, with no app or account.

Share it only with your teacher or a client

A published page is a public website: anyone with the link can open it, and search engines can find it. For a project meant for one teacher or one client:

• Add a password. In the page's Site settings, under Page password, click Add password. Visitors see a password screen first, and Convika sends the page only after they type the right password. Passwords are part of Pro, at $12 a month. If it's your first published page, add the password before you click Publish: publishing starts free days of Pro, no card needed, and the password screen is up from the first visit. When those days end, the page keeps its password, so it doesn't go public by itself. How to password protect an HTML page shows what visitors see.
• Keep it out of search results. Add <meta name="robots" content="noindex"> to the page's <head> before you upload it.
• Take it down after the review. Click Unpublish on the page's dashboard screen.

See whether they opened it, and fix mistakes

Once the page is published, the dashboard counts its visits by day, with each visitor's country, device, and the site they came from, for the last 90 days on Free. It doesn't show names or email addresses, and your own visits count too, so note the number before you send the link. How to see who visits your page explains the numbers.

To fix something after you've sent the link, type the change into Improve with AI on the page's dashboard screen. It costs 1 AI credit on the default model, and Free accounts start with 10. Each change is saved as a new version with its own preview, and the live page changes only when you publish it. Uploading the file again creates a new page with a new address.

Frequently asked questions

How do I share an HTML file from VS Code?

Put the CSS and JavaScript inside the HTML file so the page is one file, upload it to a host, and send the link. On Convika, click Upload an HTML file, drop the file, click Create my preview, check the preview, and click Publish. VS Code's port forwarding can also give the page a public link, but that link works only while your computer and VS Code are running.

How do I share a VS Code project as a link?

For a project of one page, combine index.html, style.css, and script.js into one file and upload it, as this guide shows. For a project with several pages or a build step, run Publish to GitHub in VS Code and turn on GitHub Pages for the repository, or drag the folder onto Netlify Drop, claim it, and select Make public if your team starts projects private.

How do I combine HTML, CSS, and JavaScript into one file?

Replace the <link> tag for style.css with a <style> tag that holds everything in style.css. Then delete the <script src="script.js"> tag, and put everything in script.js in a <script> tag just before </body>. Images on your computer need a full https:// link, or a small image can go into the page as a data: address.

How do I share my VS Code project live?

It depends on who's looking. To edit or debug together, use Live Share: people join your session from VS Code or a browser. To show the running page on a phone on the same Wi-Fi network, set Live Server's liveServer.settings.host to 0.0.0.0 and open your computer's IP address on the phone, as Live Server's FAQ shows. For anyone else, forward the port as Public, which works while your computer and VS Code are running, or publish the page to a host for a link that stays up.

How do I save an HTML file in VS Code?

Press Ctrl+S (Cmd+S on a Mac), or choose File > Save. Give a new file a name that ends in .html, such as index.html. VS Code saves only when you ask it to, unless you turn on File > Auto Save, which saves your changes after a short delay.

How do I open an HTML file in a browser from VS Code?

Right-click the file in the Explorer and select Open in Integrated Browser, or select the Show Preview icon in the editor's title bar while the file is open, as VS Code's HTML docs describe. The preview updates as you edit. With the Live Server extension, right-click the file and select Open with Live Server, or click Go Live in the status bar. Each of these shows the page on your computer only.

Can you share HTML files?

Yes, as a file or as a link. A file sent by email or WhatsApp arrives as an attachment that the other person has to open in a browser, and style.css, script.js, and your images don't come with it unless you zip the whole folder. A link avoids both: the page opens in one tap. How to share an HTML file as a link compares the ways to do it.

How do I send a VS Code project to someone?

If they need the code, for example a teacher who grades it, send the project folder as a zip file. If they need to see the page working, send a link. When a teacher wants both, send the zip and the link together.

How do I host an HTML file for free?

Upload it to a host with a free plan. Convika's Free plan needs no card: 10 pages, 10,000 pageviews a month, 50 form entries a month, and 1 custom domain, with a small “Powered by Convika” badge. Publishing your first page also starts free days of Pro, no card needed. After they end, Pro costs $12 a month, or you go back to Free. GitHub Pages and Netlify also host for free and take a whole folder: GitHub Pages needs a public repository on GitHub Free, and a new Netlify team's projects stay private until you select Make public.