Hoe maak je een hosting-gratis website met Itty Bitty

Met programmeren kent online creativiteit geen grenzen. Elke dag gebruiken programmeurs op internet hun vaardigheden om kleine projecten voor het publiek te maken. Itty Bitty, een website gemaakt door voormalig ontwerper voor Google en huidige vice-president bij Dropbox Nocholas Jitkoff, is zo'n klein project.

Met behulp van de Itty Bitty-site kunt u een kleine HTML-website gratis maken, zelfs als u geen webhosting heeft.

Een Itty Bitty-verklaring

Hier is hoe het werkt: itty.bitty.site maakt kleine sites door ze via hun URL's te laden. Met andere woorden, uw site wordt opgeslagen en gepresenteerd binnen de link.

Vanwege dit, websites gemaakt met Itty Bitty vereisen absoluut geen webhosting. De URL zelf bevat de volledige gegevens van de site: hoe het eruit ziet, wat het zegt, enz.

U zult merken dat zodra u uw Itty Bitty-link ontvangt, deze een beetje groter is dan normaal. Dat is uw hele website.

Link voor link

De eigenlijke site gemaakt door Itty Bitty heeft een zeer minimale interface. Houd er rekening mee dat elke extra pagina op de site wordt gemaakt met behulp van de site zelf.

Vanaf deze pagina kunt u meteen beginnen met het gebruik van eenvoudige HTML voor het maken van een eenvoudige pagina.

Als u een meer robuuste Itty Bitty-site wilt maken, kunt u een HTML-document rechtstreeks naar de website slepen en neerzetten of een bestaand project direct in de prompt koppelen.

Hoewel uw document of link andere programmeertalen zoals CSS of JS kan gebruiken, worden ze nog steeds geladen met uw Itty Bitty-site. Dat gezegd hebbende, het belangrijkste voordeel van het gebruik van Itty Bitty (en de centrale reden dat het vanaf een adres kan worden geladen) is dat uw pagina onder een bepaald, klein formaat moet worden gehouden.

Hoe klein is een itty bitty-site?

Als Itty Bitty gratis is en geen webhosting vereist, hoe groot kan uw site dan zijn? Het antwoord: niet erg.

De site geeft de grootte van uw website aan u weer in de rechterbovenhoek van het venster. Hoewel sites kunnen variëren in grootte, betekent dit ook dat uw link ook in omvang zal fluctueren. Sommige sites staan ​​niet toe dat u links groter dan een paar bytes deelt, wat uw mogelijkheid om grotere sites te delen kan beperken.

Gelukkig heeft de maker de max. Bytegroottes die mogelijk zijn voor veel populaire platforms gepost om uit te leggen in welke maten verschillende platforms passen:

Als u bijvoorbeeld een website wilt inkorten met Bitly, moet u een heel kleine website maken. Dat geldt ook voor Microsoft Edge. Als u echter alleen wilt delen via verschillende browsers, kunt u een veel grotere site maken.

Van Link naar Itty Bitty-site

Hoewel je ook Itty Bitty-sites kunt maken door HTML-bestanden direct erin te plaatsen of door de inhoud van de site rechtstreeks in te voeren, zal ik demonstreren met een Codepen-project dat eerder door Dudley Storey was gemaakt.

Codepen is de gemakkelijkste manier om uw site te maken met Itty Bitty. Codepen biedt gebruikers zowel een eenvoudig te gebruiken ontwikkelaaromgeving als een gemakkelijk koppelingsproces.

Het bovenstaande is een fantastisch voorbeeld van hoe een sterke HTML-backbone - en andere subtiele programmeeradressen - een eenvoudige website kunnen maken. Gelukkig is het ook klein genoeg om op veel van de hierboven genoemde platforms te delen.

Om een ​​Codepen-project in een Itty Bitty-site om te zetten, plakt u de link van de Pen in de Itty Bitty-site. Beweeg de muis vervolgens over het grijs untitled sectie en bewerk de tekst om uw site weer te geven.

Klik vervolgens op de menu in de rechterbovenhoek van het venster.

