Best Languages To Learn For Web Development (in 2018 and beyond)

“What should I learn to begin in web development?” That question, or some variation of it, is definitely in the top five questions I’ve been asked most often from friends and family over the years.

First I think we need to define web development. It can mean different things. There’s front end development which covers design and display of a website or app on the client side. Essentially everything users will see and interact with.

Then there’s back end development which encompasses all of the “behind the curtains” work being done server-side with data before it’s displayed to users or while they’re interacting with your front end.

And there’s also full- stack development which is both front end and back end development combined.

I’m going to cover the full range here, so regardless of what you’re planning to focus on these are the languages that I suggest mastering.

The Language List:

I’ll go into each language below as well as explain why I specifically recommend each one.

HTML

HTML is a front end language and is the web. Anything and everything you see on a website or app begins with some HTML at its core.

The good thing with HTML is that it’s a very simple and direct “markup” language. There’s very little logical operating involved with learning it so it’s easy to grasp and become proficient with.

The bad thing with HTML is that because it’s so thin in terms of operational logic it’s very forgiving of sloppy usage and it becomes easy for coders to form bad habits with, resulting in code that “works” in general, but is so ill-formed it creates problems for some end users. This is especially true for those on assisted devices.

The takeaway with HTML: Don’t be sloppy. Learn about semantic markup and use it to ensure you’re providing all of your visitors with the best experience that you can. Also learn about ARIA (Accessible Rich Internet Applications) best practices for accessibility.

Bonus Tip: Once you’ve fully grasped HTML then look to speedup your coding with it by learning and using PUG. PUG isn’t so much a language (some will argue this) as it is a shorthand template that compiles (converts) into HTML via the software you’re developing with.

PUG

Basically, PUG lets you write code that looks more like human readable paragraphs than code and greatly reduces the actual amount of code you have to write since you won’t be including all of the tags and closing tags of HTML.

Let’s look at a quick example, first some HTML:

<!DOCTYPE html>  
<html lang="en">  
  <head>
    <link rel='stylesheet' href='css/style.css' type='text/css' media='all'>
    <title>Pug vs. HTML</title>
  </head>
  <body>
    <main>
      <article class="blogPosting">
        <header class="blogHeader">
          <h1 class="blogTitle">Your Article Title</h1>
        </header>
        <section class="thePost">
          <p>A first paragraph of your article.</p>
          <p>The second paragraph paragraph of your article.</p>
          <p>And so on...</p>
        </section>
      </article>
    </main>
 </body>
</html>

The HTML example above is 21 lines of code using 576 typed characters. Now lets look at the same code in PUG:

doctype html
html(lang='en')
  head
    link(rel='stylesheet', href='css/style.css', type='text/css', media='all')
    title Pug vs. HTML
  body
    main
      article.blogPosting
        header.blogHeader
          h1.blogTitle Your Article Title
        section.thePost
          p A first paragraph of your article.
          p The second paragraph paragraph of your article.
          p And so on...

The PUG markup which will compile into the exact same HTML as the example above it uses just 14 lines of code and 403 typed characters.

As you can see, PUG isn’t just more easily readable, but also greatly reduces and speeds up the developer’s work; and that’s only scratching the surface. Add in that PUG allows you to use conditionals, includes, mixins, and so much more then you begin to realize the real power of PUG as a tool. It’s well worth adding PUG into your workflow once you’ve learned the fundamentals of HTML.

CSS

Much like HTML, CSS is the backbone of website and app display. While HTML encompasses the display of data, CSS encompasses the presentation of how that data is displayed. It allows us to manipulate the appearance of HTML elements and data.

Also like HTML, CSS isn’t an operational logic language so is fairly easy to learn. However, CSS has a lot more functionality and nuanced detail to it than HTML, it’s also a bit hinky since not all browsers handle various elements of CSS exactly the same (and you’ll probably spend tons of time checking with Can I Use to make sure your designs won’t break on older but still used web browsers), so it will likely take a little longer to become proficient with.

The takeaway with CSS: don’t skimp or rush through the learning process with CSS. It’s a powerful tool with lots of little gems that are often overlooked or left in the “I can look that up if I need it” pile by developers and designers, and these are the details that mean the difference between designers who produce $50 templates and designers who can command four or even five-figures for each project. Even if you’re only learning for your own personal site(s), go for quality.

