Web Dev 101: Code—The Language of the Web

I’m a native English speaker, and I can speak un poquito español, but if you ask me, I’ll tell you I’m multilingual. That’s because I’m a web developer, and the web is built using a variety of different types of code known as languages.

In this first of two posts as part of the Web Dev 101 series, we explore front-end coding languages used on the web and list my suggestions for learning developers.

Coding languages really are like traditional spoken languages. They all have unique punctuation rules, syntaxes, synonyms, and writing conventions (that many people break just like spoken languages). The good news is, though, that you won’t have to sit through French class to learn to code. There are plenty of resources available online for learning the various coding languages. More on these in a later post.

There are many different languages that can be used to create websites and web applications. Some are best-suited for the front-end (what the viewer sees), while others are used in back-end systems (what powers fancy, dynamic websites). They can even come in various flavors—known as frameworks—like jQuery (a framework for JavaScript) or Rails (a framework for Ruby).

programming-languages-for-2016_graph

Nine most in-demand programming languages in 2016 [Image credit: Coding Dojo]

With such a huge number of languages available, it can be a bit overwhelming to decide which are the most important to learn. And the web is ever-changing; new languages arrive on the scene every year while others fade into disuse.

To help you navigate the long list, I’ve prepared of list of languages than I consider to be the foundation for all web developers. Following are front-end languages I recommend as a starting point, ordered in the sequence I suggest learning them.

1. HTML

HTML (Hypertext Markup Language) is ground zero for everything web and is your undeniable starting point. HTML is a markup language that tells your browser how to distinguish between code and text. Every website is built on an underlying structure of HTML code.

Try this: Navigate to your favorite website and right-click somewhere in the white space on the home page. In the context menu that pops up, click “View Page Source.” A new tab will open in your browser with lines of text that, to an untrained eye, seem like a bunch of mumbo jumbo. Behold: HTML.

2. CSS

CSS is to web as ornaments are to a Christmas tree. CSS (Cascading Style Sheets) is a style sheet language that makes websites “pretty.” Most developers learn HTML and CSS simultaneously because no one would use a website that isn’t styled with CSS.

3. SASS/LESS

SASS and LESS essentially function to accomplish the same goal, but some experts recommend one over the other. Both SASS and LESS are stylesheet languages with the goal of making it easier for you to write CSS. Both get compiled into CSS files that can then be understood by your browser.

You can get by without learning SASS or LESS, but I recommend learning at least one because they offer incredibly useful, awesome, time-saving features like variables, functions, and code nesting. Plus, many web development firms are making them standard in their process.

4. JavaScript and jQuery

Javascript is a scripting language used primarily in front-end presentation. Javascript is the language that makes exciting animations, transitions, and other movements happen on a website.

jQuery is a Javascript framework. Much like SASS with CSS, jQuery makes writing Javascript code easier and more intuitive. I learned jQuery before Javascript, but that’s something like putting the cart before the horse. I suggest starting with Javascript to understand the basics, then move to jQuery later.


In a coming post in this series, I’ll cover the basics of back-end coding languages and complete the list of essential languages for new web developers.

In the meantime, as you begin to work with these front-end languages, don’t forget to use your resources if you get stuck. Stack Overflow will soon become your new best friend.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s