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 part of it. You have an index.html, a style.css, a script.js, and a folder of images. Everything works when you click Go Live. Now a teacher, a client, or friends need a link. The browser address http://127.0.0.1:5500/index.html opens only on your computer. This guide shows how to turn the project into one file and publish it on Convika's Free plan for a link that opens on any phone.

What VS Code's live and sharing features do

Each does a real job while you build. None keeps the page online after you close VS Code.

• Live Server is the extension by Ritwick Dey. It launches “a local development server with live reload feature for static & dynamic pages,” per its Marketplace page. It serves at 127.0.0.1 on port 5500 by default, which is your own computer. Its FAQ notes that you can open it 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 liveServer.settings.host to 0.0.0.0 in Live Server's settings.
• Live Preview is Microsoft's extension. It “Hosts a local server in your workspace for you to preview your webpages on,” per its Marketplace page.
• Live Share is for working on code together. It “enables you to collaboratively edit and debug with others in real time,” according to Microsoft's docs. When sharing 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 rather than open a web page.
• Port forwarding is built into VS Code. It can give the server on your computer a public address. Go to the Ports view, select Forward a Port, sign in with GitHub, and change Port Visibility to Public. Then “any user with your link can access the forwarded service,” per VS Code's docs. 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.” Because of this, the link works only while your computer, VS Code, and that server run. Microsoft notes that 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).

A public forwarded port can do for a quick look while you are at your computer. For a link your teacher opens tomorrow on a phone, the page must be on a host.

Make the project one file

Convika hosts one HTML file per page, up to 2 MB, so your CSS and JavaScript must sit inside that single file. When your code includes a tag like <link rel="stylesheet" href="style.css">, the browser tries to fetch style.css from the page's folder, but that file stays behind on your computer. In our test, uploading a project's index.html alone triggered a warning on the upload screen: “These files are on your computer, so they won't load online: style.css, logo.png, and script.js.” Even on your own Mac, a page that loads a type="module" script file or fetches a data file from its folder breaks when you double-click index.html instead of using Live Server: in a test on October 24, 2026, Chrome blocked both (How to open an HTML file on a Mac).

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; 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, select File > Save As, and name the new file share.html in the same folder. This keeps your original project untouched.

2. Paste the CSS into a style tag. Open style.css, press Ctrl+A to select everything, and press Ctrl+C to copy it (Cmd+A and Cmd+C on a Mac). In share.html, delete the line with <link rel="stylesheet" href="style.css">, type <style> and </style> in its spot, and paste your CSS between those tags. Do this for every stylesheet in the project. Leave any stylesheet with an address starting with https:// alone, such as Google Fonts or Bootstrap loaded from a CDN.

3. Paste the JavaScript into a script tag. Copy everything in script.js the same way. In share.html, delete the <script src="script.js"></script> line, and paste your code between <script> and </script> tags right before </body>. Place it there even if the original link was in the <head>, because the script will run after the buttons and lists on the page exist. Repeat this for each script file, putting each in its own <script> tag in the original order so dependencies load correctly. Leave any scripts that load from an https:// address as they are, like jQuery from a CDN. If a script uses type="module" to bring in other files with import, it will not run when pasted inside the page because those imported files remain on your computer. That kind of project belongs on a host from the section below.

4. Give each image an address. A tag like <img src="images/logo.png"> points to a file on your computer. If the image is already online, replace the path with its full https:// link. For a small image like a logo or an icon, you can embed the image directly into the page code. In VS Code, open Terminal > New Terminal and run the command for your operating system, swapping in your actual image path for images\logo.png on Windows or images/logo.png on a Mac. The command copies the image data as text straight to your clipboard.

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

   Copy code

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

   On a Mac:

   Copy code

   base64 -i images/logo.png | pbcopy
   

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

   Copy code

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

   Set the file type using image/ followed by the format, such as image/png for .png, image/jpeg for .jpg, image/gif for .gif, or image/svg+xml for .svg. You can use this same format inside url() in your CSS. Embedding an image this way makes it take about a third more space than the original file, and the full page must remain under 2 MB. Use a link for large photos instead.

Save share.html and open it in a browser to confirm that it looks and behaves just like the original project. The upload screen in step 3 below checks your code and flags any local files you missed.

If ChatGPT or Copilot helped write your code, you can 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.” Test the file it produces in your browser before uploading.

In our check on October 13, 2026, we combined a small project containing index.html, style.css, script.js, and a logo. It uploaded without any warning. On the live page, the styles from style.css displayed properly, the logo appeared, the script's add button and dark mode toggle worked, and the browser console showed zero errors.

What else to change

• Links to your other pages. A link pointing to about.html looks for another file in the folder. Convika serves one file per page at its own address, so a multi-page site needs a host that stores the whole directory; see when GitHub Pages or Netlify fits better.
• Files your script loads. If your script uses fetch() to read data.json, that call fails because the file does not live online. Paste the data straight into your script as a variable.
• Data from other websites. A Convika page only fetches data from its own address, so requests to external APIs, like a weather service, are blocked across all plans. Move projects that rely on outside APIs to a host covered in the next section.
• Fonts saved in the project. Switch any local font files to Google Fonts by using their direct https:// links.
• A contact form. A regular HTML form has no backend server to collect what visitors type. Replace your form markup with <div data-convika-form></div> before you upload. After uploading, click Add a form to my page in your dashboard, and Convika inserts a working form in that spot. The Free plan shows 50 submissions each month. Read the full walkthrough in How to make the form on your page work.

External stylesheets, web fonts, and scripts using https:// links continue to function on all plans, including Free. Inline onclick handlers and localStorage work without changes.

When GitHub Pages or Netlify fits better

