WHAT EXACTLY IS A FRONT END DEVELOPER?

Do you love looking at beautiful websites? Do you want to have the

power to do cool things like make websites interactive, work with
gorgeous typography, and turn ideas into actual websites that are a
joy to use? You’re in the right place! Front end development skills will
give you the tools you need to make it happen.

Front end developers build the “presentation layer” of a website. In

other words, all the parts that the user sees—the layouts, buttons,
forms, and more—are powered by code written by a front end
developer.

By contrast, back end developers take care of all the

behind-the-scenes stuff: the servers, databases, and apps (including
content management systems and ecommerce platforms, among
other things) that make a website run.

Front end developers work with HTML, CSS, and JavaScript code to
build the presentation layer. They need to be familiar with things like
responsive design, user experience design, and modern web
standards. They also need to understand the constraints of what can
be done with back end code.

Granted, you can build some websites without using backend skills
(other than being able to upload your site files to a web server). There
are even content management systems (especially flat file
CMSs—those that don’t use a database to store information, but
rather store everything in separate files) and ecommerce platforms
that don’t require you to have skills beyond HTML, CSS, and JS.
 FRONT END TECHNOLOGIES YOU SHOULD
KNOW ABOUT (AKA, THE SKILLS YOU NEED)
HTML & HTML5
HTML is short for “hypertext markup language” and it’s the coding
language used to build websites. Every single website in the world is
built with HTML and it’s the only thing you need in order to make a
website (although it will be pretty basic—think: 1995).

HTML5 is the latest version of HTML (although they are working on

HTML6!), and it made it possible to do a bunch of advanced things with
HTML, such as find someone’s geolocation, create local databases for
offline viewing, and more.

CSS & CSS3

CSS is a styling language that allows you to make HTML look pretty.
CSS is used on almost every website in the world and you are
DEFINITELY going to want to use it on your website.

CSS3 is the latest version of CSS, and it made a bunch of cool new
features available, including animations, color gradients, text effects,
new ways to select what HTML element you are describing, and
something called flexbox which makes it possible to design seamless
websites that work across every device you can image.

ALL THINGS RESPONSIVE

Responsive Web Development is just a way to use the latest features
of HTML and CSS to make sure that your websites work on every
browser and mobile device. Think about it less like a specific, isolated
skill, and more like the new way to do everything. All design and
development needs to be responsive these days, since we access the
Internet in so many places besides our desktop computers.

VANILLA JAVASCRIPT
JavaScript is a programming language that works in your browser.
JavaScript can do ALL kinds of things, but in particular, you will use it to
make heavily interactive web user experiences.

The Ultimate Guide to Becoming a Front End Developer 2

 JavaScript is like the LATIN of front end technologies. Everything that’s
cutting edge in front end technologies is built on top of JavaScript. So
you gotta know it!

Check out ​
vanilla-js.com​
for more!

jQUERY
jQuery is the most popular and commonly used JavaScript framework.
It’s also been around the longest!

You can use jQuery (as a kind of JavaScript shorthand) to create

interactive elements on your website from scratch. Or, you can take
advantage of work other developers have done for you and use one of
the thousands of jQuery plugins that are available for free on the Web
in jQuery libraries.

OTHER JAVASCRIPT FRAMEWORKS

jQuery is just the tip of the iceberg. JavaScript frameworks are one of
the “hottest” trends in front end development right now, and there are
plenty to choose from. The purpose of these frameworks is to make it
possible (and easy) to do all kinds of cool things with JavaScript that
were previously only possible with backend frameworks. Some
popular JavaScript frameworks:

Angular.js
React.js
Ember.js
Backbone.js

All of these front end technologies together are used to build the parts
of websites you (and billions of other internet users) see every day!

The Ultimate Guide to Becoming a Front End Developer 3

 THINGS A FRONT END DEVELOPER BUILDS

As already mentioned, front end developers (or those with front end
dev skills) have a hand in building every website and web app out
there that has any kind of presentation layer (which is almost all of
them now).

Check out some of the awesome websites created (at least in part)
with front end developer skills on the next few pages.

(Click on each image to go to the site itself to see animations,

interactions, and more in action.)