Bonus Tip: Like with PUG for HTML, CSS has its own shorthand templates that will convert into CSS by your development software as well. The two most common being LESS and SASS. Personally I prefer SASS.

SASS

When it comes to SASS, there’s two syntax versions of it, .scss which is nearly identical to CSS and gives you all the benefits of SASS without having to learn a different way of writing your styles from CSS, in fact you can rename a .css file to .scss and it’s valid; then there is .sass which is written more like PUG for HTML is, using indentation rather than semi-colons and curly braces.

While .scss has become more popular in recent times, I again prefer .sass because I want to type less to do more and I find the indented syntax of .sass more friendly or human readable.

Regardless of which syntax you might prefer, SASS (or LESS) provide extended tools–things like variables, mixins, operators, etc.–that will enhance and speedup your style coding. 

Here’s a quick comparison of the same code in CSS, then SCSS, and finally in SASS syntax:

/* -- CSS SYNTAX -- */
.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-clip: padding-box;
  /* stops bg color from leaking outside the border: */
}

.error {
  border-color: red;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  background-clip: padding-box;
  /* stops bg color from leaking outside the border: */
  -webkit-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  transform: rotate(10deg);
}

.warning {
  border-color: yellow;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background-clip: padding-box;
  /* stops bg color from leaking outside the border: */
  -webkit-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  transform: rotate(5deg);
}

.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
/* -- SCSS SYNTAX -- */
@mixin transform($property) {
  -webkit-transform: $property;
      -ms-transform: $property;
          transform: $property;
}

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  border-radius: $radius;
  background-clip: padding-box;  /* stops bg color from leaking outside the border: */
}

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
  @include border-radius(5px);
}

.error {
  border-color: red;
  @include border-radius(15px);
  @include transform(rotate(10deg));
}

.warning {
  border-color: yellow;
  @include border-radius(10px);
  @include transform(rotate(5deg));
}

.box {
  @include transform(rotate(30deg));
}
/* -- SASS Syntax -- */
=transform($property)
  -webkit-transform: $property
  -ms-transform:     $property
  transform:         $property

=border-radius($radius)
  -webkit-border-radius: $radius
  border-radius: $radius
  background-clip: padding-box;  /* stops bg color from leaking outside the border: */

.message,
.success,
.error,
.warning
  border: 1px solid #cccccc
  padding: 10px
  color: #333

.success
  border-color: green
  +include border-radius(5px)

.error
  border-color: red
  +include border-radius(15px)
  +include transform(rotate(10deg))

.warning
  border-color: yellow
  +include border-radius(10px)
  +include transform(rotate(5deg))

.box
  +include transform(rotate(30deg))

As the examples above show, the same code becomes a lot easier to read in the .sass syntax, at least for my eyes, it’s just cleaner and void of unnecessary semi-colons and curly braces.

Again, either syntax of SASS is a powerful tool to add to your development setup, and allows your style coding to become more streamlined and modular, adding in “write once and use everywhere” capabilities with mixins and other functions. It’s well worth adding a CSS template language into your workflow, after you’ve learned CSS itself.

JavaScript

JavaScript is primarily a front end development language that allows for turning the data of your static HTML and CSS into a more complex and dynamic experience for users. 

That said, there are times when JavaScript becomes a back-end language as well with the help of a framework and runtime engine like NodeJS, but as you may have noticed by now I’m not a big fan of frameworks. In most cases they’re unnecessary layers of abstraction that encourage lazy, sloppy, and often insecure development.

However, one caveat here, I use NodeJS in my development setup for running dev tools like Gulp which allow me to work with PUG and SASS and I do appreciate what NodeJS offers on that end, but I never use it–or condone its use–outside of that role in the development sphere. If you want to do server-side processing on a live site, use a language better suited to it than “JavaScript on top of a runtime engine”.

I also suggest avoiding libraries and frameworks like jQuery and Vue and so on until long after you’ve learned all the ins-and-outs of vanilla javascript.

A quick aside here to support my last statement:

I was interviewing developers not too long ago for a large project my company had acquired and as part of the process of assessing their proficiency I asked each how they would approach ensuring the DOM (document object model) was loaded in their javascript when they had to provide browser compatibility back to IE 8.

