How to Learn Web Development For Free — Tips and Resources
The best free tutorials and effective learning tips for creators looking to learn web development.
I’m a freelance writer by trade but it’s always been a great dream of mine to become a web developer. Four months back, I decided to trim down the number of new projects I took on, and finally started learning development.
If you’ve ever looked into web development courses you know they can be costly and I don’t think it’s a good idea to spend money when you’re only starting out. You need time to assess your ability, how motivated you are, and see if web development is really your cup of tea.
Web developing, like with any job, will certainly feel like a burden if you aren’t really obsessed with the craft so it’s important not to make a hasty decision to become a web developer just because one day you heard it’s a good-paying job and the demand is on the rise.
Thankfully, for me, within 3 months of learning web development for free online, I found I loved it and I became proficient in HTML and CSS. I still have a long way to go from here but I’ve found some of the most promising free resources and effective learning cues to help me along the way.
Research can be tedious when you’re first starting out. Digging for the right tutorial can end up killing your motivation. As beginners, we don’t want the motivation to die because that’s what keeps us going; both as a developer and as a human.
So, to save you the hassle, I’ve listed below the resources that’ll get you started off as a web developer and a couple of tips that proved effective in my experiments.
For easy reading, I’ve listed out everything in a ‘Short List’, followed by an expanded ‘Long List’. You can identify what you need in the short list and then jump to the more detailed version in the long list.
*Nothing listed in this article is commissioned or affiliated*
Short List
Best Free Tutorials
- Full HTML5 and CSS3 course from scratch by freeCodeCamp
- HTML tutorial by Mosh
- CSS crash course by Traversy Media
- HTML and CSS tutorial — complete crash course by DesignCourse
- HTML and CSS for beginner by Edwin Diaz
Tips For Beginner Web Developers
- Master one topic, then move on to the next
- Design practice websites every often
- Use an engaging code editor but make sure to turn off “suggestions as you type.”
- Practice a lot, research a lot, and dig as deep as you can. Treat it like an onion; the more you go, the more layers you’ll uncover
- Don’t rush. Cover a topic or two each day, and take it into practice until you master the craft
Long List
Best Free Tutorials
There are 4 resources included here, out of which 3 are from YouTube and 1 is on Udemy. Each tutorial depicts the craft differently so try them all out and see which one you feel best suits your learning style.
Full HTML5 and CSS3 course from scratch by freeCodeCamp
Any tutorial that comes after this one is equally good but this course from freeCodeCamp is superior. It covers everything, from base to top, about HTML and CSS and that makes it around 12 hours long. If you’re really looking to drive out the ultimate value, then go ahead with this one. This was the third course I attended and personally, I think it’s the best free resource out there.
Who is it for? Absolute beginners and intermediate web developers.
Course Time: 12 hours
HTML tutorial by Mosh
HTML is the bone of a website and this crash course by Mosh is a great resource to get started. Unlike the other tutorials I’ve listed here, Mosh actually follows a decent structure and quality for his tutorials, making it pretty easy for the newbies to quickly grasp the value it holds. The tutorial is recent and it’s a great way to get started with HTML.
Who is it for? Absolute beginners to HTML
Course Time: 1:10 hours
CSS crash course by Traversy Media
The crash course by Traversy Media is all about CSS. They structured this course geared more towards the absolute beginners in web development, making it easily consumable by only covering the most basic topics. This tutorial is ideal to start for the extreme basics of CSS so don’t just depend on this single court if you wish to go a level up in the game.
Who is it for? Absolute beginners to CSS
Course Time: 1:30 hours
Extra Note: Towards the end of the video, you’ll get a CSS cheat sheet. You can keep this for future reference when you’re working on a new project. Essentially, these guys are also helping you cut down the time on future researches.
HTML and CSS tutorial — complete crash course by DesignCourse
This tutorial by DesignCourse is another one of the most recent and high-quality courses. They start by making a brand new project for the tutorial and you’ll essentially learn the basics of web development by actually making a new website. This is a great way to remember what you’re taught.
Who is it for? Absolute beginners
Course Time: 2:20 hours
Extra Note: Before you take this tutorial, be ready to part away to do some extra research on your own during certain sessions of the video. This is because you’re put into the battlefield of designing an actual website straight away so it involves a bit of beefy coding. But still, this can be a great start depending on how you manage being thrown in at the deep end.
HTML and CSS for beginner by Edwin Diaz
This is a free course on Udemy that takes you through the basics of HTML and CSS. Unlike the previous tutorials, this course kind of falls below the rest since the quality of explaining is subpar in my opinion. However, the course is still understandable and is worth a try. You can get a certification on Udemy after completing the course so that’s the biggest bonus here.
Who is it for? Absolute beginners
Course Time: 6 hours
Extra Note: Completing the course will reward you a certification that can really kickstart your web development career. So even though the quality of the tutorial isn’t wholesome, it’s balanced out with the Udemy certification it offers.
Tips For Beginner Web Developers
Master one topic, then move on to the next
When you choose to become a web developer you’re falling into an ocean that never drains out. There are a lot of things to learn here and if you plan to take it all in at once, you’ll drown. Whenever you study a topic, make sure you practice with it. You might’ve injected it well into your head but you must work to carve it on your bones as well. You do that with practice.
Trial and error teaches us so much and that’s how I keep progressing. I usually watch the tutorial an hour or two every day, and then I’ll spend another hour taking what I learned into practice. This made learning easier for me and it helps us feel no pressure. So once you’re through with a topic, just practice it until you master it. Recreate what you just learned.
Design practice websites every often
After mastering the topics one by one, you can then try to stick it all together and see how well you can design. I’d suggest doing this every weekend by designing a new website. This is a great way to keep up with your progression and will help you squeeze out the maximum value of a course.
At first, you can just put together the basic topics and create something out of your imagination. But eventually, as you learn more of CSS, you can design practice websites by taking the beginner test projects on the internet. This website has some projects you can practice with and it’s been extremely helpful for me.
Use an engaging code editor with “suggestions as you type” turned off
When you’re only starting out, you must do everything to make sure you don’t lose that initial motivation. The environment you code in makes a great impact on this matter so make sure you’re using an editor that looks engaging. Personally, I prefer using VS Code and its engaging interface really makes coding fun for me. It just sort of gets me immersed in coding.
An important point to note is not to use the suggestions provided by your code editor. As shown in the screenshot above, code editors will automatically suggest commands as you type. As a beginner, you must turn this feature off. Coding with the suggestions turned on will affect your learning process and you’ll eventually forget the commands as you learn more and more stuff. Just do it the traditional way, and put in some hard work in the beginning. Only use suggestions when you become a developing ninja, or an intermediate developer at the very least, to make coding faster and save time.
Practice a lot, research a lot, and dig as deep as you can. Uncover the layers within layers
Learning from a tutorial is always a great start. But these courses are only meant to teach you the basics so you must divert away from the subject and do your own research sometimes. Web development can be like an onion at times; you’ll learn a command but then you’ll realize there are a lot more that are tied together with it. This is when you must do your own research to uncover the layers.
Don’t rush. Cover the least amount of topics every day
Like I already mentioned, never try to take it all in at once. There is a lot to learn so learn slowly and steadily. I learned only up to 2 topics every day. This took about 1–2 hours. Then I’ll spend another hour practicing with it. This made learning a lot easier for me and I never felt tired of learning development. When you try to take on too much at once, you’ll easily become tired even if you’re obsessed with the craft.
I appreciate you taking the time to read this long article. I cannot be happier to have successfully shared the bits from my journey and I hope you’ll find them helpful.
If you have any questions or queries regarding this post, the tips, or the resources, just let me know in the responses and I’ll make sure to address them. Have a great day, people :)