Legwork Studio

The Ultimate Guide to Becoming a Front End Developer 4

 Void

The Boat

The Ultimate Guide to Becoming a Front End Developer 5

 Wrap Genius

The Wes Anderson Collection

The Ultimate Guide to Becoming a Front End Developer 6

 Airbnb

OpenGov

The Ultimate Guide to Becoming a Front End Developer 7

 Pixate

As you can see from those examples, you can build pretty much
anything with front end developer skills.

The Ultimate Guide to Becoming a Front End Developer 8

 THE PERKS OF THE JOB
Front end development has a ton of great perks for anyone who loves
to use code to solve problems and help create amazing user
experiences.

Front end developers are in high demand, which means salaries for
even entry-level positions are ​
super​competitive. Add to that airtight
job security and tons of available jobs, and you can see there are a lot
of options out there for anyone who wants to get into front end dev.

SALARY AND COMPENSATION

Salaries for front end developer jobs vary depending on location and
what level the position is. But the good news is that almost every front
end developer position is well-paid, starting around ​$70,000 per year​
.

Entry-level jobs in front end development, in high-demand areas like

San Francisco or NYC, can start in the low 6-figures. And salaries only
go up from there depending on experience and the particular market.

Front end dev jobs at some companies can even reach over $200,000,
depending on expertise, and over $150,000 is not uncommon for a
senior dev.

The point of all this is that from day one as a front end developer, you
can make good money, and it only gets better with experience and
added skills!

TYPES OF COMPANIES HIRING

Front end dev jobs are available at virtually any company that has an
in-house web development team. Tech companies like Spotify, Apple,
Skype, Groupon, Reddit, and eBay all hire front end devs as both
employees and contractors (making it a great career path for
freelancers, too!).

But in addition to tech companies, you’ll find front end developers at

media companies like CNBC, financial companies like Fidelity
Investments, and retailers like Barnes & Noble. Front end development
can be a great way to work in virtually any industry you’re passionate
about because every business under the sun needs a fresh website.

The Ultimate Guide to Becoming a Front End Developer 9

 EXAMPLE JOB LISTINGS
There are tons of front end developer job listings out there. They come
with a few different possible job titles, though, so you may want to get
creative in your searches.

The two key titles to search for in addition to “front end developer” are
JavaScript Developer​and ​
Front End Engineer​ . You might also find some
front end dev jobs listed as just ​
Web Developer​ , too.

Note: Be sure to check for the variations “front-end,” “frontend,” and “front
end,” as they are all used in the industry. Talk about cutting edge—we
haven’t agreed on a title yet!

Junior Front End Developer​

☆​ , SmartBug Media (Remote)
In addition to creating stunning websites and experiences that deliver
measurable impacts for our clients, our development team is valued
for their contributions, ideas and process improvements. You’ll have a
seat at the table as we adopt new technology, build and implement
best practices and have a great time doing it. This junior position has
room to grow into great opportunities.

We’re looking for responsible developers that have experience

working remotely and delivering high quality work. We also want you
to be a long-standing member of our team that will look back years
from now and be thrilled that you have made the right decision. You’ll
be challenged everyday and will gain valuable experience working with
different CMS platforms and marketing automation and analytics tools
such as HubSpot.

Front End Web Developer​

☆​ , The Atlantic (Washington, D.C.)
We are looking for a talented and knowledgeable front-end engineer
who is passionate about clean code and great journalism to join our
growing team for full-time on-site work. We welcome out-of-town
applicants willing to relocate to the DC metro area but are currently
unable to sponsor non-citizens unauthorized to work in the United
States.

The Ultimate Guide to Becoming a Front End Developer 10

 PRIMARY RESPONSIBILITIES:
● Help improve and implement our new Atlantic style guide and
CSS framework
● Write clean, maintainable, and well-organized CSS
● Write well-documented high performance JavaScript code
● Help evaluate tools such as BabelJS, Grunt, and Browserify and
how they might fit into our workflow
● Work with designers and developers to craft innovative reading
experiences
● Implement and deploy new features to TheAtlantic.com and
CityLab.com where they will be viewed by millions of people

