5 essential skills you need to land your first frontend development job.
There are a whole lot of languages and tools out there.
HTML
CSS
Java
C++
JavaScript
Name them
So if you are feeling overwhelmed, I get you and I've got you.
A lot of beginners waste a lot of time jumping from one thing to another and eventually don't learn anything properly.
This article will walk you through the essentials, giving you a clear and solid learning path so you spend your time learning the things that are most important which are needed to land your first frontend development job with suggestions on how long it will take you to learn them as well as the amazing learning resource which would be discussed at the end.
Here we go!
1. Fundamentals
Let's talk about the foundation!
To become a frontend developer, you need to learn the fundamental languages of frontend development which are:
1. HTML - to structure web pages
2. CSS - to make them beautiful
3. JavaScript - to program them
Think of an yourself.
Let's say you ( A human ) in the real world, is like a website or web page on the internet.
It has a structure which is your skeleton (HTML).
It has your beautiful skin adorned with gorgeous clothing, beads, and so on (CSS)
You can also do stuffs like dance, press a button, carry books, do stunts and so on which is programmed and controlled by the brain (JavaScript)
You get the picture?
Cool right?
Okay, let’s say you want to build a website like Facebook.
Pick out a post in your Facebook feed!
So first we use HTML to define all the building blocks of the layout like the text, the image, etc. . What are the building blocks there.
1. An image ; the user’s avatar
2. Some text indicating the username of the person who owns the post.
3. Another block of text or image containing the message of the post
4. And icons for commenting, liking, sharing the post and so on.
HTML is used to add this building blocks to our websites.
CSS is used to give it visual effects like making text bold, changing the colours of the icons and texts, making your images round, and so on.
In a nutshell, CSS is basically about aesthetics or visual effects.
Functionality like what should happen when a user clicks on an icon is determined by JavaScript.
Every website is built with these 3 languages
Here is the drill.
The better you learn and understand the fundamentals and their features, the better your frontend development skills will be.
2. Frontend frameworks
Now we are done with the fundamentals!
What do we do next?
When building websites, a lot of repetitive tasks are involved.
So that's where the need for frontend frameworks and libraries come in.
A library or a framework possesses and supplies us with a lot of code that we can reuse in our websites thereby making the job easier and faster.
Reasons like this causes a whole lot of companies these days to make use one of these popular and well utilized frameworks like React, Angular or Vue.
Now with more precision, React is not a framework but a library.
The fact that a framework forces our app into a structure whereas a library doesn't, is one striking difference between them.
Therefore, all apps built with a framework like Angular or Vue, end up having a similar structure.
Libraries just provide some code for us to reuse.
So as you move from one project to another, you will see a lot of things that are familiar.
But if we leave the little distinctions aside, all these tools provide us with similar advantages.
They help us build applications faster.
Cool?
Let me say now that you don't need to learn all of them to get started.
React is the most popular out of these tools.
Why?
Probably because it was developed by Facebook and is used to build the Instagram app, the Facebook app and so on.
Get the full reason here
I would recommend learning React.
So as you get new jobs, you would probably need to learn about the other tools.
3. Version control system
Alright, the next step to take is to learn version control systems.
Version control systems help developers to keep track of our project history and work collaboratively with others.
That's pretty much why it's hanging in almost every job description.
What do I choose?
You choose Git!
It is utilized in 71% of software development teams, making it the most popular version control system in the world and the best choice for you.
I say you focus on it, and forget others!
Boy, the list is coming to an end!
So what do we go for next?
So, CSS is kind of an old language and possesses some limitations.
When you apply it on medium-sized or large website projects, sooner or later, your code would become hard to maintain because your code would become twisted and extremely complex.
So changing something would most likely lead to breaking something else in your code.
So why hasn't CSS evolved?
You might wonder.
Well, as a matter of fact, it has and is currently at version 3.
Every time a new feature is introduced on CSS, all existing browsers need to support the feature.
Unfortunately, that journey is pretty slow.
So this is where CSS preprocessors come in to save the day.
4. CSS preprocessors
It is a software or a tool that enables you create CSS code from another language that is better and more capable than CSS.
Well, instead of coding with the plain ol' CSS, we take advantage and make use of another language that looks similar or almost identical to CSS but it also possesses some additional features.
Then, the CSS preprocessors takes in our code then gets it converted to the plain CSS so that all browsers can understand it.
That's the sole purpose of the CSS preprocessors.
There are a lot of preprocessor out there, for example:
1. Sass
2. Stylus
3. Less and so on.
Again, there is no need to learn all of them to get a frontend development job because they are all similar tools that used for the same problem.
Just like lightbulbs manufactured by different companies, they are all used to light up a room or an environment.
You are pretty much good to go if and only if you understand the purpose of a CSS preprocessor and know how to manipulate and use it.
However, I recommend learning the most popular of all of them, Sass.
Now, we encounter the same bottleneck with JavaScript.
As CSS, JavaScript is a fairly old language and has some limitations.
5. Improved JavaScript
Some developers these days, make use of improved languages like Typescript and Coffeescript to code.
A tool or software called a transpliler takes in our modern code to translate and compile it, so that all browsers can understand.
Once again, you don't need to learn all of these languages.
You just need to know one of these to get started.
I recommend going for Typescript mainly because it is the most widely used and recognised.
As you work on projects that uses a different language, learning the other language will be much faster because they are pretty much all similar to each other.
Learning path
So to land you first frontend development job, you need to learn;
1. HTML
2. CSS
3. JavaScript.
So if you spend about 4-5 hours a day studying and coding, you should have gain a deep and reasonable amount of knowledge of the fundamental languages in 3 months.
Let me say now that you are not going to be an expert, but you will know them well enough to build projects.
Then, you need to learn a frontend framework or library like React.
About 1 or 2 months is needed to learn React.
Next, you need to learn a version control system like Git. You should be able to understand the flow in about 2 and a half weeks.
These are the absolute essentials that you would find in almost every job description.
However, if you have extra time, I suggest you learn Sass and Typescript to stand out and also boost your job opportunities.
SASS is pretty easy and you would need a week or two to learn it.
Typescript would probably take you two to five weeks.
So if you study and code for few hours a day after 7 months, you should be able to apply for a junior frontend developer job.
The amazing learning resource
I have looked through the internet searching for what to call a perfect course for learning these skills.
I have found lots of amazing resources but this one really hit the spot.
This course was made by a team of programmers. They are the Cleverprogrammers.
Here is the link to check it out!👇
It is called Profit with JavaScript by Rafeh Qazi with Amaanath Mumtaz, Rishi Patel.
This would change your life.
Final thoughts
As a matter of fact, we are all different.
It might take you less time or it might take longer to get there. But, don’t be discouraged
I believe you can achieve this feat and anything you want to achieve if you are determined, consistent and passionate about it.
I was inspired to write by amazing writers like Tom Kuegler and Zulie Rane
Thanks for your time and good luck to you!
Agbejule Kehinde Favour.
