ROADMAP TO BECOMING A FRONTEND WEB DEVELOPER IN 2019

Roadmap to becoming a front-end web Developer in 2019

In present time, web developers are in high demand. To become to front-end web developer to have to follow these step :-

1. Learn the Basic

First of all, you have to learn HTML, CSS, Basic of JavaScript. 

In HTML, learn the basic,  writing semantic HTML, basic SEO, Accessibility.

In CSS. learn the basic, making layout, media Queries, learn CSS 3.

In JavaScript, learn Syntax and Basic Constructs, Learn DOM Manipulation, Learn Fetch API / Ajax (XHR), ES6+ and modular JavaScript, Understand the concepts Hosting, Event bubbing, Scope prototype, Shadow DOM, strict, how browsers work, DNS, HTTP.

2. Package Managers

You have to learn NPM, YARN. NPM improved a lot, post v5+, but is still behind YARN in some features; nothung serious though. Pick anyone!

3. CSS Pre-processors

In CSS Pre-processors, you should learn SASS, PostCSS, Less. PostCSS in not a pre-processor but can be used as one. Go for SASS and revisit PostCSS later. There is still some Less in the market but i won't go for it if i was starting in 2019.

4. CSS Frameworks

Bootstrap, Materialize CSS, Bulma, Semantic UI. These are some famous CSS Frameworks you can learn.

5. CSS Architecture 

You can learn BEM, OOCESS, SMACSS. With modern front-end frameworks, there is more push towards CSS in JS methodologies with which you are not going to need these. However, you should still learn BEM at-least, which would prove helpful in the long run.

6. Build Tools

Linters and Formatters - Prettier, ESLint, JSHint, JSLint, JSCS are some fomous Linters and Formatters. 

Task Runners - As Task Runner, you can use npm scripts, gulp.

Module Bundlers - Webpack, Parcel, Rollup are the Module Bundlers, you can use.

7. Pick a Framework

 

• Vue.js

  • Vuex

• Angular 

  • RxJS

  • ngrx

• React.js

  • MobX

  • Redux  

    These are not specific to React though, you can use them in any framework or app.

Before you start this, you should have a good understanding of what single page applications are, how they work and what are some of positive and negative aspects of single page applications.

8. CSS in JS

• Styled Components

• CSS Modules

• Emotion

• Radium

• Glamorous

9. Testing your Apps

You can fulfill all your testing needs with these three...

• Jest

• Enzyme

• Crypress

10. Progressive Web Apps

• Learn different Web APIs used in PWAs

  • Storage

  • Web Sockets

  • Service Workers

  • Location

  • Notifications

  • Device Orientation

  • Payments

  • Credentials

• Calculating, Measuring and improving performance

  • PRPL Pattern

  • RAIL Model

  • Performance Metrics

  • Using Light House

  • Using Dev Tools

11. Type Checkers

• TypeScript

• Flow

12. Server Side Rendering

• React.js

  • Next.js

  • After.js

• Angular

  • Universal

• Vue.js

  • Nuxt,js

You can use these libraries for Server Side Rendering 

13. Web Assembly

Web Assembly or WASM is the binary instructions generated from high level language such as Go, C, C++ or Rust. It is faster than JavaScript and WASM 1.0 has already shipped in the major browsers . It is being touted by some to eventually replace JavaScript but I seriously doubt that it would happen or see it happening anytime soon.

The most important note is you have to keep learning always. You should keep learning while doing job also. This will help to keep updated all time to the recent frameworks, libraries, language, and other stuff important for your work and your experience.

Click here to join our official telegram group 

Writen by - Aayush Sourav