Best Languages To Learn For Web Development
“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!
My Favorite Tools & Services
The tools and services below, some I’m affiliated with and some I am not, are exactly what I recommend to paying clients based on value and quality.
WordPress & Web Hosting: BanProNET – Fast, secure, reliable web hosting for personal sites, small businesses, and national organizations since 2002.
Domain Names: NameSilo – I’ve had accounts with just about every domain registrar on the planet over the years, NameSilo by far is my favorite for simplicity and pricing, hands down.
WordPress Plugins: WPFavs listing of the common plugins I use and recommend to clients. You can import this list directly using WPFavs to save time by installing them all with a single click.
Content Writing: WriteMyArticles.com is among the most affordable content services out there, and unlike most that have different tiers of quality based pricing, WriteMyArticles delivers top-quality with every piece of content going through a researcher, writer, and editor’s hands before being delivered to the buyer.
Comments are closed.