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
    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…
  • Code
    Tools & Tips
    How to Collaborate On GitHubGithub collab retina preview
    If you don't already know, GitHub is an incredibly effective way to collaborate on development projects. Providing a place for anyone with an internet connection to have an avenue where they can share code with the world for free (not to mention the robust supporting tools for source inspection and easy viewing of commit histories). GitHub has been adopted by many large open-source projects as their primary home for collaboration and contribution. But how do you join in and contribute to a project? Sure, you know how to use Git to track changes to files and push those files to a server. But there are major benefits to getting involved in larger open-source projects, and GitHub is arguably the best place to start. Today, we will discuss a few rules of the road for collaborating on open source projects, and give you the knowledge and intuition you will need to get involved.Read More…