• Web Developer Roadmap - 2018

Learn HTML

• Learn the basics and how to write semantic HTML
• Dividing page into sections and how to structure the DOM properly
• Make at least 5 HTML pages - focus on structure
• Don't worry about making them pretty yet

Basics of CSS

• Learn the basics of CSS
• Learn how to use Grid and Flexbox
• Media Queries and Responsive Websites
• Style the HTML Pages that you made in last step

Basics of JavaScript

• Learn the syntax and basic constructs
• Learn how to manipulate DOM
• Understand the concepts such as hoisting, event bubbling, prototype etc
• Learn Fetch API / Ajax(XHR)
• Learn ES6+ new features and writing modular JavaScript

Jquery - Optional

Make some responsive website and add some interactivity with JavaScript

Search projects on Github and open a few PRs

Some of the ideas are listed below:

• Enhance the UI, make any demo pages responsive or improve the design
• Look for any open issues that you can solve
• Refactor any of the code or implement the best practices that you learnt along the way
• Link this repo, tell them you are learning and ask for feedback on your PR and how you can improve
• Needs some knowledge of 'git' - Optional

---

Give yourself a pat on the back. You are getting there:

• There are many jobs out there requiring the skillset that you have got till the point
• You can easily start getting some freelance work or find yourself a job if you may.
• However, don't stop here, there is still a long way to go if you want to have a better career

---

Package Manager( NPM or Yarn )

• Learn one, you automatically learn the other.
• Package managers help you bring external libraries and plugins into your projects, so that you don't have to worry about copying the libraries manaually or go through the hasle of updating etc
• Both are almost same, there are just implementation differences, just pick any

Install some external dependency in your application

Go ahead and install some external library in the webpages that you made above. e.g. install some toast plugin and when user clicks a button, show him the toast message or create a login form and do the form validation using some form validation library and play with different options and see how to install different versions

CSS Preprocessors

Preprocessors let you add functionaity on top of CSS and let you do things that CSS don't. Have a look at any of them and see what they have to offer and pick the suitable one.

Some CSS Preprocessors:

• Sass
• PostCSS
• Less
• Stylus

Learn Sass for now

• I would recommend you to learn Sass for now
• PostCSS is a nice-to-have and is sort of "Babel" for CSS. You can use it on top of Sass also.
• However, I would recommend you to learn Sass and revisit PostCSS later

CSS Framework

You really don't need to learn any but still they are good to have.
e.g.:

• Bootstrap
• Materialize CSS
• Bulma

CSS Architecture

There are multiple ways to structure your CSS better and to make it more maintainable.
e.g.:

• BEM
• OOCSS
• SMACSS
• SUITCSS
• Atomic
  You should know about the differences - personally I find myself using BEM more

Build tool

Tools to help you in the building/bundling and development

Automated Build Tools

I would just pick NPM Scripts in 2018. However, if you want to pick something else look at Gulp and see how you can benefit from it

• NPM Scripts
• Gulp

Validation Tool

• ESLint
• JSLint
• JSHint
• JSCS

Module Bundler

Use Webpack for apps, Rollup for libraries. You don't need Rollup for now and can do everything with webpack but feel free to revisit Rollup later.

• Webpack
• Rollup
• Parcel

---

Create something - Maybe a library

Congrates! You can call yourself 75% modern JavaScript developer now. Now go ahead and create something with all that you have learnt. Maybe create some sort of library in which you have to use Sass and JavaScript. Then use webpack to convert Sass to CSS and use babel to transpile ES6 code. Once you are done with, release it on Github and npm.

---

Pick a Framework

• There is more and more demand for React.js these days.
• You can pick any of the listed ones and you will be fine.
• Have a look at all of them and what you like.
• Important - Don't buy into the hype, compare and understant!

e.g.

• React.js
  There are not specific to React though, you can use them in any framework or app.
  • Redux
  • Mobx
• Vue.js
  • Vuex
• Angular
  It isn't used any more expect for the old apps. Make sure if you pick Angular it is Angular2+ and not angular.js
  • RxJS
    Even if you don't pick angular, RxJS is an amazing library and can be used out of angular. Give it a try afterwards!
  • ngrx

---

Praticle time

Now you know everything that might need to build a modern JavaScript application. Go ahead and make some application with whatever framework you picked. Pick anything and start!
Learn how to makesure and improve the performance of your application.
e.g. Interactivity Time, Page Speed Index, Lighthouse Score etc

---

Testing your Apps

There are lots and lots of different tools for different purposes. I mostly find myself using the ones listed on the left. However, before and learn them, I would recomment you to first understand the different test types, look at all the options available and use the ones most suitable for your needs.
Here is a good summary to get you started: An Overview of JavaScript Testing in 2018

• Jest
• Mocha
• Protractor
• Karma
• Enzyme

Progressive WebApps

Learn about service workers and how to make progress web apps

Static Type checkers

You don't need to learn these but they really give you superpowers and can be mastered in a few hours. I would pick TypeScript but feel free to check both and pick.
e.g.

• TypeScript
• Flow

Server Side Rendering

Learn about server side rendering in whatever framework you picked.
e.g.

• React
  • Next.js
  • After.js
• Vue.js
  • Nuxt.js
• Angular
  • Universal

All things that weren't mentioned above

• Canvas
• HTML5
• APIs
• SVG
• sourcemaps
• functional programming
• TC39

(https://github.com/kamranahmedse/developer-roadmap)

image.png