How to Create a Portfolio With Dribbble Shots in 4 Steps

I can show you how you can implement Dribbble’s library in 4 steps. Anything more is just additional set up of the actual portfolio website and that’s all up to you.

Below is a screenshot of a portfolio I created really quickly with the help of a Dribbble API library called Jribble.

How to Create a Portfolio With Dribbble Shots in 4 Steps

Step 1 – Setting Up the HTML

In order for you to have a simplistic single page portfolio, you still need some HTML markup. Because this tutorial is about the Dribbble API I’m making the portfolio as simple as I can to move this along for you.


<div id="intro">
  <h1>Hello there, I'm Paula</h1>
  <p>I'm a visual designer. I'd love for you to take a look around my portfolio!</p>

<div id="shots">
  <h2>The best of my work</h2>

<div id="about">
  <h2>A little about me</h2>
  <p>I do what I do today because when I was a young kid I wanted to be like daddy and make websites - he's a software engineer. I opened up Photoshop, made some weird neon pink and green design and said to him "Look! I made a website!" Keep in mind I was maybe 9. I meant to say "Look, I designed a splash page." My dad decided to correct me that it wasn't in fact a website. He proceeded to open up a text editor and showed me HTML and CSS so that I could make a legitimate website.</p>
  <p>I'd love to tell you I've been making websites ever since, but that's not the case. I studied front end development and visual design in school where I found out I can combine my passion of psychology and web design into an actual career. </p>
  <p>Today, I ensure that users' needs are met in a delightful way.</p>

<div id="contact">
  <h2>Let's work together!</h2>
  <p>I'm a social butterfly, you can find me on any of the following networks.</p>
    <li id="email"><a href="">Email</a></li>
    <li id="dribbble"><a href="">Dribbble</a></li>
    <li id="twitter"><a href="">Twitter</a></li>


In my portfolio, I will have four sections. An intro section where I say hello, below it will be my Dribbble shots, next an about section and a contact section at the end with a few links. No need for anything else here like a contact form.

How to Create a Portfolio With Dribbble Shots in 4 Steps 1

Step 2 – Adding Visual Design Through CSS

In between the style tags in your header, we need to add a few CSS rules. Mine are as follows:

  background-color: #bdc3c7;
  color: #767E83;

  width: 600px;
  margin: 100px auto;

  text-align: center;
  font-size: 1em;
