How to become a Web Developer: a detailed plan for learning JavaScript

Everyone who wants to become an IT developer usually begins with making sites, as the easiest part of it. To work, you need only a text editor for writing the code and browser to see visually what you are doing. If you're not aiming to a full-stack approach and you just want learn the magic of client-side programming, you won't have to study complicated algorithms: as a matter of fact, the main skill each client-side web developer must have nowadays is the knowledge of JavaScript (and its frameworks).

The best way to learn is by creating own website using multiple technologies. For example, you can create website and display stats from popular games like Counter-Strike and Valorant. Such a project requires HTML, CSS, Git, Bootstrap, JavaScript, Bash, MySQL. A nice example is the Valorant Tracker project, which is something that could be done in 4-6 months if you're willing to learning JavaScript programming. Once you manage to pull off something like that, you'll have a good chance to get hired as a junior code in a decent company and start your developer career.

Nowadays, JS has been developing incredibly fast, so it's easy to get confused while studying this language. We offer you an educational plan with a convenient structure, where you will find all the main aspects of JavaScript and other adjacent technologies.

Why JavaScript?

We have to mention that language being pretty open - many companies are rivaling using JS with the goal of its evolution. The language is incredibly flexible, so it is perfect for people who like both object-oriented and functional approaches. A mammoth amount of different libraries and frameworks allows you to solve even the most difficult issues. Moreover, the server platform Node.js allows you to use JS not just in browsers but on the console. You can create apps for both smartphones and PC. Apps for a computer by using the Electron framework, and mobile apps thanks to NativeScript or ReactNative.

Git and GitHub

The first thing you should do is to study how Git works: a source code manager is a vital instrument for developers, so you have to learn it first - since it's arguably the best choice nowadays.

Here are three common topics you might start to learn to quickly understand the basics:

• Creation and moving of the files across catalogs.
• Initialization and commits in Git.
• Repositories settings in GitHub.

Also, you must have the next skills:

• Object-oriented JS - constructors and factories.
• Functional JS - functions of the highest order, circuit, and recursion.
• Specification of the Jasmine tests.
• Basics of the HTML, CSS, and jQuery.

To better understand these topics, be sure to check out our posts, guides and tutorials regarding Git and GitHub.

Algorithms and data structures

Later you have to learn algorithms (especially big complicated ones), and basic data structures: connected lists, turns, stacks, binary searching trees, and hash-tables.

Back-end JavaScript frameworks

• Node.js - Approximately a decade ago JS was used only for writing the code for front-end (just like CSS and HTML), but today due to Node.js the situation is quite the opposite. Node - is a server area for committing all the actions by JS, so you won't have to learn all the new syntax. Although, you will have to import and export files, divide the entire code for modules, and use the pack-manager NPM.
• Express.js - Besides learning Node you have to get more knowledge about back-end development, especially about servers and routing. Ports and protocols with HTTP will be a nice start before studying Express. Express.js - Node-library for requests processing.

Asynchronous JavaScript (AJAX)

If you don’t want to refresh your page after each change in your DB, Ajax is certainly what you will need - it sends asynchronous HTTP-request to reload only part of the page. You can work with Ajax through the jQuery (see below) or by directly (manually) handling the XMLHttpRequest object.

Asynchrony is the thing that makes JS unique but separating developers into two sides: some love it and some hate. Each developer has to know both advantages and disadvantages of that technology. You can start by studying call stacks, events cycles, and callbacks, then - studying promises.

Databases, Schemes, Models, and ORM

Databases one of the most important parts of web development. If your app has to save or load some information without losing it just after the page's update, you definitely will have to use DB. You have to learn how to see the difference between relational and non-relational DB and learn their connection ways. The next step will be studying the SQL and different systems for controlling DB. Knowledge of ORM won't be excessive.

HTML and CSS

Those languages are the very basics of the web-design. You don't have to know them perfectly but understand their code. Then you will have to learn at least one popular library (for example, Bootstrap). For CSS you have to learn processors, like Sass that will make CSS more similar to the normal code. For making work with the HTML you can pick any template, like PUG.

To better understand these topics, be sure to check out our posts, guides and tutorials regarding HTML, HTML5, CSS and CSS3.

jQuery and DOM manipulations

After you finished the main look of the page using HTML and CSS, you will use event translators and jQuery for the DOM controlling. Many people think that jQuery is useless and soon will be replaced by Angular or React. Maybe it's true, but jQuery is worldwide popular, so in any case, you must know it. Moreover, you can get into the situation when you will have to do an incredibly complicated job using React-microscope, so in that situation, light jQuery will be your salvation.

To better understand these topics, be sure to check out our posts, guides and tutorials regarding JQuery.

Chrome instruments for developers

If we didn't mention the Chrome instrument which makes the programming job easier, we wouldn't forgive ourselves. Thanks to them you will be able to learn DOM, debugging process through the console, routes` tracking and so much more.

Test-Diven Development

Also called TDD: this is the development tactic when the software divides for a few tiny cycles:

• Writing down the code to make all changes you had to.
• Writing down the code that will pass all tests.
• Refactoring the code and writing new tests if those are necessary.
• If some parts of the code don't pass the test, they have to be rewritten.

If you work with JS we firmly recommend you pay attention to the Jasmine, Chai, and Mocha frameworks.

To better understand these topics, be sure to check out the ASP.NET Core 3 and Angular 9 book, which features an entire chapter about client-side TDD using the Karma test runner and Jasmine testing suite.

Web Sockets

We have to pay extra attention to that topic because web-sockets are useful. WebSocket protocol, unlike the HTTP one, will allow you to work with a bidirectional data stream – the reason why is that tech unique. The most popular library called socket.io and is well documented here.

EcmaScript 6 (ES2015)

Nowadays, the main standard is ES6 (ES2015), ES2016 has been confirmed already and the ES2017 is under development right now, so you always have to watch their updates and use the newest and most stable version. All compatibility problems can be solved easily with the next apps.

Babel

Babel - compiles ES6 (ES2016 support is expected soon) into the ES5, which is well-known by all browsers. It also can compile JSX/REACT-components, which makes it vital for web-developers.
Webpack - takes all your files (images, fonts, style tables, JS-files, etc) into the single dependency graph. You don't have to use it if you are making a small app but shall use it while working with React.

React and Redux

React (also known as ReactJS) - the library which will allow you to create a user's interface. It was created by Facebook in 2013 and became worldwide popular pretty fast. React is needed not just for web-design, but there are versions for smartphones (React Native) and VR (React VR), published later by the same company.

Redux - container of predictable states, usually used with React. It can be used for shortening the code by the modeling way. Pretty useful in real-time working apps with a big number of users, such as games.

To better understand these topics, be sure to check out the series of React & ReactJS articles we've published in the last few years.

Authentication, Sessions, Cookies

You have to understand how the app will interact with users - how users will log in\out of their accounts, get bonuses, etc. For identifying people during surfing your site, web-sites using cookies - small text-files that send a reply from server to browser for user's HTTP request. For the connection between DB and log-in page, you can use the express-session library.

Web Security

Each site/app, of course, must be secure and reliable. You have to get the knowledge of all possible attacks on your creation and ways of protection as well.

To better understand these topics, be sure to check out the various IT & Development Security articles we published in the last few years.

Conclusions

In this post we tried to write a list of the main study topics that await a novice JavaScript developer. Most of these tools will become your best friends, others will make you spit blood: each of them, however, will help you better understand how to overcome the inevitable difficulties that await your learning path and satisfy the development requests of the clients.

Print Friendly & PDF Download