DEV Community

Cover image for Zero to Hero: Front End Developer Roadmap
Tapajyoti Bose
Tapajyoti Bose

Posted on • Updated on

Zero to Hero: Front End Developer Roadmap

With so many languages, frameworks, and libraries to choose from, often beginners find themselves scratching their heads on how to start off their development journey. This article aims to demystify the process and provide you the perfect roadmap to becoming the Amazing Front End Developer.

Let's get started...

Get Started

Good to Know Stuff

These skills are not necessary, but they definitely will help you on your journey.

  1. How does the Internet work?
  2. What is HTTP?
  3. How do Browsers work?

Intro img

Basics

Now let's start off with the basics.

  1. HTML
    HTML is the foundation of Front End Web Development. One thing I notice is beginners trying to learn all HTML tags; you DON'T need to know all tags, for now, just the following would do:

    1. HTML document structure
    2. Basic tags such as html, head, title, body, form, input, p, h(1-6), etc. would suffice for now.
  2. CSS
    Once you learn HTML, you will be able to create a website, but it will definitely look unprofessional. Now it's time to add life to it using CSS. For starters, you could focus on only the basics:

    1. Basic CSS Selectors
      Selecting an element is the stepping stone to get started with CSS.

      html {}   /* tag selector */
      
      .class {} /* class selector */
      
      #id {}    /* id selector */
      
    2. Box Model
      CSS uses the Box Model to organize the different sections of all elements.

      Box Model

    3. Positioning & other basic properties
      Positioning helps to position elements and even take out elements from the flow of the website. Some other basic properties you should learn are color, background-color, and of course the properties making up the Box Model.

  3. JavaScript
    Of course, you would like to make your website interactive as well. JavaScript is the tool you need. The things you need to know for now are:

    1. Basic Programming using JavaScript
      JavaScript might be a bit intimidating (at least it definitely was for me) due to its asynchronous nature. You need to develop a feel for how the code is executed as unlike synchronous languages the code that appears first might not be executed first.

      // example
      setTimeout(() => console.log("EXECUTED LAST"), 0)
      console.log("EXECUTED FIRST")
      
    2. Creating and Disposing Event Listeners
      Creating Event Listeners allows you to trigger a callback when an event occurs.

      function fn() {}
      
      // Creation
      element.addEventListener("<event-name>", fn)
      
      // Removal
      element.removeEventListener("<event-name>", fn)
      
    3. DOM Manipulation

      To bring interactivity to your website, DOM Manipulation is the most important skill. Paired up with Event Listeners, it allows you to modify any part of the website when an event occurs.

Intermediate

Completing the Basics was a feat in itself. CONGRATULATION! You are no longer a beginner. Now you have the skills necessary to learn intermediate stuff.

  1. HTML
    Didn't we just cover this in the Basics section? Yes and No. We covered just the basics of HTML, there is far more advanced stuff that can help you in development.

    1. Semantic HTML At first, you might think that using a div everywhere is a good idea, but it can significantly downplay your ranking on Search Engines. You should learn the basic Semantic Tags:
      • section: The section tag is used to group the content into different sections.
      • header: The header tag is used to define the header for a document
      • nav: The nav element defines a set of navigation links.
      • footer: Just like the header, footer tag is used to define the footer for a document
      • aside: The aside element defines some content aside from the main content (placed in a sidebar).
      • main: The main element specifies the main content of the document
    2. Meta tag
      The Meta tag allows you to inject additional information into your website:

      Additional Info using Meta

  2. CSS

    Now it's time for a bit more advanced CSS

    1. Media Queries It is not possible to know the device a user would use to access your website. Media Queries allow you to define how your website looks and feels on any device.
    2. More CSS properties
      You would be able to understand a bit more advanced properties at this point in time. Looking into variables, clip-path, text-ellipsis and others.

      You can look into this article for more on these topics

    3. Advanced CSS Selectors
      CSS allows you to be highly granular with your selection. This is a topic worth looking into if you have deeply nested websites. For example input[type=text].invalid selects only the text inputs that have an associated invalid class.

  3. Javascript

    It's finally time for you to learn a framework
    Its time

    You might be at a loss since there are so many frameworks to choose from. Don't sweat it, just choose anyone, although it's recommended you use React, Vue or Angular as due to their popularity if you face any issue, you would be able to find the solution on Stack Overflow with ease. The key things to learn are:
    - The basics of the framework (quite evidently)
    - State Management
    - Routing

  4. Git

    Whenever you work on a large project, maintaining different versions of the application is a cumbersome task. We are lucky to have software like Git to sort it out for us.

    To learn Git you can refer to this article

    Git

  5. REST API

    When you are working on any real-world application, you would require data from other servers, APIs provide end-points to share data between your application and the various services hosted on the web.

