Are you about to change your career? Have you always been interested in programming/web development but don't know where to start? Then you couldn't be in a better place.

The year 2022 was a watershed for many in terms of their careers. A lot of people lost their jobs and businesses, which put their basic livelihoods in jeopardy. At such times, the possibility of a career change arises in the mind.

The most valuable currency is "time" itself. What would be worth investing in? This is where IT (information technology) comes into the picture, which is known to be one of the fastest developing and most stable employment sectors. According to public opinion, developers earn relatively well, and many are attracted to this field by this fact. However, it is worth noting that the salary of programmers depends on a lot of variables, which I will perhaps cover in another article.

As I wrote in one of my previous articles, the career of web developers usually starts with learning the basics of HTML and CSS. In addition to javascript, HTML and CSS are the other two main pillars of website creation, so it is inevitable that you should familiarize yourself with them sooner rather than later. If you haven't had the chance to get to know them yet, I strongly recommend you to learn them before moving into the world of javascript.

Let's see what options are available for an absolute layman/beginner to embark on the long and bumpy road of web development.

Basically, I would divide the possibilities into 2 main categories:

• self-development: fully self-taught learning (free)
• codecamp: signing a contract with an educational company (paid)

In this article, I focused primarily on the resources related to the free, self-development-based approach.

First of all, let's see what types of source materials are available to us to learn:

• lexical informative websites, documentations
• books (doc, e-book, physical book)
• video tutorials (Youtube, Udemy)
• practical educational websites (sandbox)
• podcasts

After some research, the amount and selection of source materials available can be more intimidating than the learning process itself.

Each type of medium has its advantages and disadvantages, as well as the ideal case when one is preferred over the other. For beginners, I would recommend a hybrid solution so that they can accumulate relevant practical and theoretical knowledge in the shortest possible time. The knowledge suitable for starting a career can be obtained most quickly with the help of video-based tutorials and lexical + practical educational websites. Let’s look at them one by one.

1. Acquiring the required basics - Lexical knowledge

W3 school: A platform that can be considered ideal for complete beginners.

The documentation is not as detailed as MDN or javascript.info (see later in the article), but there is enough information to learn the (not very stable) basics. Its biggest advantage is the built-in sandbox code editor, which allows you to edit the code examples within the website, making the learning process much more playful and interactive. The fact that there are plenty of other tutorials related to web development also speaks for the site. If you're done with javascript, you might want to check them out as well. The biggest disadvantage is the slightly obsolete information base and the transmission of insufficient information (which does not detail the true depths of the given programming language).

Javascript.info: The perfect javascript documentation, which is smaller than the MDN documentation, but more comprehensive than other similar sites.

In order to start learning javascript frameworks, it is essential to first deepen our native javascript knowledge as much as possible. javascript.info presents the programming language with perfectly developed hybrid documentation and exceptionally perceptive examples. Another strength of the site is the comment section. Hundreds of people add their opinions, additional insights, and code snippets to each topic.

MDN: The most detailed and comprehensive javascript documentation on the web.

This is a resource that I would not necessarily recommend to novice web developers. At least not for learning purposes. Even though MDN is the Alpha and Omega of javascript documentation, it contains too massive an amount of information on a single topic for beginners, which can overload many, and in the worst case, demotivate them. For beginners, it may be worth choosing this platform when they are interested in the operation of a specific API reference. Ex: What is Object.create() for and what parameters does it have? However, for this purpose chatGPT may be a more efficient tool (later in the article)

2. Practical educational websites (code sandbox)

JsChallenger: Translating theory into practice is a long process. JSChallenger is the perfect place for this purpose.

The tutorials start with beginner-level examples and end with advanced examples. Learn the use of primitive and reference type variables, DOM manipulation, and practice until your nose bleeds :)

TheOdinProject: The odin project primarily focuses on marketable knowledge.

Under the odin project's free mentor program, it is not only teaches javascript but also provides insight into other segments of web development, such as HTML+CSS, Ruby, database management, and Node js. So those who are looking for full-stack development may be tempted by what the site has to offer.

https://adroitgroup-io-storage.s3.eu-central-1.amazonaws.com/text-editor/2023-02-13_caNRPxYcCy_Your-Career-in-Web-Development-Starts-Here-The-Odin-Project.png

