Nick Pettit
Treehouse Teacher
Orlando
Open to Work
Nick was the first teacher to join Treehouse. Since 2010, he has created dozens of courses on web development, game development, and VR. In his free time, Nick works on independent video games and helps organize the Orlando Virtual Reality meetup.
Topics & Specialties
Courses & Workshops I've Taught
-
Course
- 1
- 2
Designing Layouts
In this course, you'll learn how to apply design principles through a series of examples. Each example will include some component that can be improved, and by making the improvement, you'll develop strong aesthetic sensibilities about things like visual and typographic hierarchy, the use of grids and alignment in layouts, and how to choose colors.
-
8 minPractice
Practice Journey Maps
Journey maps are a helpful tool for UX designers that can articulate pain points that stand between a user and their intended goal. This practice session will help you analyze an experience and identify areas for improvement.
Viewed -
7 minPractice
Practice Empathy Maps
Empathy maps can help UX designers identify with users and understand their needs.
Viewed -
5 minPractice
Practice Design Criticism
One of the most important skills to have as a UX Designer is the ability to give and receive feedback on a project. This practice session will help you apply your critiquing abilities.
Viewed -
Course
- 1
- 2
Visual Design Foundations
In this course, you'll build your design vocabulary and learn how to describe the basic building blocks of any visual image. We'll start by learning about the elements of design, like line, shape, and form. Then we'll move on to the principles of design, like balance, harmony, and movement. By the end, you'll have a better foundation for discussing design with other team members and you'll be able to make objective observations about what is often subjective subject matter.
-
2 minPractice
Practice Completing a Profile
Often when you register for a service, you're just asked for your email address and a password. But websites and apps that are heavily driven by your personal information often need a lot more. In this practice session, you'll create a UI that persuades users to enter more information.
Viewed -
3 minPractice
Practice Creating a Paywall
Websites that are content-driven will often need to balance paid content and free content. One way to do this is to give a free preview in the form of a UI pattern called a paywall.
Viewed -
4 minPractice
Practice Designing a Product Card
Cards are a common UI pattern used to create reusable elements that can be used in multiple contexts.
Viewed -
Course
- 1
Design Criticism
One of the most important parts of design is being able to talk about it with other people. Giving feedback and communicating suggested changes is key to moving forward with people and businesses. In this course, you'll learn how to formulate constructive criticism and talk objectively about the subjective topic of design.
-
Course
- 1
- 2
- 3
Prototyping with Adobe XD
Adobe XD is a visual prototyping tool for PC and macOS. In this course, you'll learn how to use Adobe XD by building a mockup for a travel booking app. By the end, you'll be able to create interactive prototypes that can be shared with others.
-
11 minWorkshop
HTML Dialog
Dialog boxes are a common design pattern across many websites, so the W3C created the
<dialog>element as part of the HTML standard. In this Workshop, we'll learn how to use the<dialog>element in combination with JavaScript to trigger modal and non-modal windows.Viewed -
Course
- 1
- 2
- 3
Machine Learning Basics
Machine learning encompasses many different ideas, programming languages, frameworks, and approaches to the subject, so the term "machine learning" is difficult to define in just a sentence or two. But essentially, machine learning is giving a computer the ability to write its own rules and learn about new things, on its own. In this course, we'll explore some of the big ideas, and toward the end, we'll even write a little bit of code in Python that can make some intelligent predictions.
-
Course
- 1
- 2
- 3
Prototyping with Figma
In this course, you'll learn how to build interactive and sharable prototypes in Figma, a web-based visual prototyping tool. You'll create a prototype for a "prosumer" mobile photography app, and by the end, you'll have a better understanding of how to create interactive prototypes that can be shared with project stakeholders and team members.
-
Course
- 1
- 2
Prototyping in the Browser
Before you design a website, it's important to have some kind of a plan or a wireframe to guide your efforts. But sometimes when you go from a simple sketch to digital pixels, the results aren't exactly what you expect. When you work with real HTML and CSS, and you're able to see your site on a real screens, you're able to see a more accurate representation of the final result. In this course, we're going to build a website prototype using the Bootstrap web framework.
-
Course
- 1
- 2
Web Design Process
Going from a blank screen to a finished website can be daunting. In this course, you'll learn about the major steps involved in designing websites. We'll learn how to gather information, explore potential concepts, and iterate on a design. By the end, you'll have the foundation you need to continue your design journey.
-
Course
- 1
- 2
HTML Video and Audio
Text and images have always been the foundation of web content, but more than ever, video and audio are also a part of that content mix. Fortunately, we can now create standards-based video and audio players that don't require the use of plugins. Adding video and audio to a webpage is almost as easy as adding an image or formatting some text.
-
26 minWorkshop
Using Treehouse Workspaces
Workspaces is an online text editor and development environment that is integrated with Treehouse. In other words, it's the tool that can help you write the code to make websites and web applications. You can use Workspaces to follow along with Treehouse courses, and you can also use it to build projects on your own and practice coding. In these lessons, we'll take a closer look at Workspaces and learn how to use its features step-by-step.
Viewed -
Course
- 1
- 2
Responsive Images
Using the new source-set and sizes attributes, and the new picture element, it's possible to create images that behave better in a responsive design. These new pieces of markup allow us to deliver the right image to the right device, based on resolution, pixel density, and other factors we define. This will help web pages load faster and look better, and the most capable devices will get the best looking images possible.
-
Course
- 1
- 2
- 3
Responsive Layouts
Responsive web design is a collection of techniques for building websites that work on multiple screen sizes. In these lessons, we're going to use the foundational principles of responsive design as a framework for thinking about page layout. By the end, you should have a better understanding of how to approach common decisions in responsive design.
-
Course
- 1
- 2
- 3
- 4
Introduction to Front End Performance Optimization
People want to use websites that load quickly, and every second counts. If a website takes more than 3 seconds to load, you can lose 40% of your audience. Every additional second in page response can result in a 7% reduction in conversions. In these lessons, we're going to take a slow website and make it load faster using front end performance optimization. By the end, you'll know many practical techniques that can speed up any website.
-
Course
- 1
- 2
SVG Basics
Scalable Vector Graphics (SVG) is an XML markup language for creating two-dimensional images using vectors. This is different from traditional raster-based image formats that use pixels, like JPEG and PNG. When used on web pages, SVG images provide an infinite level of detail, so they look sharp regardless of screen size or pixel density. In this course, we'll look at situations where SVGs are better than PNG and JPEG files, as well as when an SVG might not be the best choice. Finally, we'll learn how to modify SVGs using CSS.
-
Course
- 1
- 2
HTML Tables
The web is filled with text and images, but it's also filled with information like sports scores throughout the years, lists of employee names and email addresses, or nutrition facts for your favorite foods. HTML tables enable the display information in what is commonly known as tabular data, which is information that's stored in a table-like structure of columns and rows. In general, anything that you might put into a spreadsheet could go in a table. There are many use cases for a table, so it's important to add them to your skills because it's a very common method for displaying information.
-
Course
- 1
- 2
- 3
HTML Forms
The web is a two-way communication medium. There are lots of HTML elements for displaying data and producing output, and conversely, there are also lots of HTML elements for accepting input. Accepting input from the user means creating web forms. In this course, we’ll learn about all the most important form elements that web professionals use on a daily basis.
-
34 minWorkshop
Rapid Website Prototyping
In this workshop, Treehouse web design teacher Nick Pettit will be demonstrating how to rapidly prototype websites using a combination of mockup tools and front-end frameworks.
Viewed -
48 minWorkshop
Live Q&A with Nick Pettit and Jason Seifer
In this very special, very live Workshop, Nick and Jason decided to try something new for April Fools' Day: taking your phone calls! They answer questions about game development, Ruby vs. PHP, changing careers, and much more.
Viewed -
30 minWorkshop
The Blank Slate
Join Treehouse web design teacher Nick Pettit for this live Workshop all about blank slates. The blank slate or "empty state" is when an application has no data. Not only is the blank slate a critical part of UX, but it can also be used to educate customers and increase their overall happiness with the experience. Have your questions ready and join us at 2 pm ET on March 11!
Viewed -
35 minWorkshop
How to Make a Favicon
Learn how to design and create favicons with Treehouse web design teacher Nick Pettit. From sizing and best practices to implementation and advanced techniques, this Workshop will make you a favicon expert in no time.
Viewed -
Course
- 3
Website Optimization
In this course we'll cover tools needed in keeping your website in top shape. These tools will help you perform tasks like debugging a problem to improving your page load times.
-
61 minWorkshop
Web Design Q&A
In this live Q&A session, Nick answers student questions about responsive images, front-end frameworks, getting a job in the industry, and much more.
Viewed -
73 minWorkshop
Creating Wireframe and Photoshop Mockups
In this live Workshop, Nick creates a mockup for the website of a fictional to-do list app. He starts out with wireframes using Balsamiq, then moves on to Photoshop and creates a high fidelity mockup. Finally, Nick shows how to prototype the mockup in HTML and CSS.
Viewed -
50 minWorkshop
Creating a CSS Marquee
In this live Workshop, Nick tinkers around with CodePen and creates a movie theater marquee in HTML and CSS. He also takes questions from our YouTube audience!
Viewed