That's all we have for the Intermediate section. Phew!

Phew

But we still have the Advanced section to cover πŸ™ƒ

Advanced

Now we are at the last leg of our journey.

  1. PWA

    PWA (Progressive Web Apps) are Web Applications supercharged with additional capabilities like being installable (like any native application), caching, background-synchronization and much more.

    For more on PWA checkout this article.

  2. GraphQL

    GraphQL is an alternative for REST APIs developed by Facebook for applications that require huge number of requests. It reduces the number of requests by specifically mentioning the data you need within the request.

    GraphQL operates using POST request through a REST API, so strong knowledge of REST APIs definitely helps.

  3. Cross-Platform Applications with Web Technology

    With the advent of frameworks like Tauri and Electron.js you can now convert your website into Cross-Platform Applications with little effort. This is not for everyone as all Web Developers don't find it appealing developing Native Applications, but some are crazy about it.

    Currently, Electron.js is the De Facto standard with the development of some huge applications like WhatsApp Desktop and VS Code, but in my opinion, Tauri (the new kid in town) will soon overtake Electron.js because it's far more optimized.

    For more on Electron.js check out this article.

Wrapping Up

There you have it, a Roadmap to help you become an Amazing Front End Developer. Hope it helps you in your journey and you become an Amazing Front End Developer :)

Best of Luck

Did I miss something? Share your thoughts in the comments below πŸ‘‡

Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja

Thanks for reading

Want to work together? Contact me on Upwork

Want to see what I am working on? Check out my GitHub

I am a freelancer who will start off as a Digital Nomad in mid-2022. Want to catch the journey? Follow me on Instagram

Follow my blogs for weekly new tidbits on Dev

FAQ

These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.

  1. Would you mentor me?
    Sorry, I am already under a lot of workload and would not have the time to mentor anyone.

  2. Would you like to collaborate on our site?
    As mentioned in the previous question, I am in a time crunch, so I would have to pass on such opportunities.

Connect to me on

Top comments (27)

Collapse
 
dreitzner profile image
Domenik Reitzner

Would have loved to see svelte on the list of Frontend frameworks, as it was the most beloved framework in the 2021 stack overflow developer survey. (insights.stackoverflow.com/survey/...)

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

Yeah, Svelte's popularity is on the rise as well :)

Collapse
 
tracygjg profile image
Tracy Gilmore

I can highly recommend MDN as a vital resource for learning many of the fundamental web technologies and an essential source of reference through-out a frontend development career.
I have also found Scrimba to be an excellent interactive training site - and it is free.

Collapse
 
lesleyvdp profile image
Lesley van der Pol • Edited

Sweet article. What I do think is an important note is the fact that Angular's learning curve is MUCH more steep than Vue or React. You also forgot to mention the fact that Angular not only carries the learning of a framework, but also the programming language due to the fact that it is TypeScript.

I also wonder what your take on PWA's is. Is it really worthwhile to spend your time into learning how they work? I hardly see them being used professionally.

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

Yes, I should have mentioned that. Thanks for pointing out.

As for PWA, a lot of the top apps like Spotify, YouTube, Twitter and more do use it (and research says adding PWA features has a correlation with increased revenue), so think it is worth looking into

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

I strongly agree with the last point. One should try out a bunch of stuff (frontend, backend, data science, etc) and only then choose the one he likes the most to become an effective developer

Collapse
 
osahene profile image
osahene

Very informative. Thanks πŸ‘

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

Your welcome!

Collapse
 
adithyahere profile image
Adithya

Okay, now I can assume I'm on imtermediate stage. Grate articleπŸ’‘πŸ€

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

Best of luck on your journey πŸ‘

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

You are absolutely right :)

Collapse
 
taofeekajibade profile image
Taofeek Ajibade

Now, I can say I'm out of the intermediate level.

Thanks for the brilliant piece.

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

Glad I could help :)

Collapse
 
zappellin profile image
Leon Guillaume

Nice a front-end roadmap that is really a front end roadmap and not a js fullstack roadmap

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

:)

Collapse
 
peter_brown_cc2f497ac1175 profile image
Peter Brown

It's all about the fundamentals. Thank you for reminding everyone of that.

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

My pleasure :)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.