Installing software and popular extensions

Read Time:4 Minute, 21 Second

Section 1. Introduction. 1.3 Installing software and popular extensions

I will show you what tools you will need to do simple web development and how to install them properly.

Bare minimum tools for beginners

You need a bare minimum – a computer, a text editor and some modern web browsers.

A computer. Some of you are reading this article on your phone or a library computer. For the web development, it’s better to have a desktop or laptop computer running Windows, macOS or Linux.
A text editor, you need it to write your code. This could be a text editor (e.g. Visual Studio Code, Brackets, Notepad++, Sublime Text, Atom, GNU Emacs, or VIM), or a hybrid editor (e.g. Dreamweaver or WebStorm).
Web browsers, you need them to test your code. The most-used browsers are Firefox, Chrome, Opera, Safari, Internet Explorer and Microsoft Edge. You should also test how your site performs on mobile devices and on any old browsers your target audience may still be using (such as IE 8–10). Lynx, a text-based terminal web browser, is great for seeing how your site is experienced by visually-impaired users.

You have a basic text editor on your computer. By default Windows includes Notepad and macOS comes with TextEdit. Linux distros vary; Ubuntu comes with gedit by default.

We recommend starting with Visual Studio Code and Brackets.

The Visual Studio Code is a free editor, which was made by Microsoft for Windows, Linux and macOS. Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git. This editor has a lot of useful extensions.

The Brackets is an editor with a primary focus on web development. Created by Adobe Systems, it is free and open-source software licensed under the MIT License, and is currently maintained on GitHub by Adobe and other open-source developers. It is written in JavaScript, HTML and CSS.

You need to install a couple of desktop web browsers to test your code. Just choose your operating system below and click the relevant links to download installers for your favorite browsers:

Linux: Firefox, Chrome, Opera, Brave.
Windows: Firefox, Chrome, Opera, Internet Explorer, Microsoft Edge, Brave (Windows 10 comes with Edge by default; if you have Windows 7 or above, you can install Internet Explorer 11; otherwise, you should install an alternative browser).
macOS: Firefox, Chrome, Opera, Safari, Brave (macOS and iOS come with Safari by default).

Please note that Internet Explorer is not compatible with some modern web features and it may not be able to run your projects. You might sometimes run into a project that requires support for it.

Tools for professional use

A computer.
A text editor.
Web browsers.
A graphics editor, like GIMP, Figma, Paint.NET, Photoshop, Sketch or XD, to make images or graphics for your web pages.
A version control system, to manage files on servers, collaborate on a project with a team, share code and assets and avoid editing conflicts. Right now, Git is the most popular version control system along with the GitHub or GitLab hosting service.
An FTP program, used on older web hosting accounts to manage files on servers (Git is increasingly replacing FTP for this purpose). There are loads of (S)FTP programs available including Cyberduck, Fetch and FileZilla.
An automation system, like Webpack, Grunt, or Gulp to automatically perform repetitive tasks, such as minifying code and running tests.
Libraries, frameworks, etc., to speed up writing common functionality. A library tends to be an existing JavaScript or CSS file that provides ready-rolled functionality for you to make use of in your code. A framework tend to take this idea further, offering a

Popular extensions

For Brackets

Git	Git integration for Brackets.
Emmet	High-speed HTML and CSS workflow.
Beautify	Format JavaScript, HTML, and CSS files.
Markdown Preview	Live preview of markdown documents.
File Icons	File icons in Brackets’ file tree.
Indent Guides	Show indent guides in the code editor.
Autoprefixer	Parse CSS and add vendor prefixes automatically.
W3C Validation	Simple W3C Validator.
Static Preview	Serves your project via a static web server and opens it in your default browser.

For Visual Studio Code

Prettier	Code formatter using prettier
Beautify	Beautify code in place for VS Code
Image preview	Shows image preview in the gutter and on hover
Color Highlight	Highlight web colors in your editor
Auto rename tag	Auto rename paired HTML/XML tag
Live server	Launch a development local Server with live reload feature for static & dynamic pages