In this hands-on workshop, you'll build a real website from scratch — using only free, open-source tools. No experience needed. By the end, your site will be live on the internet!
Everything you need — $0 total cost!
HTML (hüperteksti märgistuskeel) on iga veebilehe struktuur. See ütleb brauserile, millist sisu näidata: pealkirju, lõike, pilte, linke ja nuppe. Mõtle sellest kui skeleton of your site.
Every HTML element uses tags: an opening tag <h1> and a closing tag </h1>. Sisu läheb nende vahele.
<h1> to <h6> = Headings (h1 biggest, h6 smallest)
<p> = Paragraph
<a href="..."> = Link
<img src="..."> = Image
<ul> / <li> = List
<div> = Container (group things together)
<button> = Button
👇 Try editing the code below and click "Run"!
Change [YOUR NAME] to your actual name. Add more items to the list. Change the emoji! Then click Run.
CSS (kaskaadlaadistik) on skin and clothes of your website. It controls colors, fonts, sizes, spacing, layout — everything visual. Without CSS, every website would look like a boring text document!
color = Text color
background = Background color or image
font-size = Text size
font-family = Font style
padding = Space inside an element
margin = Space outside an element
border-radius = Rounded corners
text-align = center, left, right
Change the background color of the body. Change the color of h1. Add your own tags. Make the button a different color!
JavaScript is the brain of your website. HTML is the skeleton, CSS is the skin — and JS makes it do things. Klõpsa nuppu, näita või peida sisu, muuda värve, arvuta, loo mänge — JavaScript teeb selle kõik võimalikuks!
Lisa uus nupp, mis kuvab juhusliku emotikoni! Lisa loendur, mis suureneb iga klõpsuga. Proovi teha täring 20-tahuliseks!
Ühendame HTML-struktuuri, CSS-kujunduse ja JavaScripti interaktiivsuse terviklikuks isiklikuks veebileheks! Muuda all koodi ja tee see enda omaks.
You just built a complete personal portfolio website! It has a hero section, about me, projects, and links — all styled beautifully. This is a REAL website that you can publish on the internet!
Your website is ready. Now let the world see it!
Push your code to GitHub, enable Pages in settings — your site is live at yourname.github.io! Kõige levinum viis avatud lähtekoodi arendajate seas.
💚 100% FreeDrag and drop your files — instant website! Automatic HTTPS, custom domains, and it's incredibly fast.
💚 Free tierCreated by the makers of Next.js. Perfect for more advanced sites. Push to GitHub = automatic deployment.
💚 Free tierNagu GitHub Pages, kuid täielikult mittetulunduslik ja kogukonna omandis. Ettevõtete jälgimiseta. Tõeliselt avatud lähtekoodiga.
💚 100% Free & OpenfreeCodeCamp.org — Full HTML/CSS/JS course (300+ hours, free!)
TheOdinProject.com — Full-stack web development curriculum
KhanAcademy.org — Interactive intro to HTML/CSS/JS
MDN Web Docs (developer.mozilla.org) — parim veebitehnoloogiate teatmeallikas
HTML/CSS → JavaScript → React or Vue → Node.js → Databases → Full-Stack Developer! And every single tool in this journey is free and open source. Veeb rajati avatud standarditele — ja nüüd oled sina osa sellest!
«عَلِّمُوا وَلَا تُعَنِّفُوا»
„Õpetage ja tehke see lihtsaks.“ — Veeb on mõeldud olema avatud. Sinu veebisait on nüüd avatud veebi osa. Jaga õpitut! ✨