CSS

/* Controls width of the widget */
.badge-container {width:700px; margin: 0 auto;}

/* Makes Badges display inline */
#badges li { display: inline;}

/* Controls badges row offset */
#badges li:nth-child(20n+11) {margin-left:30px;}

/* Controls badges size and alignment */
#badges li img {
  width: 60px; 
  margin:-17px 2px 0px 0px;
}

/* Controls Header Formatting */
.badge-container h1 {
  text-align:center; 
  font-family: 'Helvetica Neue'; 
  font-weight: bold; 
  -webkit-font-smoothing: antialiased;
}

/* Controls badges on-hover opacity */
#badges li img:hover {opacity:.7;}

HTML

<!-- Badges Container -->
<div class="badge-container">
  
  <!-- Title Markup -->
  <h1 id="treehouse-count"></h1>
  
  <!-- ul tag where badge li's are appended -->
  <ul id="badges"></ul>
</div>

JQuery

// When Document is ready, build treehouse Badge Widget 
$(document).ready(function () {

  // Replace the value for var 'e' with your      Treehouse Username
  var e = "rileyhilliard",
  
  // Treehouse Json 
  t = "http://teamtreehouse.com/" + e + ".json",
  
  // Badges JQuery Identifier    
  n = $("#badges"),
  
  // Badges Array    
  r = [],
  
  // Badges Count
  i = 0;
  
  // Json Parse Treehouse User Badges Info
  $.getJSON(t, function (e) {
    
    // User Json Parse Select Badges Info
    var t = e.badges;
    
    // Format Each badge's HTML
  	$.each(t, function (e, t) {
  	 r += '<li><a href="' + t.url + '" target="_blank"><img src="' + t.icon_url + '" alt="' + t.name + '" title="' + t.name + '"/></a></li>';
  		i++
  	});
    
    // Append Badge to #badges
  	n.append(r);
    
    // Header Badges count generator
  	$("#treehouse-count").append('I have earned ' + i + ' badges at Treehouse!');
  });
});