Zero to Hero: Front End Developer Roadmap
Tags: webdev, html, css, javascript
Published: 2021-08-22 05:45:19

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zq3e5ywfh9dy99r66scp.gif)

# 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/10c7rc113xs3ozr70gh1.png)

# 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**. 
        ```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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3gc9jzz3mf3dzhlkwqe.png)
 
    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. 

        ```js
        // 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.

        ```js
        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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hys3cwyy0l01kb43d3i2.png)

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](https://dev.to/ruppysuppy/5-awesome-css-tricks-you-did-not-know-2j4a) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kdcsvpll5yg82m7pu9c.gif)

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

3. **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](https://dev.to/ruppysuppy/git-fundamentals-concepts-commands-simplified-2k4j)

    ![Git](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b3ogjuk67mj7xn9gz1s5.png)

4. **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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xn1siggknrt1qgpyf4pw.gif)

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](https://dev.to/ruppysuppy/supercharge-your-website-using-pwa-installable-website-32i3).

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](https://dev.to/ruppysuppy/turn-your-website-into-a-cross-platform-desktop-app-with-less-than-15-lines-of-code-with-electron-44m3).

# 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/el2e5ny0grhwejl81q87.jpg)

Did I miss something? Share your thoughts in the comments below 👇

Finding **personal finance** too intimidating? Checkout my **Instagram** to become a [**Dollar Ninja**](https://www.instagram.com/the.dollar.ninja/)

# Thanks for reading

Want to work together? Contact me on [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)

Want to see what I am working on? Check out my [GitHub](https://github.com/ruppysuppy)

I am a freelancer who will start off as a Digital Nomad in mid-2022. Want to catch the journey? Follow me on [Instagram](https://www.instagram.com/tapajyotib/)

Follow my blogs for weekly new tidbits on [Dev](https://dev.to/ruppysuppy)

**FAQ**

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

<!-- 1. **I am a beginner, how should I learn Front-End Web Dev?**
    First get the fundamentals of **HTML**, **CSS**, **JS** down; Learn any _front-end framework/library_ (**React**, **Vue**, **Angular**); Then keep making **Projects** or make **Open Source Contributions** to attain mastery.

    **Relevant Article Links**
        1. [Front End Project Ideas](https://dev.to/ruppysuppy/5-projects-to-master-front-end-development-57p)
        2. [Get Started With Open Source](https://dev.to/ruppysuppy/zero-to-hero-get-started-with-open-source-10b7) -->

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

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

-   [LinkedIn](https://www.linkedin.com/in/tapajyoti-bose/)
-   [Portfolio](https://tapajyoti-bose.vercel.app)
-   [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)
-   [GitHub](https://github.com/ruppysuppy)
-   [Instagram](https://www.instagram.com/tapajyotib/)