☆​Front End Developer​ , TrendyMinds (Indianapolis, Denver, or

Remote)
We’re looking for a candidate who is passionate about building
scalable, modular and responsive websites—whether that’s using
HTML, CSS or JavaScript. We want someone who understands the
latest in front-end technology, with a good eye for design. We're
searching for a bright, energetic person who can work closely with our
creative and development teams to bring complex sites to life. This
means we want someone with experience that can make our clients
win in their competitive fields.

As a Front-End Developer, you’ll work closely with our team to bring

interactive concepts to life, meaning you need to be fast at
understanding the complex needs of enterprise organizations, but
savvy enough to pick the correct path for success.

☆​Senior Frontend Engineer (React)​ , CrowdSpring (Chicago or

Remote)
As a senior frontend engineer, you’ll have a huge impact on how we
design, build and deliver our services to millions of people. We're
looking for an extraordinarily talented engineer to join our team. Our
site is seen by millions of people around the world and we’re focused
on solving real problems. Your contributions will be immediate and
far-reaching. This isn't the kind of gig where you're handed a to-do list
from a PM - you'll help make the big decisions.

We’re looking for engineers who are not afraid to stick their neck out
in pursuit of innovation and creative solutions. People who know what

The Ultimate Guide to Becoming a Front End Developer 11

 they want, who execute against all odds, are meticulous, detail
oriented, and take pride in their work. Above all we’re looking for
passionate individuals who enjoy what they do and seek to live
balanced and happy lives.

Senior UI/JavaScript Frontend Engineer​

☆​ , Close.io (Remote)
We're looking for experienced full-time developers to join our core
team who have a strong understanding of web technologies and want
to help design, implement, and launch major user-facing features.

YOU SHOULD...
● have 3+ years experience building modern front-end
applications in JavaScript, HTML5, and CSS
● have great product sense and be able to think through user
experience issues before diving into the code
● write maintainable, testable, and performant JavaScript
● have a love for great UI
● enjoy debugging all aspects of the front-end app including
memory leaks and quirky CSS across browsers
● have experience implementing real-time (e.g. websockets,
polling, etc.) web apps
● have significant experience with REST APIs and thoroughly
understand HTTP requests

BONUS POINTS IF YOU...

● have an eye for design and experience with Photoshop, Sketch,
or similar
● have contributed open source code (core or plugins) for a
popular frontend framework such as Backbone, Angular, or
React

The Ultimate Guide to Becoming a Front End Developer 12

 PERFECT FOR A REMOTE CAREER!
One of the best parts of being a front end developer is that you can
literally do your job from anywhere with a decent internet connection.
Of course, you might have already noticed that from the job listings
above (most of them are remote, or at least remote-friendly).

Want to live in the small town where you grew up? Go for it. Want to
move to the city with the best school districts for your kids but avoid a
commute? You got it. Want to spend six months (or longer) traveling
the world without coming home broke? You can do that, too.

Imagine what your days could be like: wake up and have coffee at your
favorite coffee shop while doing a little work, hop on a plane to Europe
before lunch and work on the plane so that when you arrive at your
destination, you can take the evening to explore the city, all without
worrying about vacation days or making up for lost income!

The Ultimate Guide to Becoming a Front End Developer 13

 WHAT A FRONT END DEVELOPER CAREER
LOOKS LIKE

A career in front end development doesn’t necessarily mean you sit at

a computer coding all day. There are a ton of different career paths
that use front end dev skills.

You might start out as a junior front end developer. Junior developers
usually work on a team, under the direction of a senior developer. It’s
a great way to learn more on the job, by actually working on projects,
and gain experience at the same time. Junior front end devs usually
need minimal experience. Instead, you’ll need a portfolio that shows
you know the basics of the job and can complete projects.

From there, you can move up the ranks, taking on bigger projects and
more responsibility. Eventually, you can become a senior front end
developer, leading your own team and supervising new junior
developers. ​
Senior front end developers​ sometimes take on
​
non-development responsibilities, too, like consulting or working with
clients.

