Web Development is a really interesting field. I remember being really excited to be able to make aesthetic-looking websites. So I decided to learn the basics of HTML, CSS and JavaScript to get started and referred to some great YouTube videos and articles that could help me with the resources to get started. The problem was that there are wayyy too many resources available online which confused me about where to even start learning.

Now that it has been two years of me having tried and tested most of the resources out there, I have compiled five resources that personally helped me a lot to learn Web Development better.

1. Codecademy

This was one of the recommendations from a YouTube video I watched and I still think it is one of the best sites to learn basics from. It has a great UI, a written explanation of the code and an in-built code editor to help you practice and learn right then and there.

Pros:

• Codecademy follows the practice and learn method so personally I feel that's a great way to get your basics right.
• They even have tutorial videos for many concepts now that you can check!
• The Pro version of Codecademy offers Guided projects, quizzes and even full learning paths.
• If you don't want to pay for it, there is an option to learn some languages (especially HTML, CSS and JavaScript) for free.
• There are discussion forums (for Pro users) where you can discuss your doubts with other learners.

Cons:

• While some of it is free, most of the content requires the Pro version to get access to, which is a paid feature. So without the Pro access, you practically do not have access to much of it.
• If you prefer learning via videos or live instructors because videos are not available for every concept, you might want to skip this option.

However, I would still recommend everyone to try it out once!

2. Programming with Mosh

Programming with Mosh is a YouTube channel by Mosh Hamedani and he has a whole playlist for Front-End as well as Back-End Web Development on his channel. His videos on Youtube are a great way to start with basics. Check out his '[Programming Language] in one hour' video series.

Pros:

• His videos are concise and very to the point. Most videos are about 1-2 hour long so you won't be wasting a lot of time just watching videos.

• Watching videos and learning by watching someone else do it is obviously a great way to learn!

• You can also find full-length Web Dev courses by Mosh on Udemy.

Cons:

• The videos are good for basics but for more in-depth content, you might want to look at his Udemy courses or other channels.

I would highly recommend watching his videos.

3. Programming with Harry/Code with Harry

Not just Web Development, Code with Harry is probably the best YouTube channel I know for almost any tutorial video. His videos are very in-depth and he explains the topics really well. You can find video tutorials for beginners to advanced learners all for free on his channel.

Pros:

• In-depth discussion of topics. Tutorials do not stop after the basics.

• Free content and there are handwritten notes at the end of each video.

• His videos on Code with Harry channel are available in Hindi, thus catering for a larger audience in India. However, if you feel comfortable watching videos in English, he posts tutorials in English on his second channel, Programming with Harry.

Cons:

• His videos are really long, so if you are looking for a quick short course, you might want to check out something else.

• The English channel does not have all the tutorials so there can be a language barrier.

4. freecodecamp

It is one of the best free resources to learn any programming language, even more so for Web Development. Similar to Codecademy, you practice whatever you learn on an in-built code editor, as well as refer to their YouTube channel. The best part is you even get a certification at the end of every course you complete, all for free.

Pros:

• Every single piece of content provided by freecodecamp is 100% free. Even the certifications that you get after every course.

• Tutorial videos are also available on their YouTube channel.

• Access to an active community and discussion forums where you can clarify your doubts.

Cons:

I can personally not think of any cons for this website as long as you would be ready to diligently self-learn.

5. CodePen

More than just watching videos and learning, practice is what will make you a great Web Developer/Web Designer. CodePen is a great site to practice various designs and practice your skills to get better at it. You can find several works or as they call it 'Pens' by other developers that will help you learn how to design better for a front-end of a website. You can also publish your own Pens/Projects on CodePen.

Pros:

• Great way to practice whatever you have learnt and test your code simultaneously.

• It can be a great addition to your portfolio as a Web Developer, based on the Pens and Projects you publish there.

• Amazing UI.

Cons:

• Very limited pens available to publish/use in the free version.

6. Coder Coder (Bonus Resource!)

BONUS RESOURCE! I could not end this blog without mentioning Coder Coder's YouTube channel. She has some really get tutorials and learning videos as well as some great tips to learn Web Development. I would highly recommend checking out her channel.

The most important thing to remember while learning Web Development is to put your knowledge into practice! Try to make your first project and deploy it as soon as you get done with the basics and google every new function you come across. Remember that you can never learn any language 100%, but rather get extremely better at it by constantly practising it. Good Luck to you!

Note: Above recommendations are compiled based on my personal experiences and views. Feel free to leave a comment for any other resource you might want to add!