The 10 skills you need to get your first front-end developer job
What is a front-end developer?
This recent article did a great job in clarifying the
different types of web development services, but for now, I want to focus on the
front-end developers. To summarize, front-end developers encode websites using
the basic components of HTML, CSS and JavaScript (more on this shortly). They
are the ones who take a design and develop it on a website that works.
If you are looking to enter technology, front-end development
is a direct and versatile way to get there. You will have a specific skill base
that will make you attractive to employers, but one that is broad enough to
allow you to find a job opportunity that works for you. Trust me, there is no
shortage of demand for front-end development in a variety of jobs and
environments.
For some of you, this miniature may be enough to start with
your own coding odyssey. But if you're like me and you find it easier to move
forward with specific details that you can visualize, an overview of the skills
you'll need for front-end development can be useful.
A quick analysis of the lists of current jobs for developers
of user applications shows that there is a clear and common set of skills that
employers are looking for. As I write this, the first three front end developer
job listings that I got on Glassblower have a lot in common.
The three (One North Interactive, End Masse Entertainment
and Aha! Labs) share the HTML, CSS and JavaScript codes mentioned above in
their list of ratings. It is possible that you have already discovered that
part. But there are also some less familiar terms that float in the listings.
Version control? Preprocessing platforms? Frames?
These are all terms that you will find very familiar as you
begin to learn technical skills, but to facilitate it, here is a compact list
(and description) of 10 essential skills that every front end developer needs.
10 skills that the Front End developer should have
1. HTML / CSS
I know, these two terms keep showing up. However, there is a
good reason. You will not find a single list of front-end developer jobs that
does not require (or assume) a domain in these two languages.
But let's take a step back and see what HTML and CSS are.
The hypertext markup language (HTML) is the standard markup
language used to create web pages. A markup language is your way of making
notes in a digital document that can be distinguished from normal text. It is
the most basic building block you will need to develop websites.
CSS (cascading style sheets) is the language used to present
the document you create with HTML. Where HTML comes first and creates the basis
for your page, CSS is presented below and used to create the design, color,
fonts and ... well, the style of the page!
Both languages are absolutely essential to be a front-end
developer. In a nutshell, there is no HTML / CSS, no web development.
2. JavaScript / jQuery
Another MAIN tool in your front-end developer toolbox will
be JavaScript (JS). Where HTML is a markup language and CSS is a style sheet
language, JS is the first language I mentioned that is a programming language
for bonfires. What is the difference? Where HTML and CSS determine the
presentation of a page, JS determines the function.
In some cases, a website or a very simple web page is fine,
but for situations where you need interactive features (audio and video, games,
scrolling capabilities, page animations) JS is the tool you will use to
implement them (although as CSS evolves, it is beginning to handle many of
these duties as well).
One interesting thing to keep in mind about JS is the
existence of libraries like jQuery, a collection of add-ons and extensions that
make JS faster and easier to use on your website. jQuery takes common tasks
that require several lines of JS code and compresses them into a format that
can be executed with a single line. This will be very helpful when you are
coding with JS. Unless, of course, you do not like to save time. ;)
3. CSS and JavaScript Frameworks
Wait, we already cover CSS and JavaScript, right?
We did, but both are such an important part of front-end
development that many of the other skills you will need will develop from them.
CSS and JavaScript frameworks are collections of CSS or JS
files that do a lot of work for you by providing common functionality (think
about logging into a website or searching a blog). Instead of starting with a
VOID text document, start with a code file that already has many incredible JS.
Frames have their strengths and weaknesses, not all! -And it
is important to choose the best framework for the type of website you are
creating. For example, some JS frameworks are excellent for creating complex
user interfaces, while others are great for displaying all the content on your
site.
To make things even MORE fun, you can use frames together.
It is common to link Bootstrap with another JavaScript framework such as
AngularJS. The content is handled by Angular, and the appearance is handled by
Bootstrap (also with some CSS).
Since you will use CSS and JS all the time in your web
development, and since many projects start with similar elements and style
code, the knowledge of these frameworks is fundamental to be an efficient
developer.
4. CSS preprocessing
Yes, another skill related to CSS!
CSS alone, although essential, can sometimes be limiting.
One of these limitations is the fact that you cannot define variables,
functions or perform arithmetic operations. This is a problem when a project
grows in scale and code base, since you will soon lose a lot of time writing
repetitive code to make changes. Like CSS (and JS) frameworks, CSS
preprocessing is another way to make your life as a developer easier and more
flexible.
By using a CSS preprocessor such as Sass, LESS or Stylus,
you can write code in the preprocessor language (which allows you to do things
that could be a big problem with the old CSS). The preprocessor then converts
that code to CSS to work on your website.
Suppose you decide to change the shade of blue you are using
in a site. With a CSS preprocessor, you would only have to change the
hexadecimal value in one place instead of passing ALLLL your CSS and changing
the hexadecimal values everywhere.
5. Version control / Get
Almost half of the list, and finally we have a skill without
HTML, CSS or JS in the name.
However, it is still totally related!
After all your hard work with HTML, style with CSS and
programming with JS, you will have gone through several revisions in your
development.
If something goes wrong along the way, the last thing you
want to do is start all over again from the beginning. Version control is the
process of tracking and controlling changes in your source code so that this
does not happen.
The version control software, like the open source
unconditional Get, is a tool that you will use to track those changes so you
can go back to an earlier version of your work and discover what went wrong
without disrupting everything.
As you can imagine, this is a skill that you (and your
potential clients and employers) will be very happy to have.
6. Responsive design
Remember the other day when you only used a device to look
at a website? Yes me neither. The days when desktop computers (or even laptops)
are the only way to see websites are so far away that I will not go out and
talk about them.
These days we use any number of computers, phones and
tablets to look at web pages. Have you noticed how these pages fit the device
you are using without you doing anything about it? This is due to responsive
design. Understanding the principles of responsive design and how to implement
them on the coding side is key to front-end development.
One interesting thing to keep in mind regarding responsive
design is that it is an intrinsic part of CSS frameworks like the
aforementioned Bootstrap. These skills are all interconnected and, therefore,
as you learn one, you will often progress in the others at the same time.
7. Testing / debugging
From a website for the business of walking their mother's
dogs to an international site for online banking, mistakes are a reality of the
development process. To keep things moving, you'll need to test your code for
errors along the way, so the ability to test and debug makes the list of skills
essential for front-end developers.
There are a couple of different test methods for web
development. Functional tests analyze a particular part of the functionality of
your site (such as a form or database) and make sure that you do everything
that you have programmed.
The unit test is another method. Test the smallest bit of
code that is responsible for something on your site and examine it individually
for proper operation.
Testing is an important part of the front-end development
process, but, fortunately, it is another area where there are frameworks to
help you. Programs like Mocha and Jasmine are designed to speed up and simplify
the testing process.
8. Browser development tools
Ultimately, users will be interacting with their websites
through a web browser. The way browsers represent your site will be an
important part of whether your work is successful or not.
Similarly, to the tests and debugging mentioned above, all
modern web browsers come equipped with developer tools. These tools allow you
to test and adjust your pages in the browser itself, specifically to how the
browser interprets your code.
Details may vary from one browser to another, but browser
development tools generally consist of an inspector and a JavaScript console.
The inspector lets you see how the HTML looks at run time on your page, what
CSS is associated with each page element and also allows you to edit your HTML
and CSS and see the changes live as they occur. The JS console allows you to
see any errors that may occur while the browser is trying to execute its JS
code.
9. Construction and automation tools / Web performance
You may be seeing a pattern in which HTML, CSS and
JavaScript are the three main tools for front-end development. Meanwhile, most
of the other skills help make those tools more efficient or help prove your
site and correct errors. The trend continues here with the tools of
construction and automation and web performance.
You can code the most attractive website in history, but if
it works slowly at the end of the user, it will not matter. Web performance
talks about the amount of time it takes to load your site. If you have problems
with performance times, there are steps you can take to improve them, such as
optimizing images (scaling and compressing images for maximum web performance)
and minimizing CSS and JavaScript (removing all unnecessary characters from
your code without changing the functionality).
Carrying out these tasks that lead to better web performance
can be another source of time for the front-end, but that's where the building
and automation tools come in. Programs such as Grunt and gulp can be used to
automate image optimization, CSS and JS, and other applications performance
tasks. In the continuous search for efficiency, you will be interested in
becoming familiar with them.
10. Command line
In many ways, the proliferation of graphical user interfaces
(GUI) in computing was one of the best things that ever happened. Who wants to
write esoteric command lines on a dead screen to move around a machine? It is
much easier to point and click on an animated and interactive menu.
GUIs can also be attractive when it comes to web development
and coding. And they are often fine and practical. But a GUI for all purposes
will have its limitations for some specific applications. There will be times
when you must open a terminal on your computer where you can enter the written
commands (command line) to get what you need.
It is the difference between your computer, which only
offers what is available on the surface and the possibility of obtaining what
you need when digging with your own hands.
Even if most of your work is still done through a GUI, it
will add credibility to your front-end skills if you have a command-line
domain.
Soft skills
As easy as it is to look at the new and sophisticated sound
skills you'll need in a technology career, there are some more familiar skills
that you should not overlook.
Back to the front-end developer lists on Glassblower, the
One North list asks, before any technical skill:
"Respect and admiration for the culture, the process
and the trade of web development, as well as the understanding of the client's
experience, appreciating what is needed to form long-term relationships with
the client".
As much as:
"An ability to work in a team and work with people
through the capabilities of the agency."
"The written and verbal communication skills necessary
to effectively articulate his technology team."
At the end of the day, these kinds of soft skills are as
essential to technology as they are to any other industry. Do not forget to
continue perfecting your general professionalism as you progress on your way to
a new career in the most innovative and modern field! And check out the
infographic below to get an overview of the skills you need.
