Polish & Publish for Free
Your site works. Now make it feel finished, make it easy for everyone to use, and put it online with a real link you can share. Total cost: zero.
In this chapter you will
- Polish your site with a 10-point checklist
- Make it readable for everyone: accessibility and color contrast
- Publish it for free and get a real web address
- Update it later and share it with a QR code
The 10-point polish checklist
Professional websites are not perfect on the first try. They are checked. Go through this list with your own site. Your ticks are saved in this browser.
Quick trick: an emoji favicon
A favicon is the tiny icon in the browser tab. You don't need an image file: paste this line inside the <head> of your page and change the emoji. It works in most modern browsers.
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎬</text></svg>">Why “don't change the code yet”? Because you decide what to fix. Then fix one thing at a time, and check after each change.
Accessibility: a website for everyone
Accessibility (often written a11y: “a”, then 11 letters, then “y”) means that everyone can use your site. That includes people who are blind or have low vision, who are color-blind, who can't use a mouse, or who are reading on a small phone in bright sunlight.
- It's a lot of people. EU estimates say about 1 in 4 adults in the EU lives with some form of disability.
- It helps everybody. Bright sunlight, a broken arm, tired eyes, older relatives: good contrast and clear structure help all visitors.
- It's the law for many sites. Since June 2025, the European Accessibility Act requires many online shops and services in the EU to be accessible.
- Search engines like it too. Clear headings and alt text help them understand your page.
4 quick wins
Strong contrast
Dark text on a light background, or the opposite. Light grey on white looks stylish, but many people can't read it. Test your colors with the checker below.
Alt text on images
<img src="stage.jpg" alt="Students dancing on a stage">. A screen reader (software that reads the page aloud for blind users) reads this text instead of the image.
Real headings, buttons and links
Use h1–h3 in order and <button> for actions. Link text should say where it goes: “See the schedule”, not “click here”. Screen reader users jump between these.
Works with a keyboard
Press Tab to move through your page. Can you reach every link and button? Can you see where you are (a visible outline)? Does Enter click?
Try it: contrast checker
Contrast is the difference in brightness between text and background. It's written as a ratio, from 1 : 1 (invisible) to 21 : 1 (black on white). The international accessibility guidelines (WCAG) ask for at least 4.5 : 1 for normal text and 3 : 1 for large text.
Please use a hex color code, like #1f1140 or #fff.
Film Night 🎬
Friday 9 October at 19:00. Free popcorn, bring a friend!
Small print: doors open at 18:45.
Excellent: easy to read for almost everyone.
- Normal text · needs 4.5 : 1–
- Large text · needs 3 : 1–
- Extra strong (AAA) · needs 7 : 1–
“Large text” means about 24px and bigger, or about 19px when it's bold. When in doubt, aim for 4.5 : 1 everywhere.
Publish for free
Right now your website is a file on your computer. Only you can see it. Publishing (also called deploying) means copying it to a host: a computer that is always online and gives your site a public address, a URL.
Your DigiBot site is a static site: just files (one HTML file with the CSS and JavaScript inside), no database and no server code. Static sites are simple and fast, and many hosts publish them for free.
First: why the name index.html matters
When someone visits film-night.netlify.app, they don't type a file name. The host automatically looks for a file called index.html: it's the front door of your site. If your file is called my-digibot-site.html, visitors see “Page not found”.
- All small letters:
index.html, notIndex.HTML. - Nothing extra: not
index (1).htmland notindex.html.txt. - At the top of your folder, not inside another folder.
Windows tip: show the full file name Windows often hides the end of file names (the extension). Then renaming a file to index.html secretly gives index.html.html! In File Explorer, turn on File name extensions: on Windows 11 it's under View → Show, on Windows 10 in the View tab.
Pick a free host
| Host | Account needed? | How you upload | Your free address |
|---|---|---|---|
| Netlify Drop | Yes (free). Without one, your link is locked and deleted after about 1 hour. | Drag & drop a folder | name.netlify.app |
| GitHub Pages | Yes (free) | Upload files in the browser | username.github.io/repo |
| Cloudflare Pages | Yes (free) | Drag & drop a folder | name.pages.dev |
No Git: just drag and drop. You need a free account. About 3 minutes.
- Download your site from DigiBot In DigiBot Studio, click the download button (⬇ .html) in the bar above your preview. You get one file called
my-digibot-site.html. - Rename it to
index.htmlAll small letters, no spaces. Check that it didn't becomeindex.html.html(see the Windows tip above). - Put it in a folder Create a new folder, for example
film-night, and moveindex.htmlinto it. If your site uses image files, put them in the same folder. - Create a free Netlify account and log in Sign up at app.netlify.com, for example with your email address. The free plan is enough for this workshop.
- Drag the folder onto app.netlify.com/drop Open app.netlify.com/drop while you are logged in. Drag the whole folder (not only the file) into the drop area. Wait a few seconds while it uploads.
- Make it public New Netlify accounts keep sites private at first: other people only see a “no access” page. Click Make public. Can't see the button? Open Project configuration → General → Visitor access and choose public. (Netlify calls your site a project.)
- Give it a good name Netlify picks a random address like
random-words-123abc.netlify.app. In Project configuration → General → Project details, change the project name, for example tofilm-night-izmir. Names must be unique, so add your city or initials. Your link becomeshttps://film-night-izmir.netlify.app. - Test your live link Open it on your phone, where you are not logged in to Netlify. Do you see your site? It's on the internet! 🎉
Dropped your folder without logging in? Then the link is locked with a temporary password, and Netlify deletes the site after about one hour unless you sign up and keep (claim) it.
Free and reliable, from GitHub (a website where developers keep their code). A few more clicks, but you learn a real developer tool. About 5 minutes.
- Create a free account Sign up at github.com and confirm your email address.
- Create a new repository A repository (or repo) is a project folder on GitHub. Click + (top right) → New repository. Name it, for example,
film-night. Choose Public and click Create repository. - Upload index.html On the new repo page, click uploading an existing file (or Add file → Upload files). Drag in
index.htmland any images. Click Commit changes (this means “save”). - Turn on Pages Open Settings (tab at the top of the repo) → Pages (left menu). Under Build and deployment, set Source to Deploy from a branch, Branch to main and the folder to / (root). Click Save.
- Wait 1–2 minutes, then refresh The Pages settings show “Your site is live at…”. Your link looks like
https://your-username.github.io/film-night/.
Free GitHub Pages sites live in a public repository, so everyone can see your code. That's normal for websites, but never put secrets in it. Tip: if you name the repo your-username.github.io, your site lives at https://your-username.github.io.
Cloudflare runs a huge network that makes sites fast all over the world. Its Pages service also has drag-and-drop upload. About 5 minutes.
- Create a free Cloudflare account Sign up and log in at dash.cloudflare.com.
- Find the upload option Go to Workers & Pages → Create application. Choose the Pages option (Get started), then Drag and drop your files. Cloudflare changes this screen often, so look for the words Pages and drag and drop.
- Name your project and upload Give it a name like
film-night, drag in your folder and click Deploy site. - Get your link Your site is live at
https://film-night.pages.dev(with your project name).
Screens change, the idea stays the same Websites update their buttons and menus all the time. If a step looks different, look for similar words, or ask AI: “I'm on the Netlify page and I see … What do I click to …?” Other free hosts exist too (for example Vercel's free Hobby plan), but they work best with Git. For today, one of these three is perfect.
Everything you publish is public Anyone can read all of your site's code. Never put passwords, API keys (secret codes for online services, like the Mistral key you use in DigiBot), private phone numbers or home addresses in it. If your key ever ends up online, delete it in the Mistral console and create a new one: Get your own key shows how.
Free address or your own domain?
A domain is the name people type in the address bar. You have two options:
Free subdomain
For example film-night.netlify.app or name.github.io. You get it automatically.
- Costs nothing
- Ready in seconds
- Perfect for projects, portfolios and this workshop
Your own domain
For example filmnight.eu. You rent it from a domain registrar and pay every year.
- The price depends on the ending (.com, .eu, .com.tr …)
- You connect it in your host's settings (called DNS, the internet's address book)
- Nice later, if your project grows
Watch out for “free domain for the first year” offers: always check the price for the next years before you buy.
Update your site later
Changed something in DigiBot? Download it again, rename it to index.html and upload it the same way. Your link stays the same.
- Netlify: open your project in your Netlify account. Under Production deploys, drag the new folder into the drop area.
- GitHub Pages: in your repository, click Add file → Upload files, drag in the new
index.html(same name!) and click Commit changes. Wait 1–2 minutes. - Cloudflare Pages: open your project, choose Create a new deployment and upload the folder again.
Netlify's free plan gives you a monthly amount of free credits, and every upload uses some of them (today that's enough for about 20 uploads a month). So collect your changes and upload once, not after every tiny edit. Free plans change often, so check your Netlify account.
Don't see your change? Your browser may show an old saved copy (the cache). Do a hard reload: Ctrl + F5 or Ctrl + Shift + R on Windows, ⌘ Cmd + Shift + R on Mac.
Keep old versions. Before you rename a new download, save a copy like film-night-v2.html. Then you can always go back.
Share it with a QR code
A QR code is a square barcode that phone cameras can read. It's perfect for posters, slides and flyers: people scan it and your site opens.
- Copy your live link For example
https://film-night-izmir.netlify.app. - Open a free QR code generator There are many. Search for “free QR code generator”.
- Paste your link and choose a static QR code A static code contains your link directly.
- Download it PNG is fine for screens. SVG stays sharp when you print it big.
- Test it with two different phones before you print or share it.
Avoid “dynamic” QR codes Some sites send your visitors through their own link first, and the code stops working when a free trial ends. A static code works forever, even if the generator website disappears.
Your publish checklist
Quick check
You uploaded a folder with your file my-final-site.html, but your new link shows “Page not found”. Why?
The contrast checker shows 3.2 : 1 for your normal paragraph text. What does that mean?
Do you need to buy a domain to publish your site?
Your turn: polish it, publish it, share it 🚀
Go back to DigiBot Studio. Fix the points from your checklist, one small prompt at a time. Then download your site, publish it and share your link with the group. In the next chapter you'll learn to use AI responsibly.