4 Skills to Become a Front-end Developer in 6 Months (Road-map)
Tags: career, webdev, beginners, javascript
Published: 2021-08-01 08:53:01

Let me give you a simple **🚦Roadmap** to know **where you are**, and **where you should go next**.

##🔑Key Concepts##
   
Every website has two parts. A **Front end**, and a **Back end**. 

The **front end** is the part where you see in the browser and interact with. All the **visual aspects**.

 The **back end** is the part that **powers the front end**. It's behind the scene, and it's mainly about storing data and databases and providing it to the **front end**.

##🌐Jobs##
 So web development jobs fall into **three categories.**
* The Front-end development
* Back-end development
* and Full-stack development (*involves both front-end and back-end development*) 

##👨‍💻Front-end Development##

Front-end developers use **HTML CSS** and **JavaScript** to build Front end. So Let's talk about **HTML**, **CSS**, and **JavaScript**. 
![Road-Map Image by shahan ahmed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8befihb2q23dg44rse9.jpg)

 **HTML** is short for ***Hypertext Markup Language***. We use HTML to define the building blocks of our web pages. 

**CSS** is short for ***Cascading Style Sheet***, and we use CSS for *styling* webpages, and making them beautiful.

 **JavaScript** is used for **adding functionality** to the web pages.

###*🔻Here is a real example*###
Let's say we want to build an application like *Instagram*. For each post, we should have a layout this 👇.

![instagram pic.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1635716497305/NdmIajEDi.png)
 
So, First we use **HTML** to define all the building blocks of this layout.

 *What are these building blocks here?* 

An image, some text or username, another block of text for containing the message, and some icons for *liking, commenting,* and *sharing*.
####HTML & CSS####
We use **HTML** to add these building blocks to our web pages. Then we use **CSS** to give it visual effects.

 For example, we use **CSS** to make the font **bold**. We can make our image round, we can add some padding, we can change the color of the icons and define their look when we hover over them. 

So, *CSS is all about the statics or visual effects.* With **CSS**, we can also create beautiful animations. 
####JavaScript####
Now, most web pages these days are interactive. The response to our actions like clicks and scrolls. This is where **JavaScript** comes in. With JavaScript, we can add *functionality or behavior* to our web pages. For example we can like a post.

 So **JavaScript** is a programming language while **HTML** and **CSS** are not. Meaning, We can't use them to tell the computers what to do. We use them to define the building blocks of our web pages and *style* them.

 Every webpage you have seen on the internet is built with these **three languages**. 

*So*, the *better* you will learn and understand these languages and their features, *the better you will be at front-end development*.

                     
##🚦Front-end Developer in 6 Months##
{% youtube 1z7l4YatJxw%}
 So, your front-end development journey starts with **HTML** & **CSS**.

 I would say if you spend ***3-5 hours a day*** *studying and coding*, you should be able to have a reasonable understanding of these two languages **in about a month and a half**.

 Once you learn these languages, then you need to learn **JavaScript**. 

I would say learning JavaScript would probably take **another six weeks(1.5 months)** of your time.

 Of course, you're not gonna be *JavaScript experts* in just six weeks. But you will have a reasonable understanding of it, and you will learn more as you work on different projects.

 **So, the first three months is all about fundamentals.**

##🛠Frameworks##
 Now, building website often includes a bunch of repetitive tasks. This is where front-end **frameworks** and **libraries** come in.

 A framework or library comes with a lot of code that you can reuse in our websites. 

So, they help us to 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, you don't need to learn all of this to get started. Different companies use different tools for their different projects. As you move from one project to another you may want to learn about the other tools.

###⚛React###

If you're starting out, just focus on **React**. Because it's the most popular tool in this space. Once you learn React, you can always learn the other tools if needed.

 For **React** you would probably need **one to two months**.

##💫Version Control System##
 All right, *what's the next step?*

**Version control systems**. We use a version control system to keep track of our **project history**, and work collaboratively with others.
###📌Git###
 There are many version control systems out there like **Git, Subversion, Mercurial** and so on. But **Git** is the **most popular** *tool* in this space, and it's used by *more than 70% of software development teams*. That's why you see it in almost all job description. 

You would probably need **another two weeks** for learning **Git**.

##📝Conclusion##
 So, these are essential skills for every *front-end developer* must have. You'll see this list in almost every **job description**.

For now, Just focus on these **four skills or four steps**. Remember, less is more.

Don't try to learn *too many things* quickly. You won't learn anything. You will just *waste your time*. 

Alright, that's your **roadmap**. 
![complete Front-end Development roadmap image by programming with shahan](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e74u59om3kafiqnzyv1c.jpg)

☕_Buy me a coffee
https://www.buymeacoffee.com/codewithshahan

##🧷Recommendation##

If you are interested in ***Front-end*** developments and *programming* **tips** and **tricks**, feel free to visit my [🔗 YouTube Channel](https://www.youtube.com/channel/UCyQg06zsc9tBtjgpQ_k8wUg/features)

##👓Special##
Do you want to learn ***programming*** without wasting your time with lots of unnecessary theory or boring *to-do app* tutorials *&*  clear and concise courses with a perfect mix?

 Here is a professional coding instructor with two decades of programming experience, who made my *programming journey* much easier: 👉 [Mosh Hamedani](https://codewithmosh.com/courses?affcode=146684_8qgz9mhy)
> Note: I'm note affiliated with his site

This roadmap derived from his “Ultimate HTML5 CSS3 Course”. 

🛹 You can connect with me on:
Twitter ▶ https://twitter.com/codewithshahan
Github ▶ https://github.com/codewithshahan
Instagram ▶ https://instagram.com/codewithshahan

Feel free to leave a comment💁‍♂️
Happy Coding :)