Yelp Facebook YouTube Twitter Instagram

Noble Blog

Articles on: Web Development

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 Design  Web Development

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 Design  Web Development  Adobe  Adobe XD  JavaScript

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 Design  Web Development

Video Tutorial: Intro to HTML5 Animation with GreenSock (GSAP)

Want to animate your webpages or create rich HTML5 banner ads? Learn how the GreenSock Animation Platform can breathe new life into websites, mobile apps, games, or online marketing.

View the Presentation Slides & Files.
Learn more in our HTML5 Animation with GreenSock Class or Workbook.

 

Web Design  Web Development  Web Animation

Video Tutorial: Introduction to JavaScript

Get started with the fundamentals of client-side (front-end) JavaScript, opening up your webpages to new and exciting functionality. Then continue learning in our JavaScript & jQuery class.

View the Presentation Slides
Download Demo Files

Web Design  Web Development  JavaScript

Start a Coding Bootcamp this Summer

Looking to learn to code? We have plenty of bootcamp options starting this summer; a perfect time to learn new skills, as well as a great way to enhance your value in the workforce. If you’re ready to seriously immerse yourself and become a coder, our rigorous programs range from iOS development to front-end web coding in our Web Design Certificate, or add on back-end coding and complete the Web Development certificate. Get started as early as June!

Web Design  Web Development

Video Tutorial: How to Get Started in Web Design

Get an intro to HTML and CSS and see how they are used to create webpages. We will upload a site to make it live for the world to see!

View the Presentation Slides
Download the step-by-step exercise, class files, and notes

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

 

Web Design  Web Development

Interview: Noble Grad Yayoi Sugishita

Yayoi Sugishita

Yayoi Sugishita attended Noble's Web Design Certificate in early 2016. Her second project was a website for Sakebar Shigure. The website uses elegant HTML, CSS, and JavaScript in a 1-page format. 

What was your background before learning how to code?

I was a video editor for a Japanese broadcasting company. I didn't have any knowledge of coding at all before learning it.

What led you to pursue classes and a career in code?

At the beginning, I was thinking to run an online business after quitting my previous job.  I thought it'd be better if I could make my own websites than hiring someone.

Did you research other schools before deciding on Noble? 

Yes, I did. I was googling many Web development schools in NYC like New York Code+Design Academy, Flatiron School, and App Academy etc.

What led you to decide to go to Noble?
Noble's programs were very attractive to me, because they gave an opportunity to retake classes, and also the price of the programs was reasonable compared to other schools.

Coding Tips  Web Design  Web Development