From code editors to code plugins, browser extensions, online graphics editors and web hosting platforms, the list of possibilities is never-ending and picking the right solution might not be that obvious.
Which tools should you be using to streamline the coding workflow? Where to find royalty free images? Which platforms to use to manage the day to day tasks?
No panic, we’ve got your back. We’ve put together a list of 17 web developer tools every Junior Developer should know inside out. Our selection is based on our extensive experience as well as recommendations of our colleagues here at Kodilla and most importantly our mentors.
Let’s dive straight in and start ruling the online world!
1 Code Editors
You have to write your code somewhere, which code editor should you choose? There are free as well as paid versions and each differs in style, layout and even functions. What you should be primarily looking for is a user-friendly and considerably fast interface. You won’t be necessarily pushed to use one specific version at your workplace so it’ll be mostly up to you to choose the code editor that you’re most comfortable with.
Visual Studio Code has been quite trendy recently, getting lots of rave reviews from web developers. One of our dear mentors, Piotr Dobrowolski, swears by it. From the start, straight after download, it’s really well configured and specifically tailored to web developers so that you can start coding straight away. However, there are a couple of additional code extensions you should consider installing (which I’ll cover later). When you open the Visual Studio code and click on the extensions tab on the left-hand side, you’ll be able to see which code plugins are the most popular among developers so that you can easily get inspired. Visual Studio Code is pretty impressive as it’s entirely free and is equipped with a user-friendly interface.
Atom is our second choice, recommended by a multitude of developers. What’s cool about this code editor is that it’s 100% free and the entire open source code is available on GitHub. If you know the programming language Atom is written in, you can introduce suggestions, with your own code.
Sublime Text has been considerably popular in the industry for quite some time now. It’s free if you’re just testing it out, however afterwards, you’re required to pay for it.
IntelliJ IDEA from JetBrains is expensive and probably not ideal for beginners, however, it comes with a 30-day free trial so you could always test it out and see if it’s right for you.
We recommend you try out different code editors. Create a web page using one editor and then another using a different editor to compare their functionalities and figure out which one you like the most!
2. Code Editor Plugins
In order to streamline the coding workflow, you’ll need to download additional code plugins. We’ll cover the most essential ones in this section. Some editors have them pre-installed, in others, you’ll need to download them manually.
Emmet - this particular plugin considerably speeds up coding by auto-completing the beginning and end tags when typing a simple term.
ESLint - will keep the code syntax on the right track. When we start writing the code in the code editor, it doesn’t necessarily mean that it’ll automatically highlight all the errors. ESLint will ensure to keep the errors to a minimum, it’s especially useful for beginner programmers.
Bookmarks - bookmarks plugin will add a specific bookmark in any line/section of the code so that you don’t forget that you have something that needs to be completed at a later stage. What web developers did in the past, is inserting a comment ‘’to do’’ and then performing a manual search for the term ‘’to do’’, which was proper old school! With a bookmarks plugin, it’s no longer necessary ;).
Path Intellisense - lets you link up certain elements like href, img src or rel without thinking too much about the path itself for that particular element. Path Intellisense will autocomplete filenames for you. These are just of the few of the most popular code extensions out there, there are plenty more! You should definitely go out on a mission of testing them out to see which are the most useful for your coding style.
3. Online Editors
CodePen is by far the most popular and interesting online tool that helps you to create a quick code, snippet or even a large project. Just start writing the code from the body, you don’t need to display the whole structure. It’s also not necessary to link CSS to HTML, just start writing and editing at the same time. In addition, CodePen is a great knowledge hub where you can easily get inspired and check other people’s codes.
JSFiddle is a slightly more advanced online code editor. From the beginning, you are able to use so-called boilerplates, which are ready-made projects that are pre-configured in React and JSX, jQuery, Vue, Preact, TypeScript, CoffeeScript, SCSS, CSS Grid, PostCSS or Bootstrap.
Online code editors help us to test things out in real time and we can share the project with others using a simple link. At Kodilla, we use CodePen regularly, it’s super fast as it has an automatic refresh of the preview. We write the script and can see immediately if the script works correctly.
4. Browser Extensions
Most people use Chrome as it’s the most popular browser and you would probably think it’s ideal for web developers, however, there is something even better and it’s called Chrome Canary. It’s in beta currently and it’s been specifically created for developers as it has features that are blocked in the standard version of Chrome. Let’s check out the extensions.
Tampermonkey - a special chrome extension that lets us use our own JS script on someone else’s website. Why would we do that? To be honest, there are websites that might have pretty annoying features, like a chat pop up window or push notifications that jump at you every 5 seconds. If you wish to use the site but don’t want to be annoyed by a constantly popping up chat window, you can use this browser extension to write your own script for that particular website and hide whatever is annoying you on it. Pretty cool, right?
Stylus - similar principle but in this case it refers purely to the style and CSS. If you wish to turn facebook green, you can use that specific browser extension to make it happen.
Wappalyzer - Sometimes we’re landing on a page and we’re wondering, that’s a really cool feature, I wonder how they’ve done it! It might be a simple chat window that pops up, a specific icon etc. If we’re more advanced - and slightly less lazy ;) - we could easily inspect the element and see the code. However, with Wappalyzer we can effortlessly check all the technologies that have been used on a particular page and decide to ‘’borrow some ideas’’ and use them on our own website.
Page Ruler - is a really useful browser extension as it lets you virtually measure the elements on a web page using the scale that you’re going to set yourself. With Page Ruler we are able to see the specific widths and heights, it’s perfect for beginners and more advanced users alike.
GitHub is by far the most popular and largest community on the web - offering free private and public repositories. It ensures that developers don’t overwrite the code as they can see exactly who wrote what and it doesn’t allow incorrect code to go through the production stage.
BitBucket also allows private free repositories. If you work in a team, with BitBucket it’s easy to comment different selections of the code. As a developer, if you want to create a new branch of the application, you write the code and see if it works, you push it to the server and then your colleague checks the code and makes any relevant comments. BitBucket allows up to 5 developers to collaborate on the same projects.
At Kodilla you have the whole module dedicated to the effective collaboration between developers, it’s a must-have skill if you want to thrive in the developer world.
Mockups are important especially for marketing that prepares a prototype and defines the specification for particular design elements. To show the prototype of the app, visualise the design and concept you can use Moqups, a popular tool for prototyping. The mockup will then travel to the designer who will use the prototype as the base for designing the rest.
7. API testing
What exactly is API testing? It’s basically a type of software testing that checks if a particular application meets certain fixed requirements in terms of functionality, security, performance etc. The tool that is quite handy for API testing is Postman as it’s specifically designed for API developers with tools that support APIs management in every stage of development.
Heroku hosts back-end and front-end applications like Node.js, Ruby, PHP, Python, Go, Scala and Clojure and it streamlines the process of deploying, configuring, scaling, tuning, and managing apps.
If you are after a free solution, you should definitely check out 000webhost, it’s totally free and you can easily redirect your already purchased domain. It can also offer some additional interesting features if you go for a paid version.
Dropbox lets you to store, share files and collaborate on projects, and it’s all done through a browser or a dedicated application.
Netlify is yet a different platform that is integrated with GitHub, that allows you to build, deploy and host front-end.
If you’re a coding newbie and you’re wondering how to build your first web page from A to Z, check out our article :).
9. Once You’re Stuck, Then What?
For newbies and advanced web developers alike, StackOverflow is an impressive knowledge hub. If your colleagues don’t know the answer, it’s a safe bet you’ll find it on the StackOverflow thematic forum. You will soon realise that it’s an indispensable resource.Click here for part II ''Visual & Collaborative'' →
You can easily download our free 'Developer Tools' e-book below :)