Web Designer’s Guide to Programming

Posted on May 25, 2012 by

Many web designers are quite hesitant to venture beyond the familiar HTML and CSS territory, into the enigmatic realms of programming and scripting languages. Web programmers have very different set of skills. Additionally, there are so many things that web designers don’t know where to begin, Ruby on Rails, PHP, JavaScript; how can they keep up? Fortunately, web programming turns out to be much less intimidating than most of us tend to believe. Designers should learn skills that are both closely and loosely related to their tasks; then apply them to each project without too many difficulties. This article should get web designers started in programming, although they know little about it.

Web designers are visual thinkers and they thrive through visualization, creation and experimentation. On the other hand, programmers are trained and expected to solve problems. They tinker with codes for hours and treat them like logic puzzle games. Despite these differences, they are not mutually exclusive. Some web designers fit both descriptions well and they will likely love programming once they’ve tried it. We have reached the point where many Web designers know little about coding that they don’t know the difference between HTML and CSS.

HTML is a markup language while CSS is a style sheet language. They are common methods used to insert and format fairly static type of content into webpages. How web developers work with them is very different from how software developers wield an object oriented programming.

Web developers who wander over to the computer programming section in a bookstore are likely to be intimidated. They will quickly realize that there are so many things to learn. The feeling of being intimidated can be intensified when they happen to meet a programming super genius who seems to know so many things. Many web designers are put off with this fact that they give up quickly before even trying. Fortunately, programming languages tend to be very similar in basic concepts. They use similar tool sets and building blocks to achieve a specific goal.

Those who are new to programming are likely only able to write an awfully simple code snippet after learning a specific language. However, those who are transitioning from other programming language can breeze past newbies during the same period of time and after a few days they’ll be able to write all types of amazing functions. People who are already very skilled in one programming language merely need to transfer their existing programming prowess into a new language. Newbies are like toddlers who try to speak for the first time, while transitioning programmers are multilinguals who are picking up just yet another language.

In essence, after you get into web programming, the rest of the process becomes much easier and you can reduce the learning curve dramatically, for example, if you already know PHP, a jump to Ruby should be much easier.

It is a good thing that web programming is established on reusable knowledge, but you still need to put that into practice. All programming languages share similar building blocks. Understanding building blocks may jumpstart your programming skill regardless what you path you choose to pursue.


These are wonderful parts of any programming language and they can save you an immense amount of time. A variable is used to store a specific value or information. It may contain a value as simple as “5”, or an array of information that contain hundreds of characters. You should think a variable as a box. Empty boxes are valueless and what is inside that counts. With these boxes, it is very convenient to store and retrieve information.

Variable in JavaScript

Javascript is relatively easy to learn and it should be the first programming language for any web designer. This is how variable is handled in JavaScript:

// Creating a variable

var myVariable


// Assigning a value to the variable

myVariable = 256;


// Using the variable


Handling a variable in JavaScript is quite straightforward. First, declare (create) a variable to bring it into existence by giving it a name. The second line assigns a value to the empty variable, in this case an arbitrary number. Remember, myVariable is a box (variable) that now holds a specific value. Anytime you want to retrieve the information inside the, just use the variable name, which is shown by the third line. The “Alert” command tells the browser to create a popup box that displays the ‘256’ value. A variable filled with numbers may seem a bit useless, but if you have 500 lines of code, the variable could be referenced quite frequently. The value of a variable may change somewhere in the middle of the codes, but as long as the variable name doesn’t change, the code can still work perfectly. Now that you have a solid understanding of variables, learning any programming language should be easier. You’ll no longer need to learn how variable behaves, but how you should handle it.

Variables in PHP

Unlike JavaScript, PHP is a server-side programming.

// Creating a Variable and assigning a value

$myVariable = 256;


// Using the Variable

echo $myVariable;

Visually, there seem to be many differences, but the idea remains the same. You create a variable, assign a value and use the variable. In this case, PHP is more efficient as you can create a variable and assign value into it with only a single line of code. In PHP, each line starts with a “$” and “echo” is PHP’s equivalent to “Alert” in JavaScript.

Variables in Ruby

Ruby is increasingly more popular in web programming community.

# Creating a Variable and assigning a value

myVariable = 256


# Using the Variable

puts myVariable;

By now, it becomes very clear. These lines look roughly similar to PHP codes, but a lot cleaner.