h1, h2, h3, h4{
  color: #464B4D;
#shots, #about, #contact{
  margin-top: 75px;
  color: #446CB3;
  text-decoration: none;
  color: #030A24;
ul li{
  list-style: none;
  display: inline-block;
  margin: 0 10px;
  padding: none;
ul {
  margin: 0;
  padding: 0;

Skim through the CSS to see exactly what I did to style the design if you are curious. The whole point of this CSS is to make sure the page looks cohesive, not necessarily spectacular. There is, however one thing missing.

How to Create a Portfolio With Dribbble Shots in 4 Steps 2

Step 2.1 – Adding Google Fonts

I am using two Google Fonts in this design, Abril Fatface for the headings and PT Sans for the body text. In case you are unfamiliar with how to implement Google Fonts, I’m going to show you.

First, go to Google Fonts and pick out a couple or so typefaces. Once you’ve got that covered Google Fonts will generate a style link for you which you need to input in your page’s header section.

<link href='|Abril+Fatface' rel='stylesheet' type='text/css'/>

Next you need to specify what fonts you’d like to use within your CSS. Like I said, I’m using Abril Fatface for the headings and PT Sans for everything else. And, that’s it.

  font-family: 'PT Sans', sans-serif;
h1, h2, h3, h4{
  font-family: 'Abril Fatface', cursive;
How to Create a Portfolio With Dribbble Shots in 4 Steps 3

Step 3 – Importing the Jribbble library

Go to Jribbble’s website or Github page and read about it. What I’d like for you to understand is what it’s actually capable of. The library can import Dribbble shots in various ways like per users or popular shots, comments and even rebounds.

Step 3.1 Download Jribbble

First things first, you need to include two script tags within your header. The first is a call that makes jQuery possible and the second is a link to the JavaScript of the Jribbble library.

<script src=""></script>
<script src="js/jquery.jribbble-1.0.1.ugly.js"></script>

On Jribbble’s website is a big download button. Click on it and paste the code into your script tag within your header. This is a function that makes this whole library work on your site. It does magical things, just copy and paste.

(function(e){"use strict";e.jribbble={};var t=function(t,s){e.ajax({type:"GET",url:""+t,data:s[1]||{},dataType:"jsonp",success:function(e){e===undefined?s[0]({error:!0}):s[0](e)}})},s={getShotById:"/shots/$/",getReboundsOfShot:"/shots/$/rebounds/",getShotsByList:"/shots/$/",getShotsByPlayerId:"/players/$/shots/",getShotsThatPlayerFollows:"/players/$/shots/following/",getPlayerById:"/players/$/",getPlayerFollowers:"/players/$/followers/",getPlayerFollowing:"/players/$/following/",getPlayerDraftees:"/players/$/draftees/",getCommentsOfShot:"/shots/$/comments/",getShotsThatPlayerLikes:"/players/$/shots/likes/"},o=function(e){return function(){var s=[],o=e.replace("$",s.shift());t(o,s)}};for(var r in s)e.jribbble[r]=o(s[r])})(jQuery,window,document);

Step 3.2 – Pick the Right Snippet

What we want to do in a portfolio is most likely show off your specific shots. To do that, you’ll need to select the code snippet that does just that. As I told you, this library can do many things. You will paste this snippet in the scripts section again.

$.jribbble.getShotsByPlayerId('tylergaw', function (playerShots) {
    var html = [];

    $.each(playerShots.shots, function (i, shot) {
        html.push('<li><h3>' + shot.title + '</h3>');
        html.push('<h4>by ' + + '</h4><a href="' + shot.url + '">');
        html.push('<img src="' + shot.image_teaser_url + '" /></a></li>');

}, {page: 1, per_page: 10});

In order for this library to show off your shots replace ‘tylergaw’ with your Dribbble user name. I’d use paulaborowska but you’re neither me nor Tyler Gaw.

Step 3.3 – Adding the Correct HTML Markup

It’s hard to tell whether you’ve been successful in your implementations if you don’t have the right HTML setup. What’s missing is the id which the above JavaScript code utilizes to insert the Dribbble shots. You’re welcome to change its name later, but for now you need to add a div with an id shotsByPlayerId within your shots div.

<div id="shots">
  <div id="shotsByPlayerId"></div>
How to Create a Portfolio With Dribbble Shots in 4 Steps 4

Step 4 – Customize

The Jribbble library comes with some CSS. You can change the way your shots appear by creating custom CSS rules for the image. For instance, I’m removing the two lines of JavaScript that are responsible for the title and play name of the shots. My design doesn’t call for them. I can either change the JavaScript itself or add come CSS that disables those elements from showing up.

#shots #shotsByPlayerId h3, #shots #shotsByPlayerId h4{
  display: none;

Furthermore the default amount of shots in the snippet we took is 10 shots. That looks odd for my layout as it’s based on a factor of three. I’ve simply changed the number from 10 to 12.

}, {page: 1, per_page: 12});

In order to have the shots line up in a row I’ve disabled the default styling for a list item.

#shots #shotsByPlayerId li{
  list-style: none;
  display: inline-block;

Don’t be afraid of the code. Change it however you want in order for it to fit right into your design.

How to Create a Portfolio With Dribbble Shots in 4 Steps 5


And now, my design is done. As I told you it’s super easy to utilize Jribbble in order to show off your own Dribbble shots within your website. Tyler Gaw created an amazingly useful library.

How to Create a Portfolio With Dribbble Shots in 4 Steps 6

Pin It on Pinterest

Share This