CodeWars: If you have acquired the coveted knowledge, unfortunately, it must be kept up to date. War with the codes!

Each code exercise (or 'kata' as they call it on the site) was created by the community to help strengthen different coding skills. In addition to javascript, you can choose from another 55+ supported programming languages. If you have gained enough rank, you can create "katas" yourself, which you can impress your future employers :)

CodeInGame: A tutorial based on very strong interactive foundations which build on games in every sense.

Discover new languages (more than 25 languages in total), algorithms and tricks in courses created by world-class developers. They take the term “beginner to advanced” very seriously. If you want to be part of a really interactive learning process combined with a visual experience, then this is your place.

1. Video-based tutorials (youtube channels, udemy)

Jonas Schedthmann: Zero to hero comprehensive javascript course from the turtle himself.

Jonas Schedthmann has undeniably put together one of the most complete video-based educational materials about javascript. The 70 hours long tutorial guides you completely from the basics to the advanced depths, with great examples, at a slow and easy-to-understand pace. When I say slow, I mean it. In extreme cases, you may even want to set the play speed of the video player by x1.25 😀 Before you start his tutorial, make sure to make a coffee. According to the participants of the course, the first part of the curriculum is very good, but the second 35 hours already feel less organized and exhausting.

Maximilian Schwarzmüller: The "all-knowing" German front-end developer.

If I want to learn a new frontend framework from the ground up, the first thing I do is to check out Maximilian's tutorial on the subject. And this is no accident. He teaches in an extremely comprehensible and lovable way, with a pleasant German accent. He structures his courses very consciously, and the pet-projects created during the course can also represent a professional reference value.

TraversyMedia: The veterans of web development videos on youtube.

TraverseMedia is a YouTube channel made up of highly qualified professionals, where we are guaranteed to receive the highest quality education according to current trends. They have been on YouTube for over 10 years and have published hundreds of videos on all aspects of web development.

[WebDev simplified:](https://www.youtube.com/@WebDevSimplified/featured

) The guy who got bored of modelling and started programming instead.

He’s my personal favorite because he can detect javascript blind spots with amazing precision. It is a pleasure to listen to each of his videos, which are concise, to the point, clean, and are presented in both practical and theoretical ways. Even after years, I learn valuable tricks from him day to day. A just have!

https://www.youtube.com/@WebDevSimplified/featured

Fireship.io: The man who overdosed on red bull.

I put him on the list because of his popularity rather than his effectiveness. fireship.io has become famous for its 100-second videos, which essentially demonstrate an entire programming language or another web development-related technology in just a minute and a half. In order to be able to convey meaningful information during this time, he has to go through the essence of the given topic at a rate that would even embarrass rappers, which is obviously not very effective, but it can definitely be said to be interesting.

4. Books

This medium is a blind spot for me, and I don't want to hypocritically recommend a book without ever having read one (This is not entirely true, because I have read a book about Java, and it didn't end well). Due to its massive theoretical nature, its effectiveness can be questioned. After all, while reading, we can only record what we see on a theoretical level, not in practice. I would recommend books for those who want to gain insight into the deepest layers of javascript. But so that we do not leave empty-handed, I will share a link where the most successful and recognized books have been collected:

https://hackr.io/blog/javascript-books

5. Other supplementary materials (advanced)

Design Patterns:

Design patterns are a part of software design that aims to solve typical and frequently occurring problems. Each such pattern is essentially a blueprint that we can use as a guide while writing our code.

CommonJS (cjs) vs. Modules (ESM):

Take a detailed look at the difference between the 2 sets of standards used to implement modules in JavaScript.

Cypress: With Cypress, you can easily create tests for your modern web applications, visually find potential errors in your application, and run them automatically in integration builds.

Web workers:

We use Web Workers to create scripts that can be run on multiple threads in the background. The worker can perform tasks without disrupting/blocking the user interface.

Three.js:

The three. js is a JavaScript-based WebGL engine that can run GPU-based games and other graphics-based applications directly from the browser. The three. js library provides many services and APIs for presenting 3D-based content in the browser.

Best javascript blogs:

Due to the rapid development of the web and the new technologies appearing every day, it is worth keeping our tool sets up-to-date, in which reading blog articles can be of great help.

ChatGPT:

