Technical Community

What is a Front-end Developer and How to Become One?

June 19 ,2019

When you are reading this article, front-end developer has become a common job title in this software development industry. And there’s a bunch of blogs about the very topic “what is a front-end developer“.

However, if you are new to the industry and want to learn more about this job, then this article is for you. In this blog, we’ll cover these 4 questions:

  • What does a front-end developer do?
  • What skills do they need to perform this job?
  • Where could a beginner learn to become a skilled front-end developer?
  • What kind of tools does a front-end developer need?

1. What is a front-end developer or what does a front-end developer do?

a. Produce HTML, CSS, JS

what is a front-end developer
Image: Frontend Masters

This is the most important task of a front-end developer whether you are a junior or an experienced engineer.

It is worth knowing that everything a user lands eyes on in a browser is a mix of HTML, CSS, and JavaScript. So, practically, a front-end developer will need to use those web technologies and some other ones to build websites and applications. These products will run on the open web platform or perform as compilation input for non-web platform environments.

As a result, users can see and interact with your product directly through content, buttons, images, navigation, and internal links built by those HTML, CSS and JS lines of code.

b. Ensure the product is easy to use

While creating interactions, a front-end developer has to work with the product’s UI and UX.

front-end developer
Image: CareerFoundry
what is a front-end developer
Image: CareerFoundry

The idea here is to serve a perfect visit to every user who comes to the web. You, as a front-end developer need to work with designers and back-end programmers to make the UI as simple and effective as possible.

Meanwhile, when it comes to UX, a front-end developer’s mission is improving or enhancing the usability, accessibility, and interaction between users and products.

  • Besides those two most important tasks, you must:
  • Make sure the site appears correctly in different browsers, OS, devices.
  • Implement design for mobile sites.
  • Maintain software workflow management.
  • Look at SEO best practices.
  • Test the site for usability and fix any bugs.

2. What skills do they need?

A. HTML

HTML is the thing that builds up a website’s structure and content. That’s why every front-end developer needs to be familiar with this language. HTML elements can annotate headers, footers, the display of text, media and images, etc.

what is a front-end developer
Image: Lynda.com

Many programmers underestimate the importance of HTML. But little do they know that it takes great skills and practices to deliver lean and clear HTML.

It’s essential to know how to combine all elements correctly and effectively. As a front-end developer, you must have good knowledge of common HTML elements such as default layout rules, styling, HTML semantic and contextual usage.

b. CSS

CSS is broken into modules and comprises the code for every graphic element—from backgrounds to font—that make up the look and feel of a website.

what is a front-end developer
Image: Lynda.com

To answer the question “what is a front-end developer” and master CSS, one must understand fundamental concepts of CSS like cascading, specificity rules, selectors, inheritance, box model and stacking context.

After getting to know all the basics, it’s time to have some ideas of OOCSS (object-oriented CSS) or start practicing some points from CSS guidelines.

On top of that, experienced front-end developers must have some tips and tricks of their own. For example, they must know all the tricks to vertically align contents while Flexbox is not yet mainstream. They must also know when to use pseudo-elements, CSS shape tricks, icon fonts, or sprite sheets, etc. to achieve the UI designs with best performance and compatibility results.

And finally, an up-to-date front-end developer should be able to use a CSS preprocessor to enhance maintainability and productivity.

c. JavaScript

Thanks to its huge resources, JavaScript is the core of a front-end development process. This one is the first client-side language and the most ubiquitous front-end script on the web.

front-end developer
Image: creativebloq.com

At any level, there are three key features of JavaScript that are crucial to your comprehension of the language; they are prototype chain, closures, and ‘this’ keyword. Other main features of the language such as dynamic typing, literals, variable and function hoisting… should be understood as well.

At the time you want to know more of JavaScript, let’s learn JS idioms, patterns, modules and maybe an MV* framework all along.

d. Git

With Git, we can keep track of changes. Besides, GitHub gives people the ability to submit the issues that clients have with the product and they can also request a new feature. Furthermore, your code will be better and your skills will be improved due to the fact that we can revise our work and improve it once there’s a bug.

front end developer
Image: LogRocket Blog

In general, a front-end developer must be comfortable when working with feature branches, rebasing their work on the work of others, squashing commits using interactive rebase, and doing work in small units that are unlikely to cause conflicts whenever possible.

e. UI skills set

As mentioned above, a front-end development must understand how a website’s UX/UI works so that they can improve or enhance the product.

what is a front end developer
Image: X Effect Studio

That said, you should have an understanding of typography, UI and animation concepts and can speak UI jargon fluently with your UX/UI designer fellows. (i.e: hamburger button, hero banner, the fold…)

What’s more? To get assets for your UI development as well as extract parameters (opacity, gradient, colors…) you must know how to use Adobe Photoshop or Sketch.

Besides all the above most important skills, learning how to use some query languages such as RESTful or GraphQL is also a must to every front-end developer.

3. Best resources to learn front-end development

what is a front-end developer

a. HTML

  • HTML5 Doctor: Reliable reference to HTML5 elements’ usage, especially in a semantic way.
  • HTML basic tutorial: Basic HTML tutorials

b. CSS

  • CSS Tutorials from webplatform.org
  • OOCSS: Object-Oriented CSS methodology by Nicole Sullivan
  • CSS Guidelines by CSS Wizardry – Harry Robert
  • CSS Tricks: Who does CSS and hasn’t visited this site before?

