Have you ever wanted to create a simple web page or an interactive business card that stands out but didn’t want or had the money to pay for hosting on such a simple page? If your answer was ‘yes’ to any of those scenarios or if you’d just like to learn more about itty.bitty.site then you came to the right place.

In simple terms an Itty Bitty Site is a website that is contained entirely in that website’s link. Instead of having a link guide you to a web page that gathers multiple files and then shows you that page, all you need to view an Itty Bitty Site is the link and a browser. No extra files. No extra processing(apart from the server hosting the itty.bitty.site domain). Just a simple link.
I find that it’s much easier to understand something by doing it, so let’s jump in and in three steps build a sleek and interactive business card app using itty.bitty.site.
NOTE: Our entire page(HTML, CSS, JS) will have to be smaller or equal to 2KBs. Don’t worry, I have some tricks to help reduce the size of our code

1 – HTML

First let’s create the HTML our business card. We are trying to get to this design:

So let’s start by writing the HTML. For this tutorial I’ll use Visual Studio Code in case you were wondering which editor was I using.

Copy this code and paste it on the itty.bitty.site editor. That’s where itty.bitty.site does its magic. 

<div class="container card"><div class="left"><div class="row"><span class="content"><img class='profile' src='http://easysoftwaredeveloper.com/wp-content/uploads/2018/11/john-smith.jpg'></span></div><div class="row"><span class="content name">John Smith</span></div><div class="row"><span class="content email">jsmith@bananaland.com</span></div><div class="row"><span class="content number">+1-202-555-0113</span></div><div class="row"><span class="content address">4697 Woodrow Way, Huntsville, Texas</span></div></div><div class="right"><div class="row"><span class="bananaland">Bananaland</span></div><div class="row"><span class="content est">est. 2018</span></div><div class="row"><span class="content"><img class="banana" src="http://easysoftwaredeveloper.com/wp-content/uploads/2018/11/banana.png"></span></div></div></div>

Keep the editor open because we still need it for the next steps.

2 – Styling

Now let’s add some beautiful CSS to make our page look the way we want it to.

You want to copy this code and paste it at the bottom of the code that you already had(from step 1) on the itty.bitty.site editor. 

<style>@import url('https://fonts.googleapis.com/css?family=Satisfy');.content{width: 50%;display:block;text-shadow: 0px 3px 9px rgba(0, 0, 0, 1);
color:#fcff00;margin: 0 auto;}.bananaland{font-size:90pt;color:#fcff00;
text-shadow: 0px 3px 9px rgba(0, 0, 0, 1);
}
.name{font-size:20pt;}.number{font-size:16pt;}.est{font-size:15pt;text-align:center;}.email{font-size:12pt;}.address{font-size:14pt;}.card {background: #fff;border-radius: 2px;display: inline-block;height: 300px;margin: 1rem;position: relative;width: 300px;box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);transition: all 0.3s cubic-bezier(.25,.8,.25,1);}.card:hover {box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}.container{cursor:pointer;font-family: 'Satisfy', cursive;margin:0 auto;width:851px;height:329px;content: "";display: table;clear: both;background:url("https://www.toptal.com/designers/subtlepatterns/patterns/bananas.png");
}.banana{width:100%;}.profile{width:125px;height:112px;margin-top:20px;}.row{height:auto;width:100%;text-align: left;box-sizing: border-box;clear: both;float: left;}.left, .right{float:left;}.left{width:30%;height:100%;background-color: rgba(255, 255, 255, 0.59);
}.right{width:60%;height:100%;
padding:30px;}</style>

Awesome! You have just created an itty.bitty.site! But now let me show you some really cool ways we can optimize our code so that we use less bytes on our page.

3 – Size reduction

Now that we have our page all nicely designed, we can actually apply some techniques that will make our code even smaller so that we can fit more into out Itty Bitty Site.
We’ll start by 
Now we can using a tool to shorten the links we have on our web page to save some bytes. I’m gonna be using bitly.com , which you have probably already seen somewhere, just pay attention to the changed links.

This change moved our byte count from 1291 to 1187, a modest 8%(the tool I use to calculate percentages because I’m to lazy to write it down and calculate 😁) improvement.

Let’s see if we can improve that by minifying the code using willpeavy  ….and we only get a 2% size reduction, which isn’t really worth the downgrade in readability as you can see.

Those aren’t really the best ways to shave off size off of a file, there are a few better ways to do so but I would like to leave those up to you guys. Comment down below, to which byte count did you manage to get the code down to and how you did it.

Finally we can generate a QR code and start sharing our interactive Itty Bitty business card with the world!

Just grab your phone, fire up your favorite QR Scanner and scan the code below.

Thank you for reading, I hope this article was helpful and I’ll see you in two days with a new article! 👍