Here I will talk about the tools that help you create a website, from the common ones like code editors to the small but useful ones. Some of them will turn out to be familiar, and some of them you can think of: “Wait, you could actually do it that way?” However, they are all useful in the work and save a lot of time.
A selection of code editors
Code creation begins with the editor in which the code is written. Here are several handy solutions:
VS Code — a popular editor by Microsoft, available for installation on Linux, Windows and MacOS. It supports quite a few plugins installed from its own repository for code completion, working with databases, FTP, eExcel documents and much more. It has built-in support forEmmet — a tool that speeds up the writing of code in various programming languages. There are even debugging modes to check if the code works. VS Code is completely free.
2. Sublime Text — an equally common editor. It also supports code completion, Emmet and all the VS Code features mentioned above. The developer's website points out:
Notepad++ — a minimalistic code editor, as the name suggests: Notepad is an ordinary notepad, and "++" indicates advanced features. The editor also has code completion depending on the file type. As in previous editors, there is syntax highlighting. Plugins are supported. For example, a very handy addon for working with FTP: you can immediately edit a file downloaded from FTP and upload it back by pressing "Save". The program is free and available only for Windows.
Tools for running a local web server
After creating a web application or a website, you will need to run it in order to test it. If it is a simple HTML file, you just have to open it in your browser. Nevertheless, often it is necessary to run the code on the server, and then these tools are useful:
1. OpenServer — a web programming environment. This is a local web server, which is installed as a normal software - through the installer. After installation, the built-in tools are immediately available: database management through phpMyAdmin,PHP version management, the ability to choose the version of Apache / NGINX, to save settings to different profiles. The program is available only for Windows.
2. WampServer — another quite popular web server. Easy to install and undemanding to the system, which means it can run even on a modestly powered computer. Supports all the components required for a web server. It allows you to install, delete, enable, and disable PHP extensions directly from the program interface, without having to write any text in the configuration files.
Working with the layout
2. PerfectPixel is a plugin for Chromium-based browsers and FireFox, allowing you to superimpose the design image of the website on top of its layout. It helps to see where the layout deviates from the given preset. You can adjust the position and appearance of elements directly in the browser.
3. PixelParallel is another useful extension for Chromium-based browsers. It shows a grid on top of the website page, over which the website elements are aligned. The grid parameters are customizable.
4. Better Ruler is an extension that works like a ruler and helps you measure the distance between objects on the page.
5. LambdaTest checks how the layout works in different browsers and on different OS. The service is paid, but a limited functionality is available for free to test the website in Windows and MacOS browsers, including mobile devices with different resolutions.
Tools for graphics
1.Online image converter — a very useful service for converting images into 12 different formats. For example, you can convert the image into ico format to create a favicon for the website. The service is not limited to just an image converter, it allows you to convert quite a large set of file formats: audio, video, documents.
2. ColorZilla — an extension for browsers that shows the color code of any element on the page with the Eye-Dropper tool.
3. Pixlr— a free online image converter. Allows you to edit images, supports most well-known image formats, including Photoshop PSD file format. Supports working with different layers.
Services for providing icons and pictures
1. Preloaders — a service of generating animated download icons. Allows you to adjust the parameters: color, size, and animation speed. The large list of animations contains free and paid pictures.
2. Unsplash — — a catalog of free images, which can be downloaded in various sizes.
3. Lorem Picsum — the service selects random pictures of any size, which can be set manually. For example, if the link is in the format
https://picsum.photos/500/800, the service will randomly generate an image of 500 by 800 pixels. Very useful for prototyping or just for blank images on a website.
Flaticon — — a catalog of various icons for all occasions. Both free and paid icons are present.
Word processing services
1. Google Fonts — a service from Google that distributes free fonts. You can download fonts as a file or connect them to your project via a generated link.
2. Beautifier formats the code in a way that it is easy to read and edit.
Once you have created your website, go ahead and manage it through ISPmanager
ISPmanager - a server and website control panel. It helps you set up the environment, deploy websites on a production server and maintain them. For example, you can use the ISPmanager web interface to:
- Deploy an Apache, nginx, or OpenLiteSpeed web server;
- install languages and alternative versions of PHP;
- create a database;
- configure the mail server;
- install the CMS;
- configure backups;
- connect DDoS protection.
Try ISPmanager for free - we provide a trial version for 14 days.