Yelp Facebook YouTube Twitter Instagram

Noble Blog

Coding and Design Tips & Tutorials

Paste From Recent History in Sublime Text

Sublime Text remembers the last 15 items you’ve copied and you can paste any one of them!

Hit Cmd–Option–V (Mac) or Ctrl–K then Ctrl–V in quick succession (Windows) to access the list of copied items. Use the arrow keys to select an item and hit Return/Enter to paste.

Paste From Recent History in Sublime Text

Coding Tips

Join Lines in Sublime Text

Sublime Text allows you to quickly join lines together. Select the lines and hit Cmd–J (Mac) or Ctrl–J (Windows).

If nothing is selected, Sublime Text will join the line below to the current line.

Join Lines in Sublime Text

Coding Tips

Noble Desktop Website Redesign

We launched a major website redesign earlier this month and we’d like to share some insights into the process. We’ll be discussing UX improvements, user testing, how to handle lots of content, CSS grid, flexbox, and speed.

A Major Improvement to the UX (User Experience)

We completely overhauled the visual look of the site, but one of the primary goals was to make the site easier to use. The last time we redesigned our website, we taught fewer classes. We simply outgrew that design.

Our previous registration process required multiple screens and was too complicated. We knew we could make it faster and easier, and we've already seen improved conversion rates. You can now see all class dates directly on a class page (at both the top and bottom of the page, so they are easy to find). One click and the class is added to your cart.

one click registration

An even bigger improvement is for certificate programs which contain multiple classes. Previously you couldn't see the dates on the certificate page and had to go to another screen to select the certificate program. Now you see all the dates, and one click adds all the appropriate classes to your cart. The results we've seen in just a few weeks prove what we already knew, simple and easy = more conversions.

Web Development  Web Design

Sort Lines in Sublime Text

Sublime Text allows you to quickly sort lines alphabetically. Select the lines you want to sort and choose Edit > Sort Lines. You can also use the keystroke F5 (Mac) or F9 (Windows).

Sort Lines in Sublime Text

Coding Tips

Video Tutorial: Web Animation Techniques

How do we animate in this day and age of HTML5? Should you use animated GIFs, CSS, or JavaScript? Animation is coming back to the web in a big way, and the trend is to make things move. You can even add animations to emails. Learn about creating animations with CSS, JavaScript (GreenSock), Photoshop, and After Effects in this free class!

View the Presentation Slides
Download Demo Files & PDF Exercise

LEARN GREENSOCK:
Videos + Book Training:
Class (attend in New York City or Live Online)
Book (eBook or Print)
-----------------------
LEARN ADOBE AFTER EFFECTS:
Classes (attend in New York City or Live Online)
Books (eBook or Print)
-----------------------
LEARN ANIMATED GIFS:
Class (attend in New York City or Live Online):
Book (eBook or Print)

Photoshop  Adobe  After Effects  Web Animation  Web Design

Video Tutorial: Intro to After Effects

Learn to start using Adobe After Effects to create motion graphics/animation video in this free tutorial.

LEARN MORE:
After Effects Classes (attend in New York City or Live Online)
After Effects Books (eBook or Print)

After Effects  Web Animation  Adobe

Video Tutorial: Intro to Photoshop

In this free class stream we’ll cover the basics of Photoshop so you can get started using it for photo retouching, or web and print design.

Continue to learn more in our comprehensive Photoshop classes:
Photoshop Classes (attend in New York City or Live Online)
Photoshop Books (eBook or Print)

Adobe  Photoshop

Multiple Text Cursors with Arrow Keys in Sublime Text

While you can place multiple text cursors in Sublime Text with Cmd–Click (Mac) or Ctrl–Click (Windows), here's another technique that comes in handy.

Hold Ctrl–Shift (Mac) or Ctrl–Alt (Windows) and hit Up or Down Arrow to place an additional text cursor above or below the current cursor.

Multiple cursors coding tip

Coding Tips

Video Tutorial: Intro to SVG

If you’re not saving your vector graphics (icons, logos, etc) as SVG for use in your webpages, you should be! Instead of using pixel-based PNGs, keep the graphics as their native vectors (so they download faster and can be used at any size). As great as that is, you can even use JavaScript to animate them!

Download the Presentation Slides
Download Demo Files

LEARN MORE:
HTML5 Animation with GreenSock Class (attend in New York City or Live Online)
HTML5 Animation with GreenSock Workbook (eBook or Print)
Web Design Classes (attend in New York City or Live Online)
Web Design Books (eBook or Print)

Web Development  Adobe  Adobe XD  JavaScript  Web Design

Coding Basics: Intro to HTML Syntax

Here’s a free sample exercise to get you started coding and get a taste of Noble’s teaching style. The exercise is about as simple as it gets—you’ll learn the basic syntax and the most essential HTML tags that are needed to get up and running!

In this step-by-step exercise, you’ll learn how to create the website shown below by hand-coding HTML. Download a PDF of the exercise and class files to begin.

Microsoft patent website sample exercise

Interested in learning more coding? Find out more about starting a career in Web Design. Or check out our numerous class offerings:

Web Development  Web Design