Creating A Personal Profile Page With Itty.Bitty

Introduction To Itty Bitty

It’s hard to believe that you can render an entire web page worth of content directly in your browser from a simple link. Itty Bitty does just that, by compressing a particular set of HTML code into what is known as an HTML fragment. Then, when this link is opened by a User, it renders the fragment to the browser. Essentially making the link a website on its own!

So let’s just recap on this first paragraph.

  • All HTML & content is stored in the link itself.
  • Absolutely no server required for links to work.
  • No hosting to be paid for, no monthly fees.
  • Can be sent anywhere with ease.
  • Can be opened anywhere with a browser.

With this in mind, I thought it could be a great tool to create a unique personal profile which could be placed on your Social Media profile. Better yet, it could be sent to potential employers, and at the same time, impress them!

Examples of Itty Bitty in Action

On the About page of Itty Bitty, there are a handful of demonstration links to show you what it’s capable of. One of these is an actual app, namely a Calculator. This web-app is contained a single link and is able to calculate numbers on demand, so it’s also got some JavaScript in there too!

See the Calculator Web App Here

Another example from the same set of demos is a simple page of Poetry. I know this sound’s pretty boring compared to the last, but it’s another fair use-case. Maybe you want to send a poem to your crush, I don’t know!

See the Single Link Poetry Page Here

How To Use Itty Bitty

There are fortunately a few different ways to utilize this elegant piece of work. The first one is to simply flesh out the content directly on the Itty Bitty site, use the following link to start crafting your single link page.

The next is to paste your own HTML in that you’ve developed locally, in a text editor of some sort. Finally, and my favorite if I must say, is to paste in an embedded CodePen. The CodePen option is much more manageable and will give you an easy way to change it on-the-fly, no matter if you don’t have your personal computer.

So with all of the introduction understood, we can now build a Personal Profile page that will be in the form of a single link!

Building a Personal Profile Page (Inside a Link)

The following image is a screenshot of what I built earlier, and you can see it live with the following link – Dan Englishby Profile.

personal profile page example
Itty Bitty link rendered profile page

To build the page I am going to use CodePen, as this, in my opinion, is the most convenient way to do it. For those of you that haven’t used CodePen before, there’s nothing to worry about, it’s seriously intuitive. Follow the tutorial steps below.

Step 1 

  1. Start a new CodePen Template with the following link.
  2. Add a new title, something like My Personal Profile Page, in the top left corner of the Pen.
  3. Hit the save button (Top right) to generate a unique saved URL for the Pen.
  4. Next start to create your personal profile with HTML.
  5. If you want to add an image, I used ImgBB.com, which allows you to upload an image for embedding with a piece of HTML.
  6. Feel free to use my template here – https://codepen.io/DanEnglishby/pen/NeEzQV

So, up to now, you should have an HTML profile page set-up in a CodePen. If you want to copy and paste mine, either use the link above or use the following HTML & CSS snippets that were used.

HTML

<div class="container">
   <h1>Dan Englishby</h1>
   <h3>Personal Profile</h3>
   <a href="https://imgbb.com/"><img src="https://i.ibb.co/pdJfzx9/profile-picture.jpg" alt="profile-picture" border="0" /></a>
   <h4>About Me</h4>
   <p>Hi, I'm Dan Englishby, I have a huge passion for web-development and programming. I love to learn and thrive from challenges.</p>
   <h4>My Skills</h4>
   <div class="listFlex">
      <div>
         <ul>
            <li>PHP</li>
            <li>HTML</li>
            <li>CSS</li>
         </ul>
      </div>
      <div>
         <ul>
            <li>JavaScript</li>
            <li>JQuery</li>
            <li>C#</li>
         </ul>
      </div>
   </div>
   <h4>Social Media</h4>
   Catch me on Twitter - <a href="https://twitter.com/DanEnglishby">@DanEnglishby</a>
</div>

CSS

/*use-itty-bitty-template*/
body {background: #ececec;}
h1, h2, h3, h4, h5 {
  border-bottom: 1px solid #ccc;
  color: #3F51B5;
  padding-bottom: 8px
}
.container {
  margin: auto;
  width: 350px;
  text-align: center;
}
.listFlex {display: flex; justify-content: center;}

img {
  width: 100%;
}

Step 2

Now that the HTML is prepped and ready, it’s time to create the Itty.Bitty link itself. Follow the next steps to create it.

  1. Load up the following link – https://itty.bitty.site/edit
  2. Add a title at the top of the page, as demonstrated in Figure 1, below.
  3. Then go to your CodePen, find the Embedded button at the bottom of the screen and click it. Then click the HTML (Recommended) button, See Figure 2, below.
  4. Copy the HTML within the HTML pane.
  5. Open the Itty Bitty page again and paste the HTML in, and it should look like Figure 3, then quickly parses the HTML to look like Figure 4, below.
  6. Find the menu in the top right and press the Copy Link menu item and click it.
  7. Lastly, paste the link into your browsers URL bar.
  8. Your page will now load. See mine here – Dan Englishby Profile
  9. Lastly, but optional, is to use a URL shortener like Bitly, as these links are pretty big! Alternatively, you could use a link shortening tool that allows you to customize with something more descriptive. For example, tinyLink/MyProfile
add title to itty bitty
Figure 1. Add a Title
Figure 2. Get embedded HTML from CodePen
pasted code pen
Figure 3. Pasted HTML into Itty Bitty
parsed pasted codepen
Figure 4. Parsed HTML on Itty Bitty

Summary

So this really cool tool is unbelievably handy to have. This example shows a small insight into what can be done with it, but everyone will have there own ideas too. The fact you can have JavaScript in there too opens up a whole new world.

I would love to hear your comments on things you would like to create with it or things you have already built. And, as always, any problems with this tutorial, please drop me a message in the comments.

 

SHARE ON

The Author: Dan Englishby

Creating A Personal Profile Page With Itty.Bitty

You May Also Like

Leave a Reply

Your email address will not be published.