Why web development?
Web development is a field that is not going anywhere anytime soon. The web is moving quickly, and there are regular improvements to the devices many people use daily.
Cloud-based applications have allowed us to do the heavy lifting in the cloud and use the browser as a bridge to connect powerful backend servers with less capable and powerful frontends.
Now is the best time to learn web development if you're looking to learn something.
Not only does web development open a plethora of opportunities for you as an individual, but you'll also be able to code and deploy complete projects end-to-end which can be consumed by almost everyone on the planet.
Since most people have access to a browser, every person is just a single URL away from the web-app you've coded. If you compare this with a desktop application or a hardware-based product, you'll see that it's just not that scalable compared to the web.
Now that we've established the fact that the web is the best way to go right now, let's see how to learn web development in the best way possible.
The web is vast – start small and keep it small
Some very common questions I get as a YouTuber posting web development content are the following:
Should I learn X?
Is X better than Y?
What is the scope of Z?
Always remember two things about technology, especially about the web:
- Your tech stack almost always never matters. If you're good enough with your language/framework, you'll win every time.
- You never need to learn everything. Never. You can be a jack of all trades, but make sure you're a master of one.
To summarize this section, you need to think very small when you start. It is super easy to get carried away with that hot framework that was just released. Just don't try to race ahead by dropping old tech and adapting new tech without doing proper research.
Start with HTML and CSS
I cannot stress this enough. It pains me to see a ton of people asking me questions about their React projects when the answer lies in basic HTML or CSS.
Animations? You got it. Drag-and-drop? HTML can handle that. Layouts? Checkout the Flexbox or Grid CSS APIs!
Go wide or go deep?
There are two approaches when you learn web development – go wide or go deep.
Going wide means you start learning many things together. This might work for some people, but not for others. You might overwhelm yourself with tutorials, exercises, videos, and blogs, then eventually give up.
Going deep means you start learning one thing and try to learn as much as you can about it. This has its own set of pros and cons. You might get bored, or give up because you don't see results.
- You won't get bored, as all three have relatively different purposes and you write them differently.
- You can blend all three, and create and see something meaningful quickly without months of effort (which is usually required by other languages like C/C++). This will keep you motivated to keep going.
Do not choose React, or Angular, or Vue
Notice that I used the word applying, and not learning, in the previous sentence. There's a huge difference between learning something and applying something you've learned.
Every step step along the way, keep increasing the complexity of the project, and the expectations too, until your codebase becomes unmanageable. At that point you've arrived at what I like to call the boundary of superior learning.
You see, frameworks exist to offload repetitive work from you. They do not exist so that you ignore what's really going on under the hood and rely on the fact that it's all magic.
The first time you choose a framework like React or Angular for your projects should be when you're confident that you can create that project without React or Angular.
Master of one trade
It'll take time to learn and understand the terminology, the concepts, and how that framework works under the hood. So take up a framework and master it.
How, you might ask? The answer is simple – it's up to you. Create a simple project in all the major frameworks (Angular, Vue, and React), and see which one vibes the most with you. Choose one and don't look back
Then create all your projects with that framework. Aim to do something which you don't already know how to do. This is the best way to push yourself out of your comfort zone and learn new things.
But don't forget about the others
It's equally important to keep an eye on other candidates too. This not only involves direct competitors of your "favorite" framework out there, but also some worthy web development tools too.
You don't have to "master" these other tools because a lot of times they just require a one-time setup with regular maintenance. But it's always nice to keep them on your checklist of skills.
This could include several things - like unit testing with Jest, end-to-end testing with Cypress, Webpack, Babel, or Parcel, a bit of devops, Linux shell scripting, server deployments, and so on.
You can always learn the basics of these skills quickly as they've been around for a long time, so they have a lot of helpful material available with them.
Trust me, it's a funny feeling – but once you develop many projects and write a lot of code with your favorite stack, you start feeling like you can do anything. At this point, you can get a job and just keep doing the same thing - that's completely fine. Or, you can level up your skills through the roof and move on.
The web. Is. Vast.
Done with that too? Move on to WebAssembly, the language for the next iteration of the web.
Finished learning WebAssembly? Err, I don't know then. Maybe move on to other programming areas, or cooking? :)
In today's world, it's so easy for you to not repeat the mistakes I made while learning web development myself. Because all those mistakes are now public for everyone to read!
You have so many resources available to you, and I've been working on one for web developers to learn! Here's my YouTube channel where I teach you how to program awesome things. And here's the codedamn platform – the actual platform which allows you to become a great developer by blending a bunch of videos, articles, and exercises.