Logo de FreelancerCómo funcionaExplorar Trabajos Iniciar sesión Registrarse Publicar un proyecto
Find Jobs
Hire Freelancers
Get Ideas
About
Resources
The ultimate guide to hiring a web developer in 2021

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? We'll teach all of the skills required for both jobs.
21 ene 2020 • Lectura de 7 minuto(s)
 Foto de portada

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.

Featured Work in Website Design

Portfolio item image
Funds Management - Website Design
by dendenn
Portfolio item image
Web Development for a Shopify Store
by srinivasmmishra
Portfolio item image
Homepage Redesign
by JohnFLAG
Portfolio item image
Website User Interface
by bilgeberkay

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.  Y ou'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

Avatar del usuario
Bandera de Pushpa T. @Software9981
10 USD / hour
4,8 (53 comentarios) PHP C Programming Java JavaScript Website Design
Visit profile
Avatar del usuario
Bandera de ✔ Webbook Studio, Ukraine @webbookstudio
15 USD / hour
5,0 (427 comentarios) PHP JavaScript XML Script Install Website Design
Visit profile
Avatar del usuario
Bandera de gurjeetsingh344 @gurjeetsingh344
30 USD / hour
5,0 (277 comentarios) PHP ASP JavaScript .NET Website Design
Visit profile
Avatar del usuario
Bandera de Devinkumar T. @freshonsolutions
20 USD / hour
5,0 (171 comentarios) PHP JavaScript Website Design Graphic Design Mobile App Development
Visit profile

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”.

Featured Work in Website Design

Portfolio item image
Reworked WooCommerce Shop
by syrwebdevelopmen
Portfolio item image
Website Design on Mobile
by asu5a0ae85373caa
Portfolio item image
Web, App and Brochure Design
by fenixmuppet
Portfolio item image
UI/UX Mobile Apps
by stdyka
 
 

Historias relacionadas

7 tips to become a better web developer
Lectura de 4 min(s)
Top tips for back end web development
Lectura de 6 min(s)
How to hire a full stack web developer
Lectura de 7 min(s)
How to find and hire backend software developers 
Lectura de 5 min(s)
The 10 best tools for web development
Lectura de 9 min(s)

Mantente al día

Suscríbete a nuestro boletín para mantenerte actualizado en temas que importan.
¡Gracias por suscribirte! Mantente atento a tu bandeja de entrada para nuestra próxima actualización.
La dirección de correo electrónico ya está suscrita.
Vaya, algo salió mal. Por favor, intenta de nuevo. Si el problema persiste, ponte en contacto con soporte con la siguiente información de error: Código de error:

Habla con uno de nuestros Copilotos técnicos para que te ayude con tu proyecto

Recibe ayuda ahora

Artículos recomendados solo para ti

 Foto de miniatura de artículo Building your business' website from the ground up
Learn the complete end-to-end process of building a successful website for your business in our comprehensive guide 
19 min read
 Foto de miniatura de artículo Your complete guide to hiring a programmer
You can hire a programmer to solve just about any complex problem, the problem is knowing how to hire the right professional for the job. Learn how..
13 min read
 Foto de miniatura de artículo Why hiring a graphic designer is vital for your business in 2020
Great graphic design will solidify your brand identity and drive revenue. Find out how to hire a great designer and what you should expect to pay.
9 min read
 Foto de miniatura de artículo Why your website needs great writing
The copy on your website matters. Hiring a professional writer will help you engage, inform and motivate your customers to convert to your offering.
4 min read
Usuarios registrados Total de empleos publicados
Freelancer ® is a registered Trademark of Freelancer Technology Pty Limited (ACN 142 189 759)
Copyright © 2022 Freelancer Technology Pty Limited (ACN 142 189 759)
There is no internet connection
Cargando visualización previa