Roadmap to front – end web development🥰🥰

Let me share with you the roadmap to front – end web development. Practical Guide, A Web design degree can seem like the best and safest option to kickstart a career in front-end web development, providing both a foundation in skills theory and the relevant qualifications needed to get a job. But it’s not the only route into the tech industry. In fact, many junior front-end web development roles are hired based on portfolios and experience as much as qualifications.

Studying for a tech degree isn’t without its own challenge and negative sides either, not least the fact it will take up three to four years of your life and cost quite a substantial amount of money.

Taking that into consideration, some of you may as, “Okay, if I choose the path of self-studying, then How much JavaScript do I need to learn?” or “How much HTML and CSS knowledge do I need to acquire for me to become a Front-end developer?”

So, here’s the ordered list of what you should learn if you find out (or decide) you’re not going to be studying at college or going to Bootcamp, to make sure your dream to become a front-end web developer still happens.

What are the basic of web development

  • HTML
  • CSS

you don’t need to master it on this point, just learn the basic fundamentals of it.

Is basically the skeleton of the website. it gives you the structure of the website. (images, text, videos, links, etc.)

CSS does the styling, it makes the website looks sexy and fab. CSS provides colors, layouts, typography, animations, etc.

is the logic of the website. it allows you to validate user input to the form, to open a modal, to build a dropdown, etc. so whatever happens dynamically on the website, javascript is responsible for that. 🙂 Also, there are tons of frameworks and libraries out there like react, redux, jQuery, Angular, Vue.js, etc, but we’ll tackle all those topics in the future.

As a beginner, I recommend solving coding challenges at least once a day. example:

coding challenge

Solving one question a day is far better than trying to cracking five questions in a day then doing nothing for the rest of the week. you need to be consistent here 🙂

Let’s proceed to step #2 on Roadmap to Front-end Web Development👨‍💻

2.Explore & Solidify:
Once you’ve learned the basics of HTML, CSS, and JavaScript now it’s time to solidify your knowledge about it. when you feel comfortable with HTML, CSS, and JavaScript, you need to step forward and keep on learning the following:

  • Version control – GIT/Github
  • Responsive Design
  • SASS
  • Javascript framework

you don’t need to master it on this point, just learn the basic fundamentals of it.

Version control:
Fundamentally, this is a backup system.
It is a system that records changes to a file or set of files over time so that you can recall specific versions later.

Why is learning important?
It’s inevitable, that’s how it works 🙂 The majority of multinational or startup companies out there are using version control. Being familiar with how this program works will give you an edge when you apply for a job in the near future.

Responsive Design:
Your website or web app should look good on different devices.
This is ideal:


SASS is a CSS extension, if you are comfortable with CSS, well in this point you should be 🙂 it will usually take at least one day for you to learn this and a couple of days to be productive with it. once you go SASS you never back 😂😂

Javascript framework:
learn the javascript framework!

some of the famous frameworks are

One of the most powerful, efficient, and open-source JavaScript frameworks is Angular. This framework is operated by Google and is basically implemented to use for developing a Single Page Application (SPA). It extends the HTML into the application and interprets the attributes in order to perform data binding.

Created by Facebook, React framework has earned popularity within a short period of time. In fact, it is used to develop and operate the dynamic User Interface of the web pages with high incoming traffic. It makes the use of a virtual DOM and hence, the integration of the same with any application is easier.

Though developed in the year 2016, this JavaScript framework has already made its way into the market and has proven its worth by offering multifarious features. Its dual integration mode is one of the most attractive features for the creation of high-end SPA or Single Page Application. It is a much reliable platform for developing cross-platform.

Take a look at least briefly on each framework, get a feel on how codes look like, how you write such applications and check what is more comfortable with you. After that, solidify your knowledge on that framework. In my case, what I did is I chose the most popular or in-demand framework in a country I wish to work.

At this point, you are very comfortable with CSS like bootstrap, flexbox layouts, SASS, and JavaScript. you can now create a simple web app or website from scratch. But don’t settle, stay curious, keep learning, and keep growing. 🙂

Explore more on the framework you chose, solidify your knowledge, master the basics of that framework, and start building your own website and web app. For example, you create a simple todo-list, tic-tac-toe game, or any idea that comes to mind.


Now you’re ready! At this point learning new things like framework or libraries is a piece of cake for you. studying all the suggested steps from 1 to 3 and practicing your researching skills will definitely go a long way.

Furthermore, at this stage, you might already have 2-3 projects that you can put on your portfolio which is useful for applying for a job. Your web development knowledge may be limited in general, but don’t lose hope! You can start your job hunt online, send your CV and portfolio. Freelancing is the easiest way to kickstart your career in web development.

Front-end web development or programming in general journey will be rough, you should embrace the pain. It’s simple but not easy, It is hard but an infant today will one day become the next Mark Zuckerburg. No such things as a genius. Don’t Ever stop!! just don’t! why? because the common problems out there who try to learn programming is that whenever they learn the basics of it they take a break like 2 to 3months then ta-dah! you forgot everything. then you will repeat again from start. and you will be stuck on that loop. obviously it is a waste of time. If you really wanted to do something just be consistent. do small things every day. be productive 🙂 that’s pretty much it!!! I hope this article on Roadmap to Front-end Web Development gives you an idea of where to start your web development journey 🙂

-@whatsdev Advice🤗

if you have a violent comment or reaction, let me know in the comment section below!!!

Happy coding 🥰👨‍💻