I would start off with the basics first. Anyone doing web development now should be familiar with HTML5 and the corresponding tags. Once you are familiar with HTML, I would then learn CSS. You will find that you feel like you are fighting CSS a lot of the time, I would find a starting CSS framework such as Bootstrap or foundation. Once you have learned those, I would start tackling JavaScript. Once you are familiar with these languages, you will find everything else you learn is building on what you have already learned.
Wow, great question. And such a coincidence that I just posted an article about my single best piece of advice. I would say very simply, that you're not an impostor in the world of software development. You're a problem solver, and that combined with the fact that you enjoy doing it is what defines your value as a software engineer. The rest is just gaining knowledge, and passing through the fear of stretching that knowledge in search of solutions to problems. Read more here.
Learn the standards and principles first and the abstractions second, when you understand the limitations and pain points that make abstractions worth the overhead.
Templating, pre-/post-processors, transpilers, frameworks and libraries are all there to make it easier to produce HTML, CSS and JavaScript.
Don't under-rate HTML either. You need good HTML to make an accessible UI. You need good HTML to write good CSS, JavaScript, tests...... bad HTML is a bad foundation, things built on a bad foundation are shaky.
Start with the basics of HTML, CSS, and JavaScript. Do NOT get into frameworks, libraries, or extensions before getting a firm grasp of the core technologies of the web. Don't dive into jQuery, or ReactJS, and especially not Angular (if ever). Sit yourself down at MDN https://developer.mozilla.org/en-US/ and go through everything there. Grab a text editor and just load pages into a browser. Don't fall into the trap of just making it work for one browser. Make sure you have at least Chrome and Firefox, and Edge if you are Windows and Safari if you are on Mac.
Seriously, stay away from shortcuts until you have the basics down. Know HTML through 5, CSS through 3, and Ecmascript through 6. If you do this, you will be so far ahead of your peers, you will amazing them with your superpowers.
I've been interviewing people who are so called senior web developers who know Framework X but can't tell me about JavaScript inheritance, or CSS specificity, or what the difference is between block, inline, and inline-block. Frameworks and libraries will come and go, but the basics will be your trusted and loyal friends for years to come.
Don't be afraid to break something (in Dev of course). I've learned so many things from breaking something in my dev environment. Experiment, break it, fix it, learn.
Try new things.
The web development world changes so fast. Every day there are new tools being released, updated, and deprecated. Be curious.
Start playing with HTML. Build a website for yourself. Nothing fancy, just put your name on it and a few points about you. Then style it. Make it responsive. Learn about CSS pre-processors like Sass. Once you've found that you can do basic styling, make it interactive. Learn Javascript. Make your name on your website pop when you click it. Okay, you're comfortable with Javascript now, maybe explore a front end framework like jQuery and see how it makes traversing the DOM a breeze. Take it a step further and take on a view library like React or Vue and see how that makes manipulating data easier for your applications. Start interacting with API's. Pull in your tweets onto your new website via ajax and style them.
Then once you're comfortable with the front end, try all of the back end languages until you find something you like. Maybe start with python, then try ruby, go, php, etc. Find one you actually like to work with and then stick with it. Build things with it. Write a blogging platform, clone twitter, build a tool that solves a problem that you've been having.
Once you're comfortable with your toolset, start contributing to open source. Find a project on GitHub with some open issues and see if you can help close them. Find an open source tool you use daily and see if you can contribute to make it better. Don't know enough to contribute but want to still help out? Hang out on their issue boards and try and help people with things like troubleshooting.
Just don't stop creating -- that's when you stop learning and progressing.
Andrew Wooldridge
eBay WebDev
Sandeep Panda
co-founder, Hashnode
What everybody said + a few suggestions from me :
The web development landscape changes quickly. So, don't feel bad or demotivated if you don't know the new shiny tool/technology everyone is crazy about. In most cases it's a good idea to switch tools/technologies only when the need arises.
Bonus : Refer to this answer by @mweststrate .
Don't get into the battle of framework A vs framework B. Do your own research, ask plenty of questions and then decide what you should use.
Always remember that you are learning Web Development to utilize your skills and knowledge to solve someone else's problem. So, be a problem solver.