DEV Community

Cover image for 5 Powerful Front-end Development Skills to Land Your First Job
Elliot Brenya sarfo
Elliot Brenya sarfo

Posted on

5 Powerful Front-end Development Skills to Land Your First Job

HTML, CSS, JavaScript, TypeScript, Java, C, Sharp C, PHP, Python, react, Jesus if you've been confused and feel overwhelmed, you are not alone. Trust me, in this article I'm going to give you a clear and solid learning path so you spend your time on the things that matter the most.

One of the mistakes that a lot of beginners make is that they waste so much time jumping from one thing to another, and they don't learn anything properly.

To become a front-end developer, you need to start with HTML, CSS and JavaScript. These are the fundamental languages of front-end development. We use HTML to structure our web pages, use CSS to make them beautiful, and JavaScript to program them.

Let me give you an analogy. Think of a building in the real world is like a web page on the Internet. It has a skeleton or structure. It can have pretty walls, windows and tiles and it can have certain functionality. For example, let me press the elevator button. It comes to pick us up. Here is a real example. Let's say you want to build a website like Twitter for each tweet, we want to have a layout like this.

So first we use HTML to define all the building blocks of this layout.
What are the building blocks? Here? An image, some text indicating the users Twitter handle, another block of text containing the message, and three icons for commenting, retweeting and liking the tweet. Makes HTML to add these building blocks to our web page.

Then we use CSS to give it visual effects. For example, with CSS we can make the font bold. We can make our image around. We can add some padding around here we can change the color of these icons and define their look when we hover over that success is all about aesthetics or visual effects and finally we use JavaScript to add functionality to this webpage to decide what should happen when the user clicks on any of these icons.

Every web page on the Internet you have seen is built with these three languages, so the better you learn and understand these languages and their features that better you will be at front end development that's all for the fundamental.

What's next? Well, building websites often includes a bunch of repetitive tasks. This is where front end frameworks and libraries come.

A framework or library comes with a lot of code that we can reuse in our websites, so they help us get the job done faster. That's why a lot of companies these days use one of these popular frameworks like React, Angular, or Vue. Now more accurately, react is not a framework, it's a library.

The difference between a framework and a library is that framework forces are application into his structure, so all applications built for the framework like Angular end up having a similar structure, so as you move from one project to another you will see a lot of things are familiar libraries don't force our applications into a structure, they just provide some code for us to reuse.

But subtle distinction aside, all these tools serve the same purpose. They help us build applications faster now you don't need to learn.
All of these to get started as he moved jobs. You may need to learn about the other tools out of these. React is the most popular tool. It's built by Facebook and is used to build Facebook and Instagram. So, I would say go for react.

What's next? version Control systems, use version control systems to track our project history and work collaboratively with others. That's why you will find it in almost every job description. Get is the most popular version control system in the world, and it's used in 70% of software development teams, so just focus on get and don't worry about other version control system.

All right, well, CSS is kind of an old language and it has limitations, so if you use it on a medium sized or large website, sooner or later your code starts to get pretty convoluted and becomes hard to maintain. So every time you want to change something you end up breaking something else that you might wonder why CSS hasn't evolved well it has.

It is currently at version three, but every time there is a new feature in CSS, all existing browsers need to support that feature. Unfortunately, this is a slow process, so this is where CSS preprocessors come in SASS preprocessor is a program or a tool that lets you generate CSS code from a different language that is better and more capable than CSS.

So, instead of using the plain old CSS, we use another language that looks very similar to CSS. In fact, it's almost identical, but it has some extra features then we give our code plus CSS preprocessor so it gets converted to plain old CSS code that all browsers can understand.

That's the purpose of CSS preprocessors. There are many preprocessors out there like Sass, less and stylus to name a few. But again, you don't have to learn all of them to get a front end development job because these are all similar tools that serve the same purpose.

They're all like screwdrivers manufactured by different companies, so as long as you understand the purpose of a CSS preprocessor and know how to use it, you're good to go. So my suggestion to you is to learn Sass, because it's the most popular CSS preprocessor.

Now we have the same problem with JavaScript because JavaScript is a fairly old language and has some limitations, so a lot of developers these days use a more modern language like TypeScript or Coffee script. Write code. Then they give their code to program or a tool called typescript which could translate and compile the modern code for the old JavaScript code that all browsers can understand, once again you don't need to learn all of these languages.

You just need to know one of them to get started. I would say go for TypeScript because it's most widely used as you move jobs, you may work on a project that uses a different language. You can then quickly learn that other language in a short period of time because all these languages are more or less very similar so to get your first front end development job, first you need to learn HTML, CSS and JavaScript.

I would say if you spend three to five hours a day studying and coding, you should be able to have a reasonable understanding of the fundamentals. In three months, you're not going to be an expert, but you will understand them well enough to make banks.

Next you need to learn a front end framework or library like react. You would probably need one or two months to learn react. After that you should learn a version control system like get. You should be able to get the hang of it in about 2 weeks. These are the absolute essentials that you will find, but almost every job description that if you have extra time I would recommend you to learn Sass and TypeScript to stand out from the rest of the crowd and increase your job opportunities.

Sauce is pretty easy and you did a week or two to learn it. TypeScript requires a bit more time. I would probably take you two to four weeks, so if you dedicate a few hours a day studying and coding after six months you should be able to apply for a junior front end developer job. Of course, everyone is different. You may get there faster or it by taking longer to get there. Don't let that discourage you. I believe you can achieve anything if you're determined and passionate about it.

You can visit my blog to read more and engage more

Discussion (2)

thumbone profile image
Bernd Wechner • Edited on

Small tip: if you write an article headed 5 somethings, then make sure to include a list of 5 somethings and not just a large block of prose. IMHO the internet is about efficient reading, drilling down to what you need when you need it and large blocks of prose rarely get read.

elliot_brenyasarfo_18749 profile image
Elliot Brenya sarfo Author