Is front-end web development a good career in the coming years?

Is front-end web development a field which will be in high demand over the coming years? How well is it paid? And what kind of tasks does a front-end developer do? In this article, I will go into depth on these questions and more, and maybe you will find that this is a career you can see yourself in.

In my opinion, I think that there are exciting times for a front-end web developer these days, and there are reasons to think it will only get better the next decade.

What is front-end web development?

These are the things that are happening in the browser. How the webpage is styled and how the layout is arranged.

There are three core skills that are required in front-end development.

HTML

This is the content of a web page. Things like:

• Headers
• Paragraphs
• Images
• Videos
• Links

CSS

This is to style the page, to make it look good. These are things like:

• Colors
• Margin and padding
• Rows and columns
• Font styles
• hover effects
• Responsive design (looks good on every device)

JavaScript

JavaScript is all about putting functionality on your site. This is where the programming bit comes into play.

Examples:

• Dealing with user input (push button, etc)
• Logging into your site
• Send request for data from the backend
• Display a popup
• Animations
• Validations

Besides front-end. What kind of other web development is out there?

I just want to briefly mention what front-end development isn’t, so you will know the difference.

Back-end development

You can say that front-end is what’s happening on the user’s browser, the backend is what happens on the server.

An interaction between the front-end and back-end might be something like this:

• A user enters an URL in the address field.
• The server (back-end) provides the HTML, CSS, and JavaScript to the client.
• The user interacts with the page and maybe pushes a button. The JavaScript in the front-end is then requesting more data from the back-end.

The back-end receives requests from the front-end and will do things like:

• Authenticate users (This normally happens on the server, because it is not safe doing it on the client).
• Get data from a database.
• Do heavy logic operations

You can see that back-end is non-visual programming. While front-end is very visual.

Full-stack development

Full-stack development is just both front-end and back-end. This can be a very interesting option. I will come back to that later in this post.

What is the difference between front-end web development and web design?

There might be a fuzzy line here, depending on where you work. Those two disciplines can sometimes interchange. If you are a part of a very small company, you might do both.

Web designer

A web designer usually has more understanding of visual design and user experience. Applications like Photoshop, Illustrator, and Sketch are some of the core tools designers use.

They usually mock up sites. Choose colors, fonts, layout and creates a working prototype with sample data. They often use a prototyping software for this.

Web developer

A web developer will take the images/prototype the designer has made. They will transform the designer’s vision into working HTML, CSS, and JavaScript.

For the developer and designer to work together most effectively, they should have a basic understanding of each other’s field.

How is the salary?

In the United States in 2018, the salary is between $60k to $120k per year. It highly depends on where you live, and what your skill level is. Junior developers are often in the low scale, while skilled senior developers are on the higher scale.

If you are highly skilled and a sought-after freelancer, or even works in a top consultant agency, the numbers could get even higher.

So to conclude, you can make a decent living creating web apps.

Does a back-end developer get paid more?

Yes, they tend to get paid more, but the difference isn’t so significant than it was a few years ago.

In recent years, front-end web development has become more complex. Less than ten years ago, a front-end developer only needed to learn JavaScript, CSS, HTML and sometimes a little jQuery.

Now there is a ton of frameworks and additional tools which are required. It has become much more complex recently, mainly because more of the work that was going on in the back-end, now has been moved to the front-end.

By loading more data and manipulating it in the front-end. The user experience is faster, and you are not relying that much on the bandwidth (even though that has skyrocket too).

How does the future look like?

Like I mentioned, there is more complexity moving from back-end to the front-end. That means there are a wider set of skills in this area. You could specialize in one area, or be an allrounder.

There has been an explosion of frameworks, tools that weren’t here ten years ago. And new stuff is appearing all the time.

There are Progressive Web Apps which has been called web apps 2.0. Recently there are also smart tv’s, smart watches and internet of things (IoT), which supports standard web technology. When looking at the trends in 2018, it only seems to go upwards in the next decade.

A popular way to make mobile apps the recent years is with cross-platform frameworks or hybrid apps. Here we can use web technology like HTML, CSS, and JavaScript to make apps, which you then can upload to the app stores. The reason this is popular is that you can use one language on both IOS and Android apps, which saves a lot of time on creating and maintaining apps.

If that’s not enough, you can create the back-end with JavaScript with NodeJs! NodeJs is a fast and lightweight back-end which is easy to learn when you already know JavaScript. Using JavaScript all the way from front-end to back-end is very interesting for companies since developers don’t need to learn several languages and therefore be more efficient.

What are the specific front-end development skills I need to know?

Essentials

I’ve mentioned this briefly, but HTML, CSS, and JavaScript are the core of web development.

If you are just starting out, I would just focus on HTML and CSS first. Just learn the basic from the web and start building sites as soon as possible.

Try to duplicate the look of websites with just a simple text editor/IDE. (I recommend VS Code).

After you have gotten a good grasp of HTML and CSS, you can start learning JavaScript. But learn it well. Build simple stuff with it.

It can be tempting to start playing around with frameworks, and I understand. The framework these days are awesome, but I would highly recommend against it. If you have a solid fundamental, you will save yourself from a lot of headaches and frustrations later.

Responsive Design

A responsive design basically means that a page looks good on every device.

In the old days (like ten years ago), the website on the desktop was the same as the one on your mobile phone. People then needed to zoom in on their phones, making it a horrible experience. This isn’t good enough nowadays.

You need to be able to adjust the design based on the size of the device. This is done in CSS. A CSS framework like Bootstrap helps with this.

SASS (A CSS Preprocessor)

This is like CSS, only better. You can do extra things like divide up your files and assign variables to name a couple of use cases.

Today this is more often used than plain CSS. But I wouldn’t worry about this though. You will learn it in a couple of days if you already know CSS.

Frameworks

You should definitely learn a framework or two. But remember what I wrote earlier. Learn the fundamentals first! I’m talking about HTML, CSS, and JavaScript if you forgot.

Here are some popular Frameworks:

• Angular
• React
• Vue
• Bootstrap
• jQuery

React is the most popular as of now.

jQuery was essential ten years ago and was the only framework to use for several years. With other frameworks arising, it is dropping in popularity. That being said, there are a lot of codebases which are still using jQuery today.

Try some tutorials on a few of them. Find out which you like, and focus on learning it. But learn plain JavaScript first, okay? (I’m sorry, I will stop nagging now).

Task runners

Task runners are used to automating repetitive tasks like optimizing JavaScript and CSS files, translate SASS files to CSS, automatically reload website when saving a JavaScript/CSS file.

So basically it makes your life easier while developing, so go ahead and learn it! Gulp and Webpack are popular tools for this.

Automated Testing

This means you create code that tests your production code. This is a bit more advanced concept, but very useful.

If you have a lot of automated tests on your code, you can be more assured that your code is working like it should. And more importantly, when you are changing your existing code, you will be notified by your tests if you have broken something. This might be hard to discover otherwise, and you would risk releasing buggy code.

Recent frameworks make testing more easy to implement.

Problem-solving skills (debugging)

No matter how good developer you are. There will be bugs in your code.

Learn how to use the developer console on your browser. Create clean code which is easy to navigate in.

Conclusion

I hope with this article I have inspired you to pursue front-end web development as a career.

I personally have come from a back-end background, but have moved more towards the front-end. Learning new technology is really fun to me, and I get a lot of opportunities for that in the front-end.

The future looks bright, and there is no reason to sit on the fence.

Happy coding!