Based on my almost 2 year long self-learning journey i will list a few resources i use or had good experiences using them. Some tips mixed in are comig too.
1. Tools
Visual Studio Code
I assume every self learner starts with mentioned code editor, but it gets mentioned just to make sure.
Open source(free), Should work smoothly with hobby projects, lots of themes. had no problems with this software whatsoever.
Git and Github
If you thought about leaving it for later or just creating your account and calling it efficiency in CV – DO NOT.
These tools are as essential in web dev as JavaScript is. I know it is hard to practice team environment concepts without one, but try to get a basic understanding about these functionalities in Git. It won’t stick immidiately, but it is very important, so give it enough time.
Vercel
My go to for free hosting of hobby projects or interview tasks. Very straightforward to use. Sites load pretty fast compared to for example Glitch, where unactive projects go to sleep and can take up to even 20-30 seconds to open.
Dimmer
You probably stay in front of screen for way too long, often in the evenings which is far form ideal for human eyes health and sleep quality. If your room is bright from daylight it is not a problem, but when screen lightness starts to irritate you just a little, then it is time to adjust brightness to surroundings(considering you don’t use strong ceiling lamp in the evening which is a bad idea)
This software is very simple. You just move the slider. Works on multiple screens. no bullshit ads.
f.lux
On the same topic as above. This software is changing temperature of your light to warmer as it gets late and probably is probably even less of a bother as it has pretty complex defaults already set up.
2. Resources
MDN Web Docs
Your Web Dev encyclopedia. Probably a better choice than W3Schools.
Google - StackOverflow
If you can’t find answer to your question here it is a big problem. If the answer is not in a github issue or some random reddit post also then you’re doomed.
In all seriousness just try to rephrase your question and think if it is composed correctly. It is very unlikely that answer does not exist unless it is a very niche topic. Remember to not take most liked answers as absolut thruths!
Caniuse.com
If you found some more unusual way to do something in HTML, CSS or JavaScript it is a good idea to check if these are compatible enough to use already.
3. YouTube
NetNinja
https://www.youtube.com/@NetNinja
I think my favourite for crash courses. Very good for getting basic idea about certain stack or tech(MERN for example).
WebDevSimplified
Was my first go to for understanding basics of HTML, CSS and Javascript when i was starting. Decent, fast explanations with no unnecessary talks.
FireShip
Absolute must for any developer. Covers all kind of IT topics. Tutorials may be a bit hard to follow for beginners, but his informational content and humour is unparalleled. A lot of videos that should be binge-watched.
4. Final Thoughts
After first few days theory should never take majority of your time. Practice is the key.
Make sure you understand topics that are essential even if it takes time. I had to watch and rewatch many videos to understand how asynchronous JavaScript actually works and will have to do it again to freshen my memory up.
If you think you understand the overall concept of something, but you’re not so sure about it anymore, try checking if every part mentioned in definition is clear. Go back to fundamentals if needed.