5 Front-end Development Skills to Land Your First Job

this is the second part of my web development series in the first episode we talked about some of the facts and challenges about web development in this episode we're going to talk about the five essential skills you need to land your first front-end development job i'm going to give you a detailed explanation of various languages and tools you need to know as well as a proper learning path and suggestions on how long it will take you to learn these [Music] hi my name is mash hamadani and i've taught millions of people how to code and how to become professional software engineers through this channel and my coding school codewithmosh.com if you're new here be sure to subscribe as i upload new videos all the time there's so many languages and tools out there html css javascript typescript java c-sharp c plus php python react jesus if you have been confused and feel overwhelmed you are not alone trust me so in this video i'm gonna 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 so in this video i'm gonna give you a summary of these languages and their purpose but i've also compiled a complete pdf that contains a detailed list of the stuff you need to learn the link is below this video so 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 we use css to make them beautiful and javascript to program them let me give you an analogy think of a building 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 when we press the elevator button it comes to pick us up here's a real example let's say we 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 user's twitter handle another block of text containing the message and three icons for commenting retweeting and liking the tweet we use 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 round we can add some padding around here we can change the color of these icons and define their look when we hover over them so css 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 webpage on the internet you have seen is built with these three languages so the better you learn and understand these languages and their features the better you will be at front-end development okay so that's all for the fundamentals 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 a 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 a framework forces our application into a structure so all applications built with a 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 you move 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 all right what's next version control systems we 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 git is the most popular version control system in the world and is used in 70 of software development teams so just focus on git and don't worry about other version control systems alright what's next well css is kind of an old language and it has limitations so if you use it on a medium sized or a 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 now you might wonder why css hasn't evolved well it has and is currently at version 3 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 a css 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 to a css preprocessor so it gets converted to the plain old css code that all browsers can understand that's the purpose of css preprocessors there are many preprocessors out there like sas 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 sas because it's the most popular css preprocessor 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 coffeescript to write code then they give their code to a program or a tool called transpiler which will translate and compile the modern code to 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 frontend 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 things 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 git you should be able to get the hang of it in about two weeks these are the absolute essentials that you will find on almost every job description now if you have extra time i would recommend you to learn sas and typescript to stand out from the rest of the crowd and increase your job opportunities sas is pretty easy and you will need a week or two to learn it typescript requires a bit more time and 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 might take you longer to get there don't let that discourage you i believe you can achieve anything if you're determined and passionate about it [Music] now to learn these skills i have plenty of tutorials on my channel i also have comprehensive courses for serious learners these courses are perfectly structured to take you from zero to hero in a step-by-step fashion they also include real world exercises that prepare you for the job and come with a certificate of completion that you can add to your resume in case you're interested head over to codewithmosh.com in the next episode we'll talk about backhand development skills if you found the information in this video valuable please give it a like and share it with others also be sure to subscribe to my channel for more videos on programming

Channel: Programming with Mosh

Views: 1,324,328

Keywords: front-end development, front end development, code with mosh, programming with mosh, mosh hamedani

Id: -_X6PhkjpzU

Length: 9min 1sec (541 seconds)

Published: Thu Jan 07 2021