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.
This is the content of a web page. Things like:
This is to style the page, to make it look good. These are things like:
- Margin and padding
- Rows and columns
- Font styles
- hover effects
- Responsive design (looks good on every device)
- Dealing with user input (push button, etc)
- Logging into your site
- Send request for data from the backend
- Display a popup
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.
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 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 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.
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.
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.
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.
What are the specific front-end development skills I need to know?
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).
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.
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.
Here are some popular Frameworks:
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.
So basically it makes your life easier while developing, so go ahead and learn it! Gulp and Webpack are popular tools for this.
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.
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.