The capabilities of the artificial intelligence chatbot tool, launched in November 2022 by San Francisco-based startup OpenAI, are vast. It can fix spelling and grammar errors, write contracts, poems and songs, analyse or reflect on code written in any language and much more. It is a must-have tool to help you become a better developer.

6. Javascript frameworks:

Unfortunately, learning native javascript is not the end goal, but only a stop on the long journey of learning. Entire frameworks are built on top of javascript. With these frameworks, we can create modern, fast, scalable applications that have out-of-the-box solutions for all kinds of problems. All of the frameworks are based on the basic principles of javascript but still operate with specific functionality and syntax. When we talk about front-end development, the labor market in most cases assumes that you have experience in at least one of these frameworks, so it is particularly important to master one or more. Let's take a look at these frameworks in ascending order of difficulty:

Svelte

:
Learning curve: Short

Description: It's basically quite similar to react and vue. The goal of the framework is to create fast and modern user interfaces. However, there is a significant and essential difference between them, to which it owes its popularity: svelte interprets and compiles the code during build-time, in a way that can be understood by browsers Thanks to this approach we can save a lot of resources, and optimizing the running time of our application.

Advantages: quick to learn, extremely simplified approach

Drawbacks: it has a small developer community, and it's hard to find a job with it

Documentation: https://svelte.dev/

Vue

:
Learning curve: Short/Medium

Description: The javascript framework developed by Evan You that conquered the world. The Vue. js (or simply Vue) is a lightweight JavaScript framework for building reactive web user interfaces. Vue progressively extends standard HTML and CSS to efficiently create interactive interfaces.

Advantages: innovative approach, can be learned quickly and easily

Drawbacks: compared to react and angular, smaller community and fewer work opportunities, too much flexibility, lack of typescript in vue 2.0, options and composition api -> double learning,

Documentation: https://vuejs.org/

React:

Learning curve: Short/Medium

Description: React is a JavaScript library developed by Facebook, which was used, among other things, to develop Instagram.com. Its purpose is to enable developers to easily create fast user interfaces for both websites and applications. The main features of React are the virtual DOM and the JSX template engine.

Advantages: easy and quick to learn, many job opportunities globally

Drawbacks: JSX can be difficult to get used to at first, strongly dependent on third-party libs, classes and hooks -> double learning

Documentation: https://reactjs.org/

Angular:

Learning curve: Long

Description: The framework created by Google is mostly used for the development of large-scale enterprise applications due to its scalability and stability. Compared to its peers, it has a much larger set of built-in tools and supports typescript natively.

Advantages: typescript, easily scalable, many domestic and foreign job opportunities

Drawbacks: inconvenient documentation, longer and more difficult to learn than other frameworks

Documentation: https://angular.io/

7. Bonus: Interviewing

The presentation of acquired knowledge is at least as important as its application in practice. If we cannot present the knowledge we have to others (employers), it will be much more difficult for us to assert ourselves in the labor market. It may be a good idea to devote some time to possible questions that may arise during interviews so that we don't lose our dream job because of unpreparedness. Personally, I lost many job opportunities before I realized how much of a weakness it is if I can't communicate professionally during an interview. In order to alleviate this problem, I have collected the links of what I consider to be the best (beginners) javascript/web development interview questions, which I would like to share with you now.

CSS interview questions

Native/Vanilla JS interview questions


Node interview questions

GIT interview questions

Summary

Learning to code is not fast, and certainly not a process to be rushed. It is worth choosing our source materials well because they can decide the fate of our entire career as a programmer. It is important to receive repeated positive feedback about our results during learning, so I would recommend a more interactive version of learning instead of books and other written documents. Video-based tutorials and practical training websites can be the target tools with which we can visualize our results and gain motivation to continue learning.

To be able to get a job as a Junior programmer in 2023, you will need (among other things) the following:

• use the educational materials outlined in the article
• acquire solid foundations in the chosen programming language, javascript in our case
• learn to use at least one javascript framework (vue, react, angular)
• test your practical and lexical knowledge, prepare for interviews
• have presentable pet projects (game, calculator, api use, fake webshop, etc...)
• develop your soft skills (language, diligence, proactivity, openness to learn new technologies and toward people)

I wish you happy learning and lots of success! :)

Originally published at adroitgroup.io and written by Maté Séra.