You don’t have to spend your days as a front end developer working
for a company or agency, though. There are plenty of front end
development options for those who want to freelance, or even those
who want to start their own business.

Take Adda, Skillcrush’s CEO, for example. Front end development skills
(along with other tech skills), are what set her down the path to
eventually starting Skillcrush.

The skills she learned and experience she got designing and
developing sites for companies like WNYC, Pro Publica, The Huffington
Post, and The New York Times, and also working as a technical
producer at MTV and VH1, set her up to build and launch Skillcrush
from the ground up.

Learning front end developer skills is an important building block for

all kinds of technical careers, whether you end up as a front end
developer or doing something else entirely (like starting a business)!

The Ultimate Guide to Becoming a Front End Developer 14

 FRONT END DEV SKILLS MAKE YOU BETTER AT
LOTS OF THINGS

When you think about learning a set of skills, like those a front end dev
has, you usually think about it in terms of getting a specific job. You
might be thinking, “I don’t know if I ​
want​
to be a front end developer.
So why bother learning these skills?”

The awesome thing about front end dev skills is that you can use them
for a ​
ton​
of different career paths. Like starting your own company,
being a better designer, or as a jumping off point for learning even
more.

START YOUR OWN COMPANY

You’ve seen how front end dev skills helped Adda start Skillcrush. But
tech companies aren’t the only kinds of companies that can benefit
from a founder who has developer skills.

Almost every business out there has a website now. That means every
business that isn’t designing their website in-house is working with a
web designer and developer. Knowing how to communicate with those
pros is a key way for founders and CEOs to make sure they get what
they want (with a design/dev team that respects them for knowing the
lingo and doesn’t get frustrated with vague, non-specific instructions).

Learning front end dev skills means you won’t have unscrupulous
developers taking advantage of you by using a whole bunch of jargon
that you don’t understand. Instead, you can come to the table
informed, making the entire project run more smoothly.

Even if you are creating your company’s website in-house, being able
to lead your team and speak their language makes you a much more
effective leader. Plus, being able to jump into the trenches and help
out with code as needed is a great way to keep your team motivated.

If you’re starting a company and want to minimize startup costs, you

can even create an MVP (Minimum Viable Product) version of your site
to get started, as well as mockups for presentations and other
materials for attracting investors and customers.

The Ultimate Guide to Becoming a Front End Developer 15

 BE A BETTER DESIGNER
Designers who have front end developer skills have some serious
advantages over those who don’t. Even if you do little or no actual
coding, knowing ​how​to code the front end of a website is a great skill
to add to your repertoire.

First, designers with dev skills understand what a developer needs

from them to actually make their design come to life. That means
you’ll be less frustrated by the implemented designs, and the
developers you work with will be less frustrated with your graphics.
That makes for a happier team all around!

Adding front end dev skills also makes you a more valuable employee
if you’re working as a designer for an agency or company. Being able
to jump in and help out the dev team even when your primary role is
design is super helpful and valuable. Plus, that part about having
happier teams all around is two-fold when you’re all employees
working together.

If you’re freelancing as a designer, adding front end development skills

can mean you don’t have to outsource or refer your clients to another
freelancer—you can add that extra menu (or what have you) for them.
Being able to take a client’s site from design right through to
completion on your own, without having to hire other developers, is a
great way to grow your business.

The Ultimate Guide to Becoming a Front End Developer 16

 THE PERFECT STARTING POINT FOR ANY DEV CAREER
Front end dev skills are a fantastic starting point for ​
any​kind of web
development career. Learning how the front end of a website works is
super helpful when you’re learning how the ​ back end​ of a website
works.

Plus, while each programming language out there has its own
specifics, the general concepts of how coding works stay pretty
consistent from one language to the next, whether you’re working with
JavaScript, PHP, Ruby, Python, or some other language.

Learning to work with frameworks and within web standards is also a

good building block to any kind of dev career, and front end
developers have to be great at both!

The Ultimate Guide to Becoming a Front End Developer 17

 YOUR FRONT END DEV PORTFOLIO
A super awesome portfolio is a must-have for any kind of front end
developer job. Your portfolio is what proves your value to people who
might hire you, whether as an employee or as a freelancer. Without
that proof of the work you can do, getting hired can be almost
impossible.

