A Designer’s Introduction to Programming

Designers are often quite hesitant to venture beyond the realms of HTML and CSS into the territory of scripting and programming languages, and for good reason. Programming requires a very different set of skills than mocking up web pages. Further, there are so many different things to learn that most designers don’t even know where to begin: JavaScript, PHP, Ruby, Rails, how can you possibly keep up?

However, in practice, programming turns out to be much less scary than designers imagine it to be. Today I’m going to show you how programming is a skill that you can learn once and then apply to each new language that you pick up. We’ll take a look at three different programming constructs in three different languages to see how similar they really are. If you’d like to get started in programming but don’t know a single thing about it, this article is for you.

2 Million+ Digital Assets, With Unlimited Downloads

Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.

See More

Fear Not, You Just Might Like It

This site is generally targeted towards designers, and from personal experience I know that approaching programming for the first time as a designer is extremely intimidating. Designers are visual thinkers, we thrive through creation and experimentation using our mind’s eye and an expert knowledge of the tools of our trade.

Generally, we’re the kind of people that hated math class and anything else where creativity didn’t seem to have an obvious foothold.

“Generally, we’re the kind of people that hated math class and anything else where creativity didn’t seem to have an obvious foothold.”

Programmers are problem solvers. They love logic puzzles and tinkering with code for hours in the absolute absence of visuals of any kind. Keep in mind that these two categories of people aren’t mutually exclusive. If you fit both descriptions, you’ll likely absolutely love programming.

Not HTML and CSS

We’re quickly reaching a point where most web designers know at least a little bit about coding HTML and/or CSS. This experience and knowledge will indeed help you, but perhaps not as much as you might think.

HTML is a *markup language* and CSS is a *style sheet language*, they’re used primarily to format and insert fairly static content into pre-built pages. How you work with them is in all reality very different from wielding a *scripting language* or *object-oriented programming language*, which are the kind of hardcore programming tools you’ll find in use on the web today.

The Big Secret About Programming

That last part was the bad news, but fear not, there’s good news on the horizon. If you walk into a bookstore and wander over to the programming section, you’re likely to be completely intimidated. There are so many different things to learn! This intimidation is furthered when you happen to meet one of the super geniuses that seems to know pretty much all of the programming languages in existence. How in the world do people find the time to learn this stuff? Many beginners are so completely put off at this point that they give up before they ever even try.

“Programming languages tend to be very similar. Many of them use the same building blocks and similar tool sets to achieve their goals.”

The big secret that you don’t know if you’ve never really jumped into programming is that programming languages tend to be very similar. Many of them use the same building blocks and similar tool sets to achieve their goals.

I learned this little secret in my first interaction with programming: a Java class in college (not to be confused with JavaScript). Though I myself was a strapping young lad, the class was largely filled with men in their 30s and 40s. Virtually all of them already had jobs in programming and had been at it for twenty years or more. They were simply employed in the use of other languages and attempting to expand their skill set, often at their employer’s encouragement and expense.

Walking into the class on the first day, none of us knew much, if anything, about Java. However, by the third class, these guys were breezing past me. I was writing horribly simple little code snippets based on the fundamentals that we had learned. These guys were taking the same fundamentals and building elaborate applications with all kinds of cool functions way beyond the requirements for the assignment.

“Was I inept? It turns out, fortunately for me, that the answer wasn’t so simple.”

Was I inept? It turns out, fortunately for me, that the answer wasn’t so simple. The reality was that we were learning very different things. I was learning to program through the lens of Java, these guys already knew all about programming and merely needed a little help figuring out how to translate that knowledge into Java. I was a toddler learning to speak for the first time and they were multi-linguals picking up yet another language.

The point of this long story is to illustrate that, after you really get into programming or scripting with one language, the rest becomes much easier because you’ve dramatically reduced the learning curve. If you know how to code in PHP, the jump to Ruby is much smaller.

The Building Blocks

It’s easy for me to say that programming is built on reusable knowledge, but can I put that into practice? What are these so-called building blocks and how are they similar or different from language to language?