c. JavaScript

  • Eloquent JavaScript: Very good book for JS newbie, and it’s free.
  • JavaScript Enlightenment: Another good book for newbies.
  • Idiomatic JavaScript: Sometimes you read others’ JS code and can’t get it. Those “cypher” may be decoded here.
  • TodoMVC: A go-to site for MVC frameworks evaluation and comparison
  • Writing Modular JS: More details on modern JS modules
  • Understanding ES6: Learn ECMAScript 6 with Nicholas C. Zakas

d. UX/UI

  • About Face: The Essentials of Interaction Design
  • Design for Hackers: Reverse Engineering Beauty
  • Design for Non-Designers
  • Designing Interfaces
  • Designing Web Interfaces: Principles and Patterns for Rich Interactions
  • Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability

4. Helpful tools

what is a front-end developer

Just as other works, we all need tools to make our processes go smoothly and effectively. And just like learning resources, Designveloper will show you the tool to improve your productivity for each key skill.

a. HTML

HTML Templates/Boilerplates/Starter Kits:
  • dCodes
  • Email-Boilerplate
  • HTML5 Boilerplate
  • HTML5 Bones
  • Mobile boilerplate
HTML Polyfill:
  • html5shiv
Transpiling:
  • Pug
  • Markdown
References:
  • Element attributes
  • Elements
  • HTML Arrows
  • HTML Entity Lookup
  • htmlreference.io
  • HEAD – A free guide to elements
Linting/Hinting:
  • HTMLHint
  • html-inspector
Optimizer:
  • HTML Minifier
Online Creation/Generation/Experimentation Tools:
  • tablesgenerator.com
Authoring Conventions:
  • HTML Code Guide
  • Principles of Writing Consistent, Idiomatic HTML
Workflow:
  • Emmet
HTML Outliner:
  • HTML 5 Outliner

b. CSS

CSS Utilities:
  • Basscss
  • Skeleton
  • Shed
  • Tailwind CSS
  • Tachyons
CSS Frameworks (utilities + UI):
  • Base
  • Bulma
  • Bootstrap 4
  • Concise
  • Foundation
  • Material Design Lite (MDL)
  • Metro UI
  • Mini.css
  • Mobi.css
  • Picnic
  • Pure.css
  • Semantic UI
  • Shoelace
  • Spectre.css
Mobile Only CSS Frameworks:
  • Ratchet
CSS Reset:
  • Eric Meyer’s “Reset CSS” 2.0
  • Normalize
  • sanitize.css
Transpiling:
  • pleeease.io
  • PostCSS & cssnext
  • rework & myth
References:
  • CSS Cursors
  • css3test.com
  • css3clickchart.com
  • cssreference.io
  • CSS Indexes – A listing of every term defined by CSS specs
  • css4-selectors.com
  • css4 Rocks
  • CSS TRIGGERS…A GAME OF LAYOUT, PAINT, AND COMPOSITE
  • CSS Tricks Almanac
  • cssvalues.com
  • MDN CSS Reference
  • CSS Cheat Sheet
Linting/Hinting:
  • CSS Lint
  • stylelint
Code Formatter/Beautifier:
  • CSScomb
  • CSSfmt
Optimizer:
  • clear-css
  • cssnano
  • CSSO
  • purgecss
Online Creation/Generation/Experimentation Tools:
  • CSS Arrow Please
  • CSS Matic
  • Enjoy CSS
  • Flexbox Playground
  • flexplorer
  • patternify.com
  • patternizer.com
  • Ultimate CSS Gradient Generator
SC5 STYLE GUIDE GENERATOR
  • styleguide-generators
  • Catalog

c. JavaScript

JS Utilities:
  • accounting.js
  • async
  • axios
  • chance
  • date-fns
  • format.js
  • immutable
  • is.js
  • lodash
  • You-Dont-Need-Lodash-Underscore
  • Luxon
  • Math.js
  • Moment.js
  • Numeral.js
  • Ramda
  • RxJS
  • string.js
  • voca
  • wait
  • xregexp.com
Transforming JavaScript Objects Tool:
  • transform-www
Transpiling / Type Checking (ES to ES):
  • Babel
  • TypeScript
  • Flow
Code-analysis Engine:
  • Tern
Linting/Hinting & Style Linter:
  • Eslint
Unit Testing:
  • AVA
  • Jasmine
  • Mocha
  • Tape
Testing Assertions for Unit Testing:
  • Chai
  • expect.js
  • should.js
Test Spies, Stubs, and Mocks for Unit Testing:
  • sinon.js
  • Kakapo.js
Code Formater/Beautifier:
  • esformatter
  • js-beautify
  • jsfmt
  • prettier
Performance Testing:
  • benchmark.js
  • jsperf.com
Visualization, Static Analysis, Complexity, Coverage Tools:
  • Esprima
  • Istanbul
Optimizer:
  • Closure Compiler
  • UglifyJS 2
  • optimize-js
  • Prepack
Obfuscate:
  • Javascript Obfuscator [free to $]
  • JScrambler [$]
Sharable/Runnable Code Editors:
  • CodeSandbox [free to $]
  • Online Regular Expression Editors/Visual Tools:
  • debuggex
  • regex101
  • regexper
  • RegExr
  • extendsclass
  • regextester
Authoring Convention Tools:
  • Airbnb’s ESLint config, following our style guide
  • Standard – ESLint Shareable Config

Phew, so this is the end, we hope that you enjoyed this piece of writing. But aren’t you interested in this title? Here’s good news for you! Designveloper is looking for front-end developers, so let’s join us now to figure out what is a front-end developer yourself. Click here to find out more!

And don’t forget to follow our Facebook, Twitter and LinkedIn.

Related article:

Also published on

Share post on