Since you may not know much about javascript yet I’ll explain here that making sure the DOM is loaded prior to executing your script is vital since you can’t perform functions and manipulate what hasn’t finished loading.

I used this specific question to ensure each candidate could actually write javascript and wasn’t just going to rely on other people’s work with libraries like jQuery to do the heavy lifting. I’ve met too many like this over the years and would never hire somebody that didn’t fully grasp the work and tools of the job.

To be fair here, I only interviewed five candidates for this specific project before finding one that was outstanding, but of those five there was one who couldn’t offer a working method without the use of jQuery’s “$(document).ready()” function.

This isn’t a large pool, but still it was 1 in 5, or 20% who failed a basic understanding of the primary tool (language) used in the position they were applying for. Imagine a carpenter who’s able to use an air-powered nail gun but can’t tell you what a hammer is, would you hire them to build your house?

The takeaway with javascript: It’s a fairly basic client-side language to learn with powerful capabilities that can manipulate and transform the data, HTML, and CSS of a static billboard-like website into a trip to Disney World for your end users. It’s also a good introduction to operational logic and object oriented programming (OOP) that probably won’t leave you too frustrated or pulling your hair out trying to grasp.

Bonus Tip: There are tons of libraries and frameworks out there which can make your use of javascript more fun and speedup the time you spend developing your scripts and applications. While I always advocate against trying to pretzel-twist javascript into a server-side language in any way, I fully encourage the exploration and use of these libraries and frameworks to enhance your work after you’ve become proficient with the core language.

PHP

The ‘old clunker’ of the web. It isn’t modern. It isn’t sexy. It rarely gets positive coverage in the press, but PHP keeps chugging along and doing it’s job as a server-side language.

While other languages rise and fall in popularity and use online, PHP stays steady as the most used and most wide-spread language. It powers over three-quarters of the web (w3techs.com puts this at 78.9% in their known server-side languages usage chart). It’s also the processing engine beneath WordPress, which is the content management choice for 32% of websites online at the time of this writing. 

Don’t get me wrong here, I’m not a PHP fanboy. I’m just pragmatic and goal oriented, and when I’ve got a web dev project in front of me I want to use the stable tool that’s going to let me get it done and be easy to maintain and update as time goes on. That’s what PHP brings to the table as a language.

This isn’t to say PHP is “the right tool” for all jobs or projects, nothing is. But, if you’re looking for a server-side language to invest your time into learning as a foundation for your skill set that is near-future-proof it’s PHP.

The takeaways for PHP: It’s a loose and flexible language which makes it easy to learn, but be careful not to let your code become too loose or it can quickly become unmanageable even with small projects. If you’ve learned javascript already then you’ll find the syntax and logic of PHP very familiar, plus you’ll be able to leap right in with PHP’s powerful OOP capabilities.

Bonus Tip: Like with javascript there are tons of libraries and frameworks out there for speeding up and enhancing PHP development, as well as tools like composer for making your workflow easier. Just take the time to learn the fundamentals first before diving into them otherwise you can fall into the lazy and sloppy coder trap very easy with this language.

Final Thoughts

Having given my language suggestions and explained the why behind each, let me close this with a few thoughts on web development.

In my opinion, on the front end it’s all about providing users with the best experience possible. Don’t get hung up with things like trying to make the site look the same on all devices.  That’s putting the platform ahead of the content and the user.

Instead, think in terms of mobile first with progressive enhancement. Focus on delivering your content in the best way possible for your users based on their devices.

Whether it’s appearance or functionality, always think bottom-up. Start with delivering your content optimized for the smallest and least powerful device your user may have, then add on bells and whistles based on device sizes and capabilities.

You’ll never account for every device or browser out there, and if you did something new would come along tomorrow to break it anyway.

And on the back end, it’s always about the need for speed. I don’t just mean the speed of an individual user visiting your site and your program delivering up something for them, I mean you have to design your programs to account for a high volume of users hitting your site all at once.

Make sure your code is logical, organized, optimized. It’s not just about bandwidth but also the processing power of your server and maybe your database if your site depends on one.

Constantly ask yourself if you’re doing things in the best possible way. Don’t cut corners just to get it done. Use caching. Think about security. 

Happy coding!

One Response

Leave a Reply

Your email address will not be published. Required fields are marked *