Great question! Let’s find out by taking a look at some of the most basic but most used programming constructs. Understanding these will jumpstart your programming education regardless of the path or language that you choose to pursue.

Variables

screenshot

Variables are a wonderful thing. If you’ve ever used LESS or something similar then you’ve seen the wonders of variables and how they can save immense amount of time. I’m still not sure if they belong in CSS, but the programmer in me sure wants to see them there.

A variable is essentially a way to store information. You can store something as simple as a value, say 39, or something as complex as an entire array of data containing hundreds of values. Think of a variable as a box. Boxes themselves don’t seem all that important, it’s what’s inside that counts. However, boxes do make for a convenient way to store and access certain items.

JavaScript Variables

Let’s jump to an example. Since JavaScript is a likely first candidate for moving past HTML and CSS, we’ll start all of our examples there. Here’s how variables work in JavaScript:

// Creating a JavaScript Variable
var contentWidth;
contentWidth = 496;

// Using the Variable
alert(contentWidth);

Here you can see exactly how variables are used in JavaScript. First, you “declare” a variable. This simply creates it or brings it into existence, when doing this you always want to name it something indicative of its contents. Next, you assign it a value (often these two steps are combined), in our case I threw in an arbitrary number. Remember that, “contentWidth” is our box, which now holds a value. Any time we want to access that box, we just use the variable name, so to end the example out I created an alert and inserted the variable. This will pop up a box with the value “496”.

This may seem useless here but imagine we had three hundred lines of code that referenced that variable frequently. Any time the value of that variable changes, our code still works perfectly because the variable name has stayed constant. Without variables, this would be impossible and much more code would result.

PHP Variables

Now that we have that solid foundation of information, learning variables in other languages becomes much easier. This time we’re not learning what variables are and how they work, only how to use them in other languages.

Here’s a look at how variables work in PHP:

// Creating a PHP Variable
$contentWidth = 496;

// Using the Variable
echo $contentWidth;

There’s a lot of similarity here. Notice the use of semicolons to denote the end of a statement and how comments use the same syntax. This time we declared our variable and assigned it a value in a single line. We can see that the syntax for this is nearly identical, with the important distinction that PHP uses a “$” at the beginning of a variable name. Note that the “echo” command merely prints something to the browser page.

Ruby Variables

Now let’s take a look at variables in Ruby.

# Creating a Ruby Variable
contentWidth = 496

# Using the Variable
puts contentWidth;

By now you can see that a lot of what’s involved in learning a new language is just figuring out its various quirks. For instance, JavaScript and PHP used semicolons at the end of a line, Ruby does not. Also, this time around comments are created with “#” instead of “//” and we use “puts” to output our result.

Loops

screenshot

Another popular programming construct is a loop. With loops you can save yourself the trouble of repeating code again and again by automating the process you want to achieve. When creating a loop, you must be sure to declare the parameters of the loop, such as the conditions for when the loop will cease. You don’t want the actions continuing on infinitely so you must create a condition whereby the loop will be terminated.

JavaScript Loops

In any given language, there are usually multiple types of loops. Here’s one type in JavaScript, the “while” loop. In this example we set up a variable, then create a chunk of code that should execute again and again for as long as the variable is less than 50. Then within that block of code, we define the actions to be repeated. In this case we’re logging the value of the variable to the console, then increasing the variable’s value by one. Since the variable is increasing every time the code runs, it will eventually hit 50 and the loop will terminate.

// JavaScript "while" Loop

var x = 25;

while (x < 50) {
	console.log(x)
	x++; // Increases the variable by one
}
&#91;/code&#93;
</div>
</ br>

This same thing could be achieved with a "for" loop. This version a little more succinct as is states the value of the variable to start, the condition under which the loop terminates and the action to take on the variable all in one line. 

<div >
[code lang="javascript"]
// JavaScript "for" Loop

var x = 25;

for (x=25;x<50;x++) {
	console.log(x)
}
&#91;/code&#93;
</div>
</ br>


