Front End Journey

I am writing this post for the front end journey because when I searched for the front end journey on google and I was expecting about having the complete details for the front end journey.

But there was basic knowledge sharing or overview of the technology but I need details of each day learning topics. Or in summary, I need a front end development syllabus.

So in the current post, I am writing an overview of topics we need to read, and then I would add linked posts for details of how we will learn them thoroughly.

Below is the list of topics related to helper tools

  1. Version Control (GIT)
  2. Package Managers
  3. Module Bandler
  4. Linter and Formatter
  5. Testing Tools
  6. IDE Selection And Its Settings
  7. Debugging Tools
  8. Profiling Tools

After this, we need a list where the actual codding part will come

  1. HTML, Javascript, and CSS Basics
  2. UI library/ Framework (ReactJs, Vue)
  3. CSS Pre Processors, CSS in JS
  4. Type Checker
  5. Testing Framework
  6. All different ES versions feature ( ES6,7, 8 … )
  7. Data/ Application state management

Learning is progressive work after completing all the above we have below points where we can explore

  1. PWA
  2. SSR
  3. WebAssebly
  4. Accessibility
  5. Semantic HTML
  6. SEO
  7. Design Patterns
  8. HTTP

Learning Procedure

Another important step while learning all these above is the procedure. What process you follow to learn technical stuff depends so much. How deeply you understand and How long you can remember them.

Because it happens most of the time we read the same thing again and again and even after that much reading we are not clear about the concept/topic.

For these above reasons, there should be a strong learning process, in order to grasp everything that we are reading about. Below are the steps one could follow.

  1. Read about the Topic.
  2. Think again about why it is needed.
  3. Take a step backward ( Try to reach its origin )
  4. Break the topic words ( Should have a complete understanding of each word Ex. => Module Bundler. You should first understand about the module and then about bundler )
  5. Rewise everything in mind what you have learned
  6. Create POC
  7. Think about use cases

Leave a comment

Your email address will not be published. Required fields are marked *