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

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?

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.

      

   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:

      

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
   

   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

   

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!

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 :)

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

• LinkedIn
• Portfolio
• Upwork
• GitHub
• Instagram