DEV Community

loading...
Cover image for 4 Skills to Become a Front-end Developer in 6 Months (Road-map)

4 Skills to Become a Front-end Developer in 6 Months (Road-map)

Programming with Shahan
[Passionate Software Developer] | console.log("You can follow for programming tips & tricks") | const YouTube = "Programming with Shahan"
Updated on ・4 min read

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.
Road-Map Image by shahan ahmed

🏗Building Blocks

So Let's talk about HTML, CSS, and JavaScript.

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. 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


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

🧷Recommendation

If you are interested in Front-end developments and programming tips and tricks, feel free to visit my 🔗 YouTube Channel

👓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

This roadmap derived from his “Ultimate HTML5 CSS3 Course”. I think it’s a very helpful roadmap for beginners.

Feel free to leave a comment💁‍♂️

Happy Coding :)

Discussion (52)

Collapse
ats1999 profile image
Rahul kumar

2 months would be enough

Collapse
codewithshahan profile image
Programming with Shahan Author • Edited

when I was new into coding, I thought it would take 2/3 months💪. In reality, it takes 9-10 months to master only frontend dev. Even though, I wasted countless of hours by learning random programming languages without knowing the proper steps to follow a specific category.

remember, mastering any programming languages take times.

Collapse
ats1999 profile image
Rahul kumar

That is the thing you said propar guidance. From my aspect, a just beginner can learn the following as follows:

  • html 2 days
  • css 3 days
  • JavaScript 7 days
  • 10 days to build some projects
  • any framework 10 days
  • next 30 days just build projects

There is nothing more in front end for beginners.

Thread Thread
codewithshahan profile image
Programming with Shahan Author • Edited

Nice Joke!
This would be a terrible experience for beginners when they try to build real-world projects on their own.

They need to go back HTML CSS or JS. This is frustrating.

Your prospective is suitable for someone who already has some experience with these languages and tools.

Thread Thread
ats1999 profile image
Rahul kumar

If someone genuinely want to learn the he/she can put 6-8 hours daily.

This way in two months, you're going to have 480 hours total.

There are a lot of websites who claims that they can make you full stack developer in jist 300 hours.

If you'll look at the YouTube tutorial for front end developer, you'll found its length is maximum of 10-20-hours (3 days maximum).

If you'll take tutorial for 50 hours in 5 hours a day (300 hours in two months) then also you have 250 hours to practice, build projects,etc...

If you are still saying that you can not be a front end developer, then i can guess that left tab of your browser have opened HTML tutorial and right tab have opened Netflix, Amazon prime,etc...

Thread Thread
vijay711github profile image
vijay711-github

Bro you just awesome you are suggestion like diamonds for thanks a lot bro ❤️❤️❤️for motivating me....
and again thanks your words turns my mind 👍😊❤️ keep growing bro

Thread Thread
codewithshahan profile image
Programming with Shahan Author

Nice calculation. Only Genius Person can do this.

But In general, its nearly impossible to work in an IT company as a frontend developer to solving real world projects right after two months.
.

For absolute beginners, improving Problem solving skills take times as I mentioned.
I don't wanna to talk about that anymore.

Thread Thread
yoshida profile image
Masao Yoshida

Of course, someone could think he or she has become a frontend developer only in two months.
I think it just tells his attitude for development.
It is easy to do something but difficult to do well.
I think Shahan's roadmap is not long.

Thread Thread
codewithshahan profile image
Programming with Shahan Author

I agree

Collapse
addegbenga profile image
Adeyemi Gbenga

Good one

Thread Thread
addegbenga profile image
Adeyemi Gbenga

Okay

Collapse
martinromario55 profile image
Martin Romario Ntuwa

If you can learn this stuff in 30 days, then why the hell would you waste your time learning Front-end development. With that photographic memory, you can as well become a surgeon or better, an astronaut.
Let's Assume it's workable. So you wake up at 7am and start coding (Assuming you don't have a job as well and you live with your parents) You need a total of at least an hour for breakfast, lunch and toilet breaks.
At the end, no one will want to work with you or hire you coz you'll be a psychopath, having no communication skills or interpersonal skills. And in case you need mastery, according to proven research, you need at least 10,000 hours to master any skill. Meaning that you need at least 5 years of 8 hours per day developing the skill in order to master it.

Collapse
ats1999 profile image
Rahul kumar

you can as well become a surgeon or better, an astronaut.
Let's Assume it's workable
there is something called area of interest

Collapse
ats1999 profile image
Rahul kumar

For any company anyone can work 8-10 hours a day with pressure/faimily, and can not study 5 hours a day.., great.

Collapse
skylersaville profile image
Skyler Saville

The difference between a beginner and a master is the master has failed more times than the beginner has tried.

Collapse
peleisgit profile image
peleisgit • Edited

You are clearly disconnected from reality. You can write such texts when you want to sell your bootcamp to someone :) learning in two months is impossible.

Collapse
npoku profile image
Nana Poku

I doubt it. To really understand the mechanics and theory behind a language. In this case language”s” it takes more than two months. Let’s not give impression our industry is easy. That anyone can come in and in two months be a pro.

Collapse
ats1999 profile image
Rahul kumar • Edited

pro, pro,pro... , there is no minimum bare requirement to become pro/expert. As much you'll learn you'll realize that there is few more things left to learn. Simply, learning never ends.

Let's say you want to be pro front-end developer.
pro can not be good at every area of front-end, like UI,UX, optimization, security, design, SEO, Memorry management, etc.