Loops are another building block in programming. By automating the process in a logical manner, loops save programmers the trouble of repeating a block of code over and over again. Before creating a loop, it is necessary to define its parameters, such as when the loops should end. You don’t want a loop to continue forever, so it is necessary to define a situation whereby the loop ceases.

Loops in JavaScript

Handling loops is more complicated than handling variables, but anyone with healthy logic should be able to learn it. “While” loop is a popular variant and it essentially defines that a loop should continue “while” a specific condition is met.

// “while” Loop in JavaScript

// Creating a variable

var myVariable


// Assigning a value to the variable

var myVariable = 10;


// Declaring a “while” condition

while (myVariable < 20) {



// Increasing the variable value by one



The initial value of “myVariable” variable is 10 and the loop begins because the value of the variable is still less than 20. Once the code gets to the last line; the value of “myVariable” variable increases to 11. The loop ends when the variable value reaches 20.

The “For” loop is a little more succinct as it puts all important details into a single line of code.

// “for” Loop in JavaScript

// Creating a variable

var myVariable


// Assigning a value to the variable

var myVariable = 10;


 // Declaring a “for” condition

for (myVariable=10;myVariable<20;myVariable++) {



Loops in PHP

Once again, you see many differences in syntax format, but the basic idea is again very similar to loop in JavaScript. After reading the above examples closely, any web designer should be able to understand the following codes effortlessly.


// “while” Loop in PHP


$myVariable = 10;


while ($myVariable < q0)


                        echo $ myVariable;

                        $ myVariable ++;  // Increasing the variable value by one




// PHP “for” Loop


$ myVariable = 10;


for ($myVariable =10;$ myVariable <20;$ myVariable ++)


                        echo $ myVariable;


Loops in Ruby

These are Ruby equivalents to “while” and “for” loops

// “while” loop in Ruby

myVariable = 10

while myVariable < 20

  puts myVariable

  myVariable +=1  # Increases the variable by one


// “for” loop in Ruby

for myVariable in 10..20

  puts myVariable


We can begin to see that Ruby offers much looser syntax format that the other two web programming languages. Also, see how simple the “for” loop looks this time around.


Functions are yet another important building block of web programming that can also help you to avoid repeating the same block of code. When programmers develop a web application, they may need anywhere from a couple to a few dozens of tasks. Each task is essentially a set of commands. It is possible to toss these commands into a function. Eventually, a function works like variable that holds a set of commands.

Functions in JavaScript

The following is a function that takes any number and then doubles it.

// Creating and defining a Function

function doubled(myVariable) {

            return myVariable + myVariable;



// Using the Function


The first line of the code creates a function called “doubled” and it returns a value equal double of the “myVariable”.

Functions in PHP

By now, you should be familiar with how functions are created in any programming language. Here’s the syntax in PHP:

// Creating and defining a Function

function doubled($myVariable)


            return $ myVariable + $ myVariable;



// Using the Function

echo doubled(10);

Functions in Ruby

Once again, Ruby has different syntax and instead of a function, Ruby developers refer to it as a method. Here’s the syntax in Ruby:

// Creating and defining a Function

def doubled(myVariable)

   return myVariable * myVariable



// Using the Function

puts doubled(10)

When handling a function, all programming languages use an identical concept. You create and define a function that passes a specific number into it. Web designers should find patterns in any language they learn. Many differences only amount to slight syntax variations and are purely semantic. However, you shouldn’t consider that all scripting and programming languages are identical, they are not. Each has specific purposes that define when and how you should use them. It’s like transitioning from Adobe Photoshop to InDesign. Often, you’ll deal with two languages created for separate purposes; however there are enough patterns that can help to navigate your way around the lines of codes.


This article isn’t in any way meant to be an exhaustive guide to programming for web designers. By now, you still don’t have a complete knowledge to call yourself a web programmer. Instead, the article merely shows you basic patterns in any programming languages, which can help you to approach this new territory more easily. You should now notice a set of practices that can expand your understanding. So where to begin? JavaScript is generally web designer’s first foray to programming. When combined with jQuery, its potential quickly becomes more apparent. After a few months, you should find PHP feel much more manageable to learn, which will lead you to Ruby and eventually Ruby on Rails. The possibilities are limitless and you can turn yourself into a powerful combo of web designer and programmer.

Author :

  • admin