Starting off your journey into the fascinating worlds of either web development or programming? The right toolset in your environment can lay the foundation for success and make the process infinitely smoother. Without having a proper base, even the most motivated beginning soon will be overwhelmed with the quantity of work.
Let's walk you through things that are really necessary in any development environment, which every developing programmer should know.
Why Setting Up Your Environment Matters
Before writing code, having a working organized workspace can make the entire difference. Think about trying to build a house with no tools or attempting to write a book without a keyboard. It's no different in software development. If you have the right environment, you'll code faster, solve problems easier, and waste less time fighting with tasks you shouldn't need to be fighting with.
So let's get your development space optimized and ready for success. Here is a rundown of the tools you will want in your toolkit.
- Code Editor: Visual Studio Code (VS Code) A powerful code editor forms the basis of any development environment. VS Code, developed by Microsoft, has become the first choice of both beginners and expert developers due to its customizability and extensive library of extensions.
**Extensions: **Enhance your coding with available add-ons that will make your work easier. For example, Prettier will auto-format your code, while Live Server will allow you to see changes in real time.
Integrated Terminal: No need to jump between windows, now you can directly run commands and code from within the editor itself.
**Multiple Language Support: **Be it HTML, JavaScript, Python, or even PHP, VS Code has got you covered.
Pro Tip: Make your editor your own. The way to make this happen is with theming and extensions.
- Suppose you make a big change in your code but then would like to go back to how things were. You'd get stuck. Git and GitHub are used for saving, tracking, and managing changes to code.
**Basic Git: **Git lets you save the checkpoints called commits as you code so that at any given point in time, you can just revert back to it.
GitHub Collaboration: Share your projects, showcase your work, and collaborate with other people in one place.
Also, provide branching and
merging features: Work on new features without touching your live code. When ready, merge changes seamlessly.
Pro Tip: Commit often and write clear messages! Later on, it'll help you track what each change was for.
- Browser Developer Tools Modern browsers, especially Chrome and Firefox, have built-in tools called Developer Tools. These allow you to view in real time what is happening with your code.
**Inspect Elements: **View and edit HTML/CSS directly in the browser.
**Console Log: **Test JavaScript code or troubleshoot bugs.
Network Tab: View resources loaded on your site and if anything is bottlenecking it.
Pro Tip: Familiarize yourself with the console, and in particular use it to debug JavaScript. This will save time when fixing bugs and will give a better understanding of how your code interfaces with the browser.
- Command Line / Terminal The Command Line can be daunting at first, yet it's a developer's best friend. The command line allows running code, package installation, and other tasks fast, often much faster than using the GUI.
**Basics: **Learn how you can create commands to make handling your files easy, for example, cd for changing the directory and mkdir for making a directory.
**Installation of Dependencies: **Many tools, such as npm, depend on the command line for installation of packages and their handling.
Version Control: Also, you can run many Git commands here.
Pro Tip: If it feels confusing at first, well, that is okay. Using the command line to perform your basic tasks each day will make it second nature.
- Package Manager: Node Package Manager - npm In that case, if you work with JavaScript, npm is likely to be something you would need. It is a command-line tool allowing you to install and manage the packages that are basically just libraries for your projects.
npm works out-of-the-box to make it simple to try out new tools or functionalities-from frameworks like React to utilities like Lodash.
Install Libraries: npm install allows adding of thousands of free packages in your project.
Project Dependencies: npm keeps a record of all the packages your project needs to function to make it easier to share your code.
Pro Tip: It's always a good idea to check out the package.json file after installing a package. You can see what versions you're working with and the process helps you stay organized in regards to your projects.
If you're starting off with Git, you might want to try out some sort of GUI for Git, like GitHub Desktop or Sourcetree. These line up all the more complex Git commands into a UI of committing, branching, and merging. It's a good stepping stone for beginners to understand how Git works without needing to memorize commands.
Pro Tip: You could try doing both the command line and GUI for Git. The use of both can help you understand Git concepts much faster.
- Browser Extensions: Live Server When you are creating an HTML/CSS/JavaScript document, it could be annoying to reload every single change. With this extension, Live Server is set up inside VS Code, thereby allowing you to view changes directly in the browser without reloads.
Pro Tip: Very useful for newbie HTML/CSS coders - you'll see instantly what changes to code did what to your page.
Final Thoughts: Practice with Purpose
Just the beginning with setting up your development environment, the more you code and experiment, the more you will learn about which tools are right for you. Invest some time early to learn these tools, and it will save you a large amount of frustration later.
What are some of your favorite beginner tools and tips? Let's drop them in the comments! Let's all make it a bit easier to learn how to code together.
Top comments (2)
Well articulated, Amaka. Couldn't have said it better.
The text can do with a little better formatting though, especially with the key-point numbering
Thanks a lot for the suggestion. I will implement that right away. Thanks for reading!