Taking tutorials may be exciting at the beginning. But it doesn't take long to realize that what you've learned in a tutorial is hard to put into practice.

The problem with most tutorials is that they teach you how to solve a specific small task, often a tiny one. It's impossible to translate such knowledge onto a larger task, let alone a project.

Imagine if your driving instructor would tell you to look at a smashed insect on the windshield instead of looking through it to see the road ahead. You would end up in trouble in a matter of seconds.

The same happens with tutorials. You can't learn how to build a project by taking tutorials that teach you how to create an HTML form and submit it using an API endpoint, which is magically available...

It just doesn't work.

Most of us have a vague idea about how exactly cars function, but we know about the engine, about the steering wheel, accelerator, breaks, gearshift, etc and what those things are for.

If someone told you to repair a flat tyre, you'd either do it yourself or call a service to do it for you. Either way, you will get it done. Simply because you know what this part is and where to look for a solution.

Similarly, in software development, you can figure out how to build a feature if you understand its role in the system. You can ask the right questions if you hesitate. You can develop it yourself or decide to go for a third-party solution.

Learning web development should start with a general overview of all the building blocks. For example, Frontend, Backend, Databases, testing and deployment as well as the Software Development Life Cycle (SDLC).

Knowing how software is developed gives a very good idea about the necessary steps to take to build reliable software and unlock Continuous Integration and Delivery (CI/CD) that all companies mention in job specs.

With this knowledge, it will be so easy to develop the right mindset - the DevOps mindset.

Why would a beginner need it? Those things are relatively easy to explain. They open up a whole different perspective. It's like seeing an ocean instead of a drop.

Once you have a general understanding of where you are heading, you can start learning every bit in more detail.

Another crucial point is to learn in a reverse order. First, you define what you want to build and then learn what is needed to build it. This way you can see how code maps to either what you see on the screen or the result you expect.

The logical first step for a web developer is to learn Frontend technologies: HTML, CSS and JavaScript.

Let's take HTML and CSS as an example. It's not only about the tags and styles. It's also about structures, performance, CSS preprocessors and CSS frameworks.

Beginners tend to keep all styles in one file until it grows huge and becomes hard to maintain.

Then they start to realize they are missing something. But what is it?
If they were told about CSS methodologies that help with writing modular, reusable and scalable code, beginners would quickly understand the idea behind them. Instead of struggling, they would know what to learn next to fix the problem.

Nobody explains to beginners, that animations can be done both with CSS and JavaScript and that depending on the task, one can be faster than the other.

Just like with CSS methodologies, knowing that animation performance depends on the implementation will help beginners with finding a solution when they run into performance issues. Simply, by googling "CSS Versus JavaScript Animations" one can find useful resources that explain this topic in depth.

The same is true with understanding reflow and repaint in the browser and how it's affecting web performance. When solving a performance problem, beginners will find the solution because they know that it can be one of the reasons causing the issue.

Knowing the limitations of CSS, beginners will quickly get the idea of CSS preprocessors and appreciate the benefits they bring. This will naturally lead to learning the build tools and task runners.

CSS frameworks are great but only when you understand when and why using them.

It is so much easier to absorb knowledge when you see how it applies in practice by solving a real problem.

When it comes to JavaScript, not knowing about security issues is the same as driving a car without learning the driving code. Many beginners think security is only Backend related...

Algorithms are a must because they are closely related to the performance and reliability of the system. And they are easy to understand when used in practice.

Design patterns are a battle-tested solution to common problems and beginners need to know what they are for to avoid reinventing the wheel.

Beginners need to have a rough idea about all of that I mentioned above. When they need to deal with security, they will know about the OWASP top 10 and will explore it. Then put new knowledge into practice.

When it comes to solving performance issues in javascript, they will doubt data structures they use and reach for resources on that topic.

And instead of reinventing the wheel, they will first check if there are existing patterns that solve what they need.

The bottom line is that it's not about how much you learn. It's about knowing what's out there that you may need to explore to solve the problem.

The scope of web development is the critical knowledge the most beginners do not have, unfortunately.

It is exactly what I am solving with my free beginner-friendly tutorial on creating Trello clone.

I explain every step by providing details on what is needed to build large-scale apps. I let beginners run into issues and help them with finding a solution.

I teach beginners web development concepts, best practices and patterns that they will apply in any project.

I help to avoid or get out of tutorial hell as well as avoid the imposter syndrome.

Comment if you'd like to take my tutorial. It's free.