But what if you’re totally new to dev? What if you don’t ​

have​anything
to put in a portfolio outside of a few personal projects you’ve done
while you learn?

Good news: those little concepts and small projects are just as valid in
a portfolio as a job you might do for a high-profile client down the
road. You can use anything that shows your skills, whether it’s your
personal website, a web app or game you created for fun, or an open
source project you’ve contributed to.

On the Skillcrush blog, Deepina Kapila profiled ​

5 awesome “pretend”
projects you can add to your portfolio​regardless of where you are in
your career. Here are the ones you could use for a front end dev
portfolio. From Dee:

The DREAM client website​ – A dream client website allows you

to showcase how you think in terms of scale. I once interviewed
a self-taught developer who learned to code over the summer
and had redesigned the New York Times website on his
portfolio. It was amazing. He thought through every detail – how
it looked on tablets and mobile phones, what the app
experience was like, how comments and threading worked in
his solution and lots more. It was the only project in his portfolio
– but of course it was so thorough and thoughtfully presented, it
was all he needed to get the job.

The non profit or mom ‘n’ pop website​ – A great project to

include in your portfolio is a design or redesign of a small local
non profit or your favorite neighborhood take-out restaurant.
One of my favorite to-go haunts is a delicious Mediterranean
place named Sarah’s. I’d love to redesign their website, giving it
a completely modern feel (no flashing pointing hands for the

The Ultimate Guide to Becoming a Front End Developer 18

 special of the day) while staying true to the family’s wonderful
sense of community and humor.

I’d also love to design an html menu page because right now the
only way to view their offerings is by downloading a PDF (a pain
on my iPad and iPhone bc I have to take 3 steps to download &
view it). It also looks like they started working on a “Meet the
Chefs” page—I’d love to see this through. It would be great if
newcomers visiting the site could meet the chefs—they’d be so
taken by their personalities and warmth, they’d never be able to
resist a visit (The chefs are a married couple. Whenever I walk in
they look at me and gasp and jokingly ask, “Deepina you are
hungry AGAIN?” It’s hilarious and their ​ joie de vivre​
really comes
across in the spices in their food).

Improved mobile product UX​ – Focus on mobile UX to show

how you would improve the experience for an existing client or
brand in the mobile landscape. This is a project that allows you
to be creative within some very specific constraints. Do some
research here. Perhaps you love a website but think the mobile
experience needs an overhaul. Work towards its reinvention
and create UX deliverables every step of the way.

Redesigned newsletter template​ – This may sound like a

snooze fest, but I did this for my first portfolio while applying for
one of my first jobs in tech. One of the administrative duties of
that job was to redesign and send out newsletters about events,
interviews, breaking news, and other timely items. So before I
applied, I spent half a day redesigning the org’s newsletter,
creating 3 samples and including it all in my portfolio. Needless
to say, they were impressed. I got the interview (and two follow
ups) AND the job.

And if you’re looking for even more, check out Cameron Chapman’s
Skillcrush article on ​
more advanced projects​you can add to your
portfolio. From Cameron:

A stock theme for a popular CMS

WordPress is the most popular content management system
currently available, so it makes sense to develop a stock theme

The Ultimate Guide to Becoming a Front End Developer 19

 for WP. That said, there are tons of other options available if you
do some research.

One of the big perks about developing a stock theme is that you
can also sell it as a premium theme, generating income while
contributing to your portfolio. Or you can give your theme away
as a means of promoting yourself (consider offering support or
customization for an additional price in this case).

Look at other themes that are on the market—and what sets

them apart—and then design one of your own! ​ ThemeForest​ is
a great place to check out tons of successful theme designs.
Look at the most popular designs on the site, even if you don’t
plan to sell your theme.

And you don’t have to get too fancy. Check out these ​
simple
WordPress themes by Paul Jarvis​ .

Your portfolio itself!

If you’ve been using a stock theme, even one that’s customized,
to host your portfolio, it’s time to upgrade! Designing an entirely
custom portfolio site is a chance for you to really show off who
you are, what your design style is, and how you can do more for
your clients than your competitors do.

