Web development: Front end vs back end

Want to get into web development but don't know whether to be a front end or back end dev? Read about the skills required for both.
8 minute read
Adam Mathew @Grizwords
Technical Co-pilot
Cover photo for Web development: Front end vs back end

Mantente actualizado

Suscríbete a nuestro boletín de noticias para mantenerte al día en los temas que importan.
¡Gracias por suscribirte! Revisa tu bandeja de entrada para nuestra próxima actualización.

Find out the difference between front end and back end development, and the skills you'll need to succeed.

So, you want to get into the web industry, but you don't know which way to specialize. Not a problem. The very first “zig/zag” decision one needs to make is this: front or back?

On the surface that sounds like an innocuous choice, like deciding which seat to shotgun for a very long car trip, or what side to present to a stranger when sliding past in an airplane aisle. Deeper considerations need to be made, however, lest life get unpleasant.

Let's break down the absolute basics of the web industry now, to ensure you don't wind up back-to-front (end) in a career you don't enjoy.

Front-end work (sometimes called the client-side) is typically referred to as “web design”. A back-end job (widely known as server-side) is a “web developer” role. That's the basic gist, now let's dig into the specifics.

What is front end development?

Your job will be primarily visual. It shall be your guiding hand and artistic eye that decides what the end-user will see in either the app they're using, or the browser window on their desktop. You're an organiser of aesthetics – from colors and typefaces to imagery, buttons and navigation menus. 

It's not all just moving pretty pictures around and avoiding Comic Sans, though. Debugging and designing applications along with code analysis are very much in the purview of a front-end developer. 

A big part of your job is ensuring the user gets everything they seek in a straightforward manner. Attention spans are at an all-time low. You've got about three seconds to dazzle and delight a visitor while also keeping the navigation idiot-proof.

Basic skills required

By and large, the languages you'll be most exposed to will be JavaScript, CSS and HTML. If you've never coded before, don't worry too much. None of these programming disciplines is especially obtuse and their syntax is relatively easy to pick up.

CSS (Cascading Style Sheets) and HTML (Hyper Text Markup Language) are your entry level languages. You’ll have to master both before you can think about taking the front-end web development industry by storm. The good news: in a month you can gain a solid working knowledge of either of these.

JavaScript is a much more powerful beast that can let you craft more complex web applications. For example, JS can be used to enhance the functionality of any user interface, or it may be leveraged to make modest-sized games, interactive maps or just about anything your heart desires.

The code you'll produce will run on the user’s favorite browser of choice (if all goes to plan). As a front-end web developer, you're in charge of making sure that there are no bugs or glitches that negatively affect the viewing experience. Expect to divide your time fairly evenly between layouts, typography, color theory and grid systems, not to mention making sure that the design you have appears as intended. In today's market, with a bunch of different tablet, phone and desktop platforms and browsers to serve, this can be a challenge.

Intermediate skills