Hier maak je de link naar je Itty Bitty. Hoewel het misschien niet lijkt alsof u zojuist een website hebt gemaakt, heeft u dat wel gedaan!

Als u eenmaal op de Kopieer link optie, kunt u de link in uw browser plakken om de site te bekijken. Belangrijk om op te merken: standaard kunnen Itty Bitty-sites worden verzonden via QR-code.

Dat biedt een hele reeks opties, zoals het toevoegen van een fysieke referentie voor verloren apparaten.

Gefeliciteerd, u hebt nu een kant-en-klare website die serverloos en gratis is!

Verkort uw Itty Bitty Link nog verder

U kunt ook een overzichtelijke koppeling maken met behulp van een verkortingshulpprogramma voor koppelingen. Ik zal Bitly gebruiken, waarmee u niet alleen koppelingen kunt inkorten, maar ook kunt u de link aanpassen met uw eigen tekst als u zich aanmeldt voor een gratis account.

Ons originele Codepen-voorbeeld is te groot om te comprimeren met Bitly, dus hier is nog een fantastisch project van JT Helms. Ik volgde eenvoudigweg het bovenstaande proces om deze pen om te zetten naar een Itty Bitty-site.

Zodra je je link hebt, ga je naar Bitly. Plak je link in de splash-pagina van Bitly of log in op je account en selecteer de creëren knop. Voer je link in de volgende prompt in.

Nadat u uw link heeft geplakt, wordt deze automatisch geconverteerd. Pas vervolgens uw link aan zoals u dat wilt, met behulp van de editor van Bitly als u bent ingelogd.

Ik verander de initiële link naar ITTYBITTYEXAMPLE. U kunt nu naar bit.ly/ITTYBITTYEXAMPLE gaan zoals elke andere site, behalve dan dat het gratis is en geen webhosting of serveronderhoud vereist..

Beveiliging voor Itty Bitty-sites

Hoewel dit een coole en ingenieuze manier is om kleine HTML-sites te maken, is het niet zonder gebreken. U kunt een Itty Bitty-site net zo gemakkelijk misbruiken als elke andere. Dat betekent dat sites u kunnen irriteren met functies zoals waarschuwingen.

Aangezien de site zich nog in een experimentele fase bevindt, vertrouwt u niet noodzakelijkerwijs op de site als een belangrijke methode om een ​​veilige aanwezigheid op het web te creëren.

De Itty Bitty-mogelijkheden zijn eindeloos

Creativiteit die online wordt gevonden, is vaak indrukwekkend. Zelden is het echter zo eenvoudig, toegankelijk en gemakkelijk te gebruiken als Itty Bitty. Wilt u een kleine applicatie presenteren? Knutselen met div-elementen? Het is allemaal goed te doen met de Itty Bitty-site.

Bovendien ben je niet beperkt tot een bepaald aantal of sites. Maak een notitie van de maker van de site, Nocholas Jitkoff, en koppel een site binnen een site voor een uitgebreide verklarende website met meerdere pagina's. Of maak een ASCII-bulldog. De mogelijkheden zijn klein, maar eindeloos, dus probeer dit kleine online experiment vandaag nog uit!

Ga verder en maak nog betere sites door uw kennis van HTML en CSS te verbeteren. Leer HTML en CSS met deze stap voor stap zelfstudies Leer HTML en CSS met deze stapsgewijze handleidingen Benieuwd naar HTML, CSS en JavaScript? Als je denkt dat je de gave hebt om vanaf nul te leren hoe je websites kunt maken - hier zijn een paar geweldige stap-voor-stap tutorials die het proberen waard zijn. Lees meer voordat u een Itty Bitty-site maakt! Of bekijk onze InMotion Hosting beoordeling De complete InMotion Web Hosting Review voor beginners De complete InMotion Web Hosting Review voor beginners Heeft u behoefte aan betrouwbare webhosting? Onze InMotion Hosting-beoordeling zal onthullen of de service een goede keuze voor u is. Lees meer voor een andere manier om uw site te hosten.

Ontdek meer over: HTML, Webontwikkeling.