Really take time to plan out and create a site that is 100% you.
Think about the kinds of projects you’ll be showcasing, then
figure out the best way to display those projects. Check out ​Folio
Focus​ for some great inspiration from other designers’
portfolios.

If you want even more awesome advice on what to put in your

portfolio, check out these articles:

How to Build an Impressive Portfolio When You’re New to Tech

24 Essential Portfolio Tips For New Techies
Nothing to Put in Your Portfolio? Read This!
5 Things You MUST Include in Your Tech Portfolio

The Ultimate Guide to Becoming a Front End Developer 20

 WHAT IF I’M NOT A DESIGNER?
Some front end developers also have design skills. But some don’t, at
least not to the level they’d like to show off in their portfolio.

What are you supposed to do ​

then​
?

There are TONS of designers out there who have created projects for
their own portfolios, personal projects, etc. that don’t have the front
end dev skills to bring them to live. Reach out to designers whose work
you admire and see if they want to collaborate on something!

Check out sites like ​

Behance​ or ​
Dribbble​for designers whose work you
love, and see if they’d be interested in having you write the code for
some of their designs. It doesn’t hurt to ask!

The Ultimate Guide to Becoming a Front End Developer 21

 HOW TO GET STARTED
The skills a front end developer needs are laid out in the first section
of this guide. But just knowing what skills you need to learn and
actually figuring out how to learn them—and then what to do ​ after​
you
learn them—is a different story.

If you’re 100% new to tech, then start with the Skillcrush ​ 10-day Coding
Bootcamp​ . It’s completely free, and will get you up to speed on the
basics, from how HTML works to the difference between the Internet
and the Web.

After that (or if you already have a little bit of knowledge about how
the web and basic coding works), sign up for Skillcrush’s 3-month ​ Front
End Developer Career Blueprint​ . You’ll learn all you need to get started
in front end dev:

● HTML & CSS

● Responsive Web Development
● Git and GitHub
● JavaScript & jQuery

You will even start working on real projects while you learn (and earn
money along the way). Plus, it’s a solid foundation for the rest of your
career as a front end developer.

When you finish your Blueprint, you’ll have some projects you can add
to your portfolio. Supplement that with a few of Dee’s pretend projects
(or more real client projects), and get out there to start looking for
your first junior developer job or more freelance work!

There are so many opportunities out there for front end developers,
and if you show that you’re passionate about development, eager to
learn and improve, and have a few projects to show off, you’ll be well
on your way to your new dream career.

The Ultimate Guide to Becoming a Front End Developer 22

 SOME RESOURCES FOR FRONT END DEVS
Here are a handful of resources you can check out if you want to do a
little more exploring about what front end dev is all about, as well as
some tools that will help you along the way.

REFERENCES AND NEWS

HeyDesigner​ : Curated articles for designers and front-end developers
CSS Wizardry​ : Front-end architecture and performance engineering
How to Keep Up to Date on Front End Technologies​ : Follow these
simple steps to stay up to date
WebPlatform.org​ : The latest information on how to use the technology
that runs the web — HTML, CSS, JavaScript and more
Frontend Directory​ : Manually curated collection of resources for
frontend web developers
Web Field Manual​ : Curated list of resources focused on documenting
only the best knowledge for designing (and developing) experiences
and interfaces on the web
JavaScript Weekly​ : A free, once–weekly e-mail round-up of JavaScript
news and articles
FrontEnd Focus​ : A once–weekly HTML5 and Web Platform technology
roundup. CSS 3, Canvas, WebSockets, WebGL, Native Client, and more

TOOLS
Can I Use ?​ : "Can I use" provides up-to-date browser support tables for
support of front-end web technologies on desktop and mobile web
browsers
HTML5 Please​ : Look up HTML5, CSS3, etc features, know if they are
ready for use, and if so find out how you should use them – with
polyfills, fallbacks or as they are
JSHint​: A tool that helps to detect errors and potential problems in
your JavaScript code
PlainJS​: Vanilla JS utilities for writing powerful web applications without
jQuery

The Ultimate Guide to Becoming a Front End Developer 23