You can not meet any developer who is pro/expert in all the field, because everyone has limitation of mind. You might see a developer with 20-40 YOE, is expert in SEO, but he/she dose't know much about design, same for other areas.

Overall is that you can not become expert in just 2 months, but you can just start development in 2 months.
So, i said 2 months for just html, CSS, JS to just get started.

Correct me if i am wrong.

Collapse
vijay711github profile image
vijay711-github

Really Rahul just 2 months to become a frontend web developer

Collapse
ats1999 profile image
Rahul kumar

Me as an example

Thread Thread
vijay711github profile image
vijay711-github

Ohh nice bro i also want to become a frontend web developer can you pliz tell how much daily you code and learn for 2 months and any suggestion pliz

Thread Thread
ats1999 profile image
Rahul kumar
Collapse
ats1999 profile image
Rahul kumar
Collapse
drsimplegraffiti profile image
Abayomi Ogunnusi

@rahul I beg to differ...2 months is enough to grim the surface. Deep diving will require the stated time range, save you are Albert Einstein or Dexter

Collapse
ats1999 profile image
Rahul kumar
Collapse
vijay711github profile image
vijay711-github

Really can i become frontend developer in just 2 months and land job 🤔

Collapse
ats1999 profile image
Rahul kumar

Yes, in just 3 months i have a full stack MERN developer job in a startup, where i used to develop dashboards, real time services and geospatial analysis system.

dev.to/ats1999/comment/1go11

Collapse
eke profile image
Eke Victor

Been learning Frontend for over 12 months now(it gets better with time) and I have to say in all honesty, that it will take more than 6 months to be a frontend dev alone. It's possible but the chances are you'll have to be coding everyday with 100% laser focus.

Collapse
codewithshahan profile image
Programming with Shahan Author

100% correct. I totally agree with you.

Collapse
vono1412 profile image
VoNo1412

I am studying JS right now.

Collapse
dungvietle profile image
realDungLee

where did you study?

Collapse
vono1412 profile image
VoNo1412

I'm studyinf at scrimba and freecodecamp youtube combined with reading You don't know JS.

Collapse
iykecharles profile image
iykecharles

Hi, I am a Golang develeoper interested in becoming full stack developer. Someone advised that I need just the basics of JavaScript to learn react ? Is that so? What tutorial would you recommend that would give me just that basics needed for me to learn JavaScript to be equipped for React. Thanks.

Collapse
codewithshahan profile image
Programming with Shahan Author

if you already know basics JS I recommend you to take the “object oriented programming with JavaScript” by mosh hamedani.

Otherwise you need to take his “ultimate JavaScript course”. He covered all the essential concepts about js before learning React.

His courses is very professional and short.

Or you can watch this video where I talked about freecodecamp website
youtu.be/tvBI8o5GGnY

Collapse
afourcmd profile image
AfouR-cmd

I am now in my 2nd month learning html and css.

Collapse
codewithshahan profile image
Programming with Shahan Author

make sure to understand all the fundamentals before jumping to JavaScript :)

Collapse
afourcmd profile image
AfouR-cmd

Yeah I will do sir. Thank you for the reminders, though having a hard time.

Thread Thread
codewithshahan profile image
Programming with Shahan Author

Keep Going. Never stop learning.

Collapse
youurt profile image
Ugur Tigu

1 day is enough ..

Collapse
kirsty_851d86e1664 profile image
Kirsty

Thanks for this. I found it really useful. I've completed HTML, CSS and a bit of JS and GitHub on Codecademy. They took a couple of months with a few diversions. My experience is that doing these lessons and making it work in the real world are two completely different things. While there are rules, as the saying goes - there are many roads that lead to Rome - the secret is to find what works for you as a developer. Mastery is a VERY long process!

Collapse
codewithshahan profile image
Programming with Shahan Author

Glad to hear that.
Yep, the secret is to find what works best for you. I totally agree with you.

Collapse
vagrantjin profile image
Vagrant Jin Kazama

Months?

That's an junior intern programmer who can stitch UI Libraries and NPM install everything like a high-schooler.

You made no mention of actual software development, what and how to test, accessibility, browser compat, libraries, actual Javascript, performance(browser performance bottlenecks) and most importantly, how to debug JS., how to write good software.

We need more developers doing C#,Java, C++

Collapse
riobrewster profile image
RioBrewster

Seriously? No wonder so many sites are such a complete unusable mess!

Yes you might know enough to build a hacky, insecure, fragile front end that doesn't integrate with any backend. But how is the performance? Does it work equally well in all browsers on all devices?

You don't even mention accessibility. As a front end dev that is part of your job and it adds a whole other layer of complexity.

I wonder how the senior developers on your team feel about your arrogance and fixing your unintelligible code.

Collapse
icephonix1111 profile image
icephonix1111

ohh

Collapse
yoshida profile image
Masao Yoshida • Edited

Mr.Shahan.
I think it was good to add git at the roadmap.

Collapse
codewithshahan profile image
Programming with Shahan Author

Are you talking about images?

Collapse
yoshida profile image
Masao Yoshida

No I mean you have mentioned about git in your post.

Thread Thread
codewithshahan profile image
Programming with Shahan Author • Edited

thanks a lot. I didn't realize😁

Collapse
isokafor profile image
ISOkafor

Js hasn't been easy, I swear.

Collapse
codewithshahan profile image
Programming with Shahan Author

You are right

Collapse
amouratoglou profile image
Agustin Mouratoglou

You are already born a front end developer. don't waste time.

Collapse
codewithshahan profile image
Programming with Shahan Author

Fake News😬