“Everybody knows that. The missing step is always the next.”
― Óscar Lopes
What is web dev tutorial limbo?
Web development can be a fun and exciting journey….or it can be full of frustrations and confusion. One of the biggest hurdles for beginning web developers is tutorial limbo. This paralyzing hurdle is the gap between learning content through tutorials and actually creating your own content from scratch. When tackling this hurdle most upcoming web developers skip very vital steps towards their goal of creating unique content. In this article we will be covering the missing step towards you creating your own unique web development projects!
Step 1) Learning The Syntax
Before even beginning projects you have to know what makes up the code you are going to write. You does not have to know everything about the programming languages you decide to use, but having a decent grip on the fundamentals is key to grasp the concepts of tutorials. After all, tutorials are not helpful if you do not know what the syntax specifically does (line by line). Most tutorials are just demonstrations of code typed. This demonstration display may present code to you, but it doesn’t always provide the meaning behind the syntax. Learning what code means allows you to know what to change and where to change it. This will come in handy later on.
Step 2) Completing From Different Instructors
Exposure to different coding styles, themes, and templates is important towards your experience. The more you can see diverse code the better you are at deciphering pre-written code later on. Even just dividing a page into sections can be done numerous ways. Being exposed to different methods can come in handy when working on different projects. While learning different coding styles you can also be exposed to different coding themes. Different designers like different styles. Some may like block organized templates, others may like transitions between sections for dynamic transitions, and etc. These different themes can have a huge effect on your own coding style. It is no secret this website took inspiration from RGB lighting. This style plays a big part in a lot of my content. By finding your unique theme you can have an idea of how you want to design your unique projects.
Step 3) Modifying Tutorial Content
After being exposed to a diverse list of tutorials and finding your unique style it is time to modify content. As you continue to go through tutorials WITH THE KNOWLEDGE TO CHANGE THE CODE (very important for this step) you should be modifying the code to add your unique style. Modifying this content allows you to practice your coding skills on real world project examples while still having a helping hand. The more you partake in this step the more confidence you build in coding content without guidance. Once you practice enough you can slowly alter more and more of the projects until you are replacing the majority of the coded content.
Step 4) Replicating Content Without Demo Code
So, you know code and you know how to modify code but you are not quite sure what to make? Replicating content without the demo code is an important step for any web developer. This practice develops the skills of recalling information (code) that correlates to the display shown. The more you practice the more you develop the ability to code displays from scratch. Now that you have developed exposure, the ability to utilize your style, and the ability to replace displays from code…it is time for the real fun.
Step 5) Wireframing Thoughts
With all the knowledge you have gathered it is time to bring your creativity to the forefront. Through the day you should find opportunities to think of websites or applications that brings use to you or someone else. For example, as an avid gamer I decided to make user-friendly single page web applications that give gamers help through the game (example HERE). This method of content creation not only helped myself, but has helped other gamers who have played or are playing through the same games. After finding your problem to solve or the content to display you should find a way to present the content. Using the exposure to various templates and adding your unique style that you’ve developed, you should draw out a visual sketch of the content. This will allow you to visualize your content and materialize it on paper.
Step 6) Coding The Project
After sketching your idea on paper it is time to let loose and code your project. By replicating step 4 (but with your own work) you will be doing what you have done numerous times before, which makes the coding process much easier. By taking the process one step at a time you provide yourself an easy path to creating your own unique content.
Conclusion
When on your way to becoming a web developer it is easy to skip many important steps along the way. By learning what code means you have the building blocks for the structures you wish to build in the future. With these building blocks you should follow various tutorials in order to get exposed to different building methods and built infrastructure. After being exposed to various builds it is time to modify these structures to your liking and to your own unique style. Having the knowledge you have now you can start to replicate content displays without knowing the demo code, giving you practice with materializing content with only displays. After your knowledge to code is sufficient, it is time to use your creativity and opportunities to sketch out ideas for content. With this sketch you can easily code your own unique project confidently like you’ve done it numerous times before.
Summary
- Learn the syntax
- Complete tutorials from different instructors
- The top two apps for learning web development is Mimo and Sololearn
- Modify the tutorial content
- Replicating displayed content without the demo code
- Wireframing/sketching ideas that solve problems/presents content
- Code your project