Escape Tutorial Hell — Web Dev Edition.
Okay, let’s jump right into it. So you’ve learned the basics of HTML, CSS, and JavaScript. To do this, you watched a lot of tutorials and now you want to test your knowledge out. Great! But how? People say that the best way to test your skills as a developer is to make an app, however, it can be difficult to know where to start with this and what to do if you get stuck. Often these questions remain unanswered, relegating people to what feels like a neverending tutorial hell. Well, in order to help you poor lost souls, I have listed down some steps that will guide you through breaking out of here and implementing your knowledge through the construction of an app.
1. Clone a small app
You don’t need to build a Facebook or a Whatsapp clone right off the bat. No one expects that from you. You are just starting! Instead, you should find an app that you feel is practical to clone. For example, you could pick a ‘to-do’ list app as there are hundreds of ‘to-do’ lists clones on the web. You can take some references from these apps or you could get creative and add some of your own ideas into it. A quick search for ‘Small Projects in JS’ will give you a nice list of beginner-friendly projects to choose from.
2. Document it
Okay, so now you know what you are going to develop but how are you going to execute your idea? You need to follow a plan; an important step that is often skipped by beginners. Your next question should be how to plan and document your build. First, list down the tech stack that you will use to make this app. Next, list down the different components and functionalities that your app will have. For example, if you are developing a to-do list web application, then you will have at least two components; one showing all the ‘to-do’ items and the other showing all the completed items. The functionalities would include adding an item to the ‘to-do’ list, making that item as completed on a button click, and (if you feel adventurous) then toggling back the completed item to the ‘to-do’ list. This is called a design document and will help you to understand a high-level overview of the app that will assist you to code better.
3. Start writing code
Now that you have your design document ready, you can start to code as you have some basic understandings of your components and their interactions. The way I go about this is to start with a basic HTML layout first before adding some CSS to it. Once I feel that the look of the application is stable, I then go ahead and add functionalities to it. Please note that these are the steps that I follow but that doesn’t mean that you need to copy me exactly; rather you are free to follow any pattern or procedure that you feel most comfortable with.
4. Stuck! Need help
So you are stuck at getting your `div` tag center aligned. Or perhaps your click event is firing up twice, and you are not able to figure out why. Here are the steps you can follow that can solve these issues:
* Debug -
I cannot stress the importance of this enough. More often than not, your code is not working as expected because of a simple logical error that you made somewhere. All you need to is to trace your code with a calm mind and try to correct your logic.
Other than improving your debugging skills, finding errors in your logic by yourself will also help you to become a better developer. Chrome Dev Tools are super helpful to debug your code. If you are new to Chrome Dev Tools then you can check out their official docs here (after you are done reading this article that is).
* Search -
Okay, so you have debugged your code and scratched your head, but you are still not able to find any issues. The next step would be to make use of your all-powerful search engine. Justsimply google your issue and — if you are lucky — then chances are someone has already faced the same error/issue and had it resolved by a kind stranger! Those solutions might work for you too. If you fall in that 1% category of unlucky people who are unable to find any answers on the internet, then consider explaining the issue you are facing on StackOverflow and hope that someone will get back to you.
* Ask-
So you have followed the above points and still this monster of a bug does not leave you. Well, have you considered asking for help? Sometimes having two brains (and two pairs of eyes!) helps. Stop hesitating, set your ego aside, and ping your friend! After all, we are learning as we go and no learning is complete without some help.
Conclusion
Hopefully, the above points help you break out of tutorial hell and get started on your first app. It goes without saying that you should not stop after you’ve built your first app, rather you should level up your challenge every time and continue the same process! Happy coding.
I write about JavaScript and also mentor students and beginners in web development. If you are preparing for software engineering interviews, then consider signing up for my FREE newsletter at The Daily Coding. Follow me on LinkedIn and on Instagram to get regular updates.
