Web development · 27 Sep 2021 · 3 min read
10 tools for web development
Building a website or web app involves a lot more than picking a framework and writing code — you also need a supportive editor, a way to manage packages, and often a design or prototyping tool to get from concept to build. Here are ten tools worth knowing.
Why use dedicated web development tools
The web development lifecycle runs through several stages: choosing a framework and language, writing and testing code, and hosting the result somewhere reliable. Dedicated tools exist to simplify each of those stages without compromising the finished site’s performance.
10 tools to know
1. Novi Builder
A drag-and-drop site builder with free customisable UI plugins and templates, plus access to the underlying source code for further changes. It runs as a browser extension in Chrome and Opera. It has a steeper learning curve than most builders, so it suits developers who already understand web design rather than complete beginners.
2. Creative Tim
A front-end toolkit offering dashboards and UI components built on Angular, Vue and React, aimed at both web and mobile development. It bundles UI elements, dashboards and pre-coded sections into one library, which makes it a reasonable one-stop option for experienced front-end developers.
3. Visual Studio Code
Microsoft’s free, open-source code editor for macOS, Windows and Linux. It covers code completion, refactoring, embedded Git, syntax highlighting and testing support out of the box, and its extension ecosystem covers most of what it doesn’t. It’s a solid choice for both front-end and back-end work in Python or JavaScript.
4. Bootstrap
An open-source CSS, HTML and JavaScript library built for responsive design. Its ready-to-use components let developers put together a functional, mobile-friendly layout quickly, while still leaving room for full customisation in more capable hands.
5. Sass
A CSS preprocessor that compiles into standard CSS while adding variables, nesting and inheritance the plain language doesn’t support. It’s a strong choice for front-end styling work, and it makes sharing design decisions across a project noticeably easier.
6. Envato
A marketplace supporting CSS, HTML and JavaScript, with templates for Laravel, Vue, Angular and Bootstrap and a library of over a thousand ready-made HTML5 components. It also ships with optimised JavaScript and CSS that can shave real time off both development and page-load speed.
7. Sublime Text
A fast, cross-platform, open-source editor for code, prose and markup, with support for most programming and markup languages. Its speed, simultaneous editing and keyboard-driven workflow make it a longstanding favourite among developers who prefer a lighter tool than a full IDE.
8. NPM
The Node Package Manager is the standard way JavaScript developers find, share and reuse packages. As a command-line tool it manages both private and public code across a team, which makes it useful on projects of any size.
9. Theme marketplaces
Beyond individual tools, theme and template marketplaces offer ready-made designs, plugins, add-ons, stock photography, and video and audio assets that can shortcut the early stages of a commercial project.
10. InVision Cloud
A digital design platform for prototyping user experiences, with tools spanning a photography board, an element library, desktop web prototyping and navigation flow mapping.
Conclusion
None of these tools substitute for a developer who knows how to use them, but the right one for the job — an editor, a preprocessor, a component library — makes the actual build noticeably faster.