Jonathan Cutrell
I am the director of technology at Whiteboard, a company based in Chattanooga, TN. I hold a masters degree in Digital Media from Georgia Tech. I'm passionate about building incredibly useful and beautiful things, and inspiring others to do the same through teaching.
Latest Posts
  • Web Design
    HTML & CSS
    Easier Visual Data in the Browser With Variance ChartsVariance thumb
    Today, we will be diving into Variance Charts; a unique JavaScript based "grammer of graphics" which provides an abstract, declarative markup style to create what would otherwise be fairly complex charts. Read More…
  • Web Design
    HTML & CSS
    Build a Dribbble Portfolio Grid With Flexboxgrid and JribbbleFlexboxgrid dribbble
    Flexboxgrid is a new framework which allows you to combine the predictability and common language structure of a grid system with the flexibility and simplicity of flexbox. Today, we will walk through the basics of using Flexboxgrid, and use it to build a simple Dribbble feed. Let's get started!Read More…
  • Web Design
    HTML & CSS
    Build a Dynamic Grid with Salvattore and Bootstrap in 10 MinutesSalvatorre thumb
    Today, we will use Salvattore in combination with Twitter Bootstrap 3 to make a responsively awesome flowing grid structure.Read More…
  • Web Design
    Case Studies
    How They Did It: CrowdpilotCrowdpilot thumb
    Crowdpilot's landing page shows off just how simple and awesome SVG is in combination with JavaScript and CSS animations. In this tutorial, you'll learn how to recreate Crowdpilot's diagonal message rotator and curtain, plus we'll talk a bit about "flat" design and what it means to design digitally native elements.Read More…
  • Web Design
    Case Studies
    How They Did It: Apple’s “Elevating the Expedition”Ipad thumb
    We're tackling a big one today: Apple’s "Elevating the expedition" iPad marketing page. Apple have taken the concept of target audience very seriously in their decisions with this site. Let's dive in!Read More…
  • Web Design
    Workflow
    Three Simple Steps to Higher Output and Greater CreativityMike thumb
    The beginning of a new year is filled with a massive amount of energy and resolve, people setting out to find new ways of thinking and working that can bring them closer in line with their goals. This post is going to give you, a web designer and developer, both practical steps and conceptual advice to help you reach a higher level of output and a more consistent flow of creativity.Read More…
  • Web Design
    HTML & CSS
    Tricks with Flexbox for Better CSS PatternsFlex retina
    In this tutorial I'm going to explain the Flexbox module in CSS. We'll look at what it is, where it came from and how it could revolutionize the way you approach CSS layouts from now on.Read More…
  • Web Design
    HTML/CSS
    Creating Friendlier, “Conversational” Web FormsForm retina
    Web forms are constantly a hot topic when it comes to web design and user interaction. The reasons for this are vast, but one of the more obvious reasons is that forms are the most basic way for a user to input information into your application. In this article, we'll discuss a few techniques that allow your forms to respond to the user's input, while helping to obscure unnecessarily confusing or overwhelming elements.Read More…
  • Web Design
    Case Studies
    How They Did It: Typekit's New HomepageTypekit retina
    Typekit recently redesigned their homepage with some new services in mind. When Typekit joined Adobe, they set out to bring us a new way to handle fonts on the web. Not only did they create a fairly simple way to embed fonts on the web, but they have now officially launched a desktop sync option, which allows Creative Cloud subscribers to sync fonts to their computer directly from Typekit. This has been in a beta form for a while now, and provides a much easier route to local fonts than finding them elsewhere!Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Web Design
    Industry
    Web Design 2014: What to Watch Out For014 retina
    This year has been a brilliant year in web design. More than any other year perhaps, huge strides have been made towards the maturing of the field. Let's have a look at some of what we can expect for the future of web design as an industry.Read More…
  • Web Design
    Case Studies
    How They Did It: Haraldur "Halli" ThorleifssonHalli retina
    We'd make a safe bet that you've seen Haraldur "Halli" Thorleifsson's work in the wild. With major projects under his belt such as the Google+ information page, Google Drive information page, as well as working for Square, Pinterest, Microsoft and other high profile clients, Halli's work is everywhere. However, today we are focusing on his beautiful portfolio site, which you can see at haraldurthorleifsson.com.Read More…