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