Some projects are many files by design. These include a multi-page site, or a React or Vite project built with npm run build. Combining those by hand is not practical. A project calling another site's API needs a host that allows 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,” (GitHub's docs). In VS Code, Publish to GitHub from the Command Palette creates the repository (VS Code's docs), then turn on Pages in the repository's settings. On GitHub Free, the repository must be public. Review what it allows: GitHub Pages commercial use.
• Netlify Drop lets you “drag and drop a folder of files,”. 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). After claiming, select Make public before sending the link. Compare it against 6 other hosts: Netlify Drop alternatives.

Convika fits a one-page project: a portfolio, an assignment, a landing page, or a small app like a quiz or a to-do list. A Convika page can also have a password and a visit count (sections after the steps).

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. Save your project 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 requires no credit card and gives you 1 published page.

Upload the file

From your dashboard, click Upload an HTML file and open the Upload a file tab. Drop share.html there, or click Choose a file. The site accepts .html and .htm files up to 2 MB. 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 the screen says “Your preview is ready,” click Open preview. This private link works for 3 minutes, and clicking Open preview again gives you a new one. Nothing is public yet. Click every button, and type into every box. Open the link on your phone, too.

Publish and send the link

Click Publish page. Under Who can open this page?, choose Public and click Next. The first time you publish, Convika shows Publish free, and under it Publish without the Convika bar, which opens an order for Pro monthly (1 day free with a card, then $12 a month). To publish on Free, click Publish free. Your page is live at an address like yourpage.convika.page. Send that address on WhatsApp or by email. You can also post it wherever your teacher collects work. For Google Classroom, hand it in as a link rather than as a file. The link opens in 1 tap in any phone's browser, with no app and no account needed.

Share it only with your teacher or a client

Anyone with the link can open a published page without an account. On the free plan a page goes out as Public, so it may show up in search results and in Convika's gallery. Under Who can open this page? when you publish, choose Private link (Pro or pass) to tell search engines to keep it out of results, leave it out of your sitemap, and keep it out of the gallery. Use these options for a project meant for one teacher or one client:

• Add a password. When you publish, choose Only people with the password, type a password, click Next, and order Pro monthly (1 day free with a card, then $12 a month), or the 1-year pass ($29, paid once, no renewal) from the link under the order's button. On Pro, you can also add one later under Page password in Page settings with Add password. Visitors see a password screen first. Convika sends the page only after the right password. See what visitors see in How to password protect an HTML page.
• Keep it out of search results. Add <meta name="robots" content="noindex"> to the page's <head> before uploading. That tag doesn't keep the page out of Convika's gallery: once it is live, also turn on Don't show this page in the gallery in its Page settings (free on every plan).
• Take it down after the review. Click Unpublish on the page's dashboard screen.

Seeing whether they opened it and fixing mistakes

Once published, the dashboard counts visits by day. It shows each visitor's country, device, and the site they came from. You see the last 90 days on Free. There are no names or email addresses. Your own visits count too, so note the number before sending the link. The numbers are explained in How to see who visits your page.

To fix something after sending, type the change into Edit with AI on the page's dashboard screen. This uses 1 AI credit on the default model. Free accounts start with 10. Each change is saved as a new version with its own preview. The live page changes only when you publish. If you edited the file in VS Code, upload it under Update from an HTML file on the page's screen to keep the same address. Upload an HTML file in the dashboard makes a new page with a new address.

Frequently asked questions

How do I share an HTML file from VS Code?

Put your CSS and JavaScript inside the HTML file, upload that single file to a host, and share the link. On Convika, click Upload an HTML file, drop your file in, click Create my preview, check it, and click Publish page. Choose Public, click Next, and, the first time, click Publish free. VS Code's port forwarding can also give you a public link, but it works only while your computer and VS Code run.

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

For a one-page project, combine index.html, style.css, and script.js into one file and upload it to a host. For projects with several pages or a build step, use Publish to GitHub in VS Code and turn on GitHub Pages for the repository. You can also 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. Delete the <script src="script.js"> tag, and put everything from script.js inside a <script> tag right before </body>. For images on your computer, switch them to a full https:// link, or embed a small image directly into the page as a data: address.

How do I share my VS Code project live?

Your sharing method depends on who is viewing the project. To edit or debug together, use Live Share so people can join your session from VS Code or a browser. To view the running page on a phone on the same Wi-Fi, set Live Server's liveServer.settings.host to 0.0.0.0 and open your computer's IP address on your phone. For anyone else, forward the port as Public while your computer and VS Code run, or publish 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 select File > Save. Name any new file with the .html extension, such as index.html. VS Code saves only when asked, unless you turn on File > Auto Save to save 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 click the Show Preview icon in the editor title bar with the file open (VS Code's HTML docs). This preview updates as you edit. If you use the Live Server extension, right-click and select Open with Live Server, or click Go Live in the status bar. Each option shows the page on your computer only.

Can you share HTML files?

Yes, you can share an HTML file directly or send it as a link. Sending a file by email or WhatsApp gives the other person an attachment they must open in a browser. Your style.css, script.js, and images do not travel with it unless you zip the folder. A link avoids both steps and opens in 1 tap. You can see how these options compare in How to share an HTML file as a link.

How do I send a VS Code project to someone?

Send the folder as a zip file if the person needs your code, or send a link if they need to see it working. For instance, a teacher who grades your work needs the zip file. If your teacher asks for both, send the zip and the link together.

How do I host an HTML file for free?

Upload your file to a host that offers a free plan. Convika Free requires no card and includes 1 published page, 10,000 pageviews a month, 50 form entries a month shown (entries past that are kept and show on Pro), 1 custom domain, and a small Convika bar. Pro costs $12 a month. GitHub Pages and Netlify also host a whole folder for free. GitHub Pages requires a public repository on GitHub Free, and a new Netlify team's projects stay private until you select Make public.