<h3>PHP Loops</h3>
Once again we find that PHP is very similar to JavaScript. After reading through the examples above, you should be able to effortlessly grasp the PHP equivalent. Here once again we have a while loop and a for loop, each of which contains nearly identical syntax to their JavaScript brethren. 

<div >
[code lang="php"]
// PHP "while" Loop

$x = 25;

while ($x < 50)
	{
		echo $x;
		$x++; // Increases the variable by one
	}
&#91;/code&#93;
</div>
</ br>

<div >
[code lang="php"]
// PHP "for" Loop

$x = 25;

for ($x=25;$x<50;$x++)
	{
		echo $x;
	}
&#91;/code&#93;
</div>
</ br>

<h3>Ruby Loops</h3>
Here are the "while" and "for" loops in Ruby. As you can begin to see, Ruby is much looser in its syntax than the other two languages we're using. Not only are there no semicolons, the curly brackets aren't present either. Also notice how different the "for" loop looks this time around. 

<div >
[code lang="ruby"]
// Ruby "while" Loop

x = 25

while x < 50
  puts x
  x+=1 # Increases the variable by one
end

&#91;/code&#93;
</div>
</ br>

<div >
[code lang="ruby"]
// Ruby "for" Loop

for x in 25..50
  puts x
end

Functions

screenshot

Functions are yet another programming construct created to save you time by avoiding repeating the same code. When you code an application, it will probably perform anywhere from one to thousands of tasks. Each task represents a chunk of commands. When we toss the commands into a function we can simply call that function instead of writing out that full code. In this way a function is a lot like a variable that performs a task or list of tasks.

JavaScript Functions

Let’s build a super basic function in JavaScript that takes any number passed to it and squares it. We start here with the word “function” then follow it up with a variable in parentheses. Then inside the function we perform various actions and return a value.

// Creating the Function
function squared(someNumber) {
	return someNumber * someNumber;
}

// Using the Function
console.log(squared(9));

When we use the function, we replace the parenthetical variable with any number we like and the code inside the function will be performed on that value. In the example above, the result returned would be 81.

PHP Functions

By now you’re so familiar with the JavaScript to PHP conversion that you should be able to do it all by yourself. Here’s the syntax:

// Creating the Function
function squared($someNumber)
{
	return $someNumber * $someNumber;
}

// Using the Function
echo squared(9);

Ruby Methods

Once again, Ruby is quite different. In fact, Ruby actually refers to this particular construct as a method, not a function. However, we can still quickly apply our knowledge of functions to decipher how this works.

// Creating the Function
def squared(someNumber)
   return someNumber * someNumber
end

// Using the Function
puts squared(9)

As you can see, the Ruby method is performing the same task as the JavaScript function. It allows you to pass a number into the parameters, after which is squares that number and returns the value.

Easy Right?

By now you should be able to see the importance of understanding the practice of programming independently of any programming language. There is a shared structure and method of programming that you’ll find throughout the languages that you learn. Many of the differences are *semantic* and amount to slight syntax differences.

Don’t take this to mean that programming and scripting languages are all the same, they’re not. They all have a specific purpose that defines how and when you use them. It’s a lot like learning Adobe Illustrator and then jumping to InDesign. You’re dealing with two different things created for two different purposes, however, there’s enough similarity that an expert knowledge of one will help you learn your way around the other.

Conclusion

This discussion was not in any way meant to be exhaustive. You don’t now possess a complete fundamental knowledge of programming. Instead, you merely learned about programming in a way that hopefully makes it more approachable. Instead of seeing a mass of completely different languages that you have to learn, you should now see a collection of related practices in which the study of one actually expands your understanding of the others.

So where should you start? As I mentioned above, JavaScript is definitely the place for web designers to begin. Its application is immediately apparent, especially when combined with jQuery, to the HTML and CSS that you already know. From there the leap to PHP is much more manageable, which might lead you to study Ruby so you can master Ruby on Rails; the possibilities are limitless!