The next step up from making static sites for small businesses (or opportunistic family members who probably don't pay too well) is a job managing an existing corporate site. In this role it's more likely you'll not be making everything from scratch, rather you'll be maintaining and tweaking to an established front-end framework. Basically, these give you a better means to hit the ground running and code faster.

If the site leans more to CSS there's a good chance you'll be working with a popular framework called Bootstrap. Alternatively, you may also need to use popular JavaScript frameworks like Backbone, AngularJS, ReactJS and Ember.

Weird names aside, these frameworks are singular in their purpose: to provide you with a pre-baked structure that can be easily used with a vast libraries of ready-made code to minimise your need to code from scratch. It's also highly likely that you'll need to know your way around image editing software, most likely Adobe Photoshop. A front-end dev isn't expected to be the modern day Creative Cloud equivalent of Rembrant, however. You'll be able to get by with basic knowledge of resizing/cropping, file size optimization, and have the ability to "touch up" images that may not be to spec when supplied by photographers.

Front-end programming jobs

Business is booming in web development and front-end aficionados are in relatively high demand. There are, however, a number of specialised roles that fall under the umbrella of “front-end dev” or “web designer”.

The most common divider you'll see in advertised roles is between UX/UI designers or “User Experience” and “User Interface” respectively. The UX professional is something of a focus tester, a deliberate breaker of things who's out to guarantee that the site is not just functionally sound but also geared to appease a very specific user/customer. Meanwhile, the UI designer is more about making the visual elements of any app or site “pop” in such a way as to snag the eye.

Qualifications checklist

A quick glance at websites offering “by the numbers resume templates” tells us that the following traits are desirable in a hireable front-end designer:

  • Adept at web markup, including HTML5, CSS3.
  • Fundamental understanding of CSS pre-processing platforms.
  • Skillful understanding of client-side scripting and JavaScript frameworks (JavaScript fluency is a bare minimum).
  • Decent understanding of advanced JavaScript libraries and frameworks, such as KnockoutJS, AngularJS, ReactJS, BackboneJS, DurandalJS and the like.
  • Good understanding of partial page updates and asynchronous request handling
  • Can use image editing software tools (like Photoshop or Gimp) to be able to resize, crop or enact modest changes to an image.
  • Can problem-solve cross-browser compatibility challenges.
  • Basic understanding of code versioning tools.
  • Proficient in SEO principles and how to implement them.

 

What is back-end development?

Back-end development is the “server side” role of web development. Essentially, your purview is that of a behind-the-scenes database communicating to a browser and, more importantly, to build and maintain server technology.

You're about the complex side of things: the interrelationship between server, application and end-user. You can expect your day-to-day to include implementing site-wide changes and updates, monitoring functionality, and writing the code that governs database information. You're less about making pretty window dressing and more about building and maintaining the framework holding said panes up (and indeed the entire shop structure around it). No pressure at all. 

Basic skills required

The average back-end developer is quite familiar with the programming languages used by their front-end counterparts (think: JavaScript, CSS and HTML).

That said, running sites and servers will require you to be much more multilingual than the UI/UX artistes. It's not uncommon for a back-end dev to be fluent in Python, PHP, Ruby, and .Net (read: C# and/or VB).

Basically, there are two types of back-end programming techniques: Object Oriented (OOP) or Functional. The former is action-based as functional uses statements can be executed in any order (known as declarative language). Popular Functional languages include F#, R and SQL (more on this one in a second). Meanwhile, OOP focuses on statements that should be executed in an especial order. Popular languages that use this technique are .NET, and Python.

You'll need many different languages under your belt in order to wrangle and reliably deliver the data required for what's commonly known as a dynamic site. Practically any front-end developer can make the alternative, a static site. But a dynamic site needs to handle an ever-changing collection of user and company data.

Obviously, when you're dealing with sensitive information this means you'll need to be well across security protocols, procedures and the like. Once you get your head around the basics of the back-end, you'll need to familiarise yourself with popular tools. These are required to locate, secure, or swap data and then fire it on back it back to the end-user in a timely fashion. At the time of writing some preferred options that facilitate this are Oracle, MySQL, MongoDB, PostgreSQ and SQL Server. 

Intermediate skills

Nowadays you can also expect to see back-end job listings that require experience with Linux and version control software, like Git, CVS or SVN. It would also be a boon for you to know your way around handy PHP frameworks like CakePHP, Zend or Symfony.

Often, a company will offer a mobile app for iOS or Android along with their main website as well, which requires a slightly different set of skills. To retrieve data for display, these apps are going to need an Application Programmer Interface (API) to connect to. You'll therefore need to make sense of JavaScript Object Notation (JSON) and/or eXtensible Markup Language (XML).

Obviously, while one part of the job is to be a technically-minded problem solver, some decent communication skills are going to be needed as well. Clients who may not be anywhere near as tech-savy as you will need to be walked through your server/database borax. You'll need to discover your customer's requirements while helping to explain complex technology and architecture.

One of the more recent developments for back-end devs is blockchain engineering. Being able to build decentralised applications (DAPPS) from scratch or integrating them in existing website frameworks has become an increasingly desirable skill to have in your resume.

Freelance Website Design Experts
$20 USD / hour
(31 reviews)
Website Design
PHP
HTML
Diseño de sitios web
Diseño gráfico
$25 USD / hour
(554 reviews)
Website Design
PHP
HTML
Magento
Diseño de sitios web
$20 USD / hour
(186 reviews)
Website Design
WordPress
PHP
HTML
Diseño de sitios web
$20 USD / hour
(65 reviews)
Website Design
Android
Mobile App Development
iPhone
Javascript

Back-end programming jobs

Back-end roles are relatively straightforward and aren't typically defined into specialties like front-end designers with their “UI” and “UX” roles. The term you're more likely to see alongside requests for a back-end developer is a “full-stack developer”. Essentially, this is IT speak for jack-of-all-trades; an individual who can comfortably handle both the front and back-ends of a job.

This typically comes about because, as mentioned earlier, a back-end dev needs to know the codebases used by the front-end dev. Once you know that, having a reasonably artistic eye is the final barrier standing between you and being an all-in-one web producing machine. Expect these highly-sought-after individuals to become a more and more common. 

Qualifications checklist

After looking through a number of websites that offer “resume templates” for especially time-poor folks, the following attributes are what's currently desirable in a back-end dev...

  • Knowledge of most front-end technologies and platforms (HTML5, CSS3 and JavaScript).
  • Is proficient with LESS, SASS and other server-side CSS preprocessors.
  • Well-versed in security compliance and accessibility (OWASP security principles especially).
  • Can consolidate multiple databases and data sources into one system
  • To support load changes, can ably manage hosting environments, including database administration and application scaling.
  • Proficiency in data migration, transformation, and scripting
  • Knowledgable of optimising output for a variety of multiple delivery platforms (mobile/desktop).
  • Can support business processes by creating database schemas.
  • Adept at many different back-end programming language (e.g. Python, Java, PHP, .NET).
  • Well-versed in Git and other code versioning software.
  • In a distributed server environments, an understanding of “session management”.

 

 

Hire expert freelancers for any job, online
Millions of small businesses use Freelancer to turn their ideas into reality.
Post a Project

Mantente actualizado

Suscríbete a nuestro boletín de noticias para mantenerte al día en los temas que importan.
¡Gracias por suscribirte! Revisa tu bandeja de entrada para nuestra próxima actualización.