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, BracketsNotepad++Sublime TextAtomGNU 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 FirefoxChromeOperaSafariInternet 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:

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 GIMPFigmaPaint.NETPhotoshopSketch 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 CyberduckFetch and FileZilla.
  • An automation system, like WebpackGrunt, 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

GitGit integration for Brackets.
EmmetHigh-speed HTML and CSS workflow.
BeautifyFormat JavaScript, HTML, and CSS files.
Markdown PreviewLive preview of markdown documents.
File IconsFile icons in Brackets’ file tree.
Indent GuidesShow indent guides in the code editor.
AutoprefixerParse CSS and add vendor prefixes automatically.
W3C ValidationSimple W3C Validator.
Static PreviewServes your project via a static web server and opens it in your default browser.

For Visual Studio Code

PrettierCode formatter using prettier
BeautifyBeautify code in place for VS Code
Image previewShows image preview in the gutter and on hover
Color HighlightHighlight web colors in your editor
Auto rename tagAuto rename paired HTML/XML tag
Live serverLaunch a development local Server with live reload feature for static & dynamic pages

Wrapping out

We have an idea which tools and extensions to use for web development now.

Thank you for reading.

Check for more tutorials at acoptex.lt.

Check for Arduino and Raspberry Pi projects on our website acoptex.com.

Section 1. Introduction. 1.2 HTML basics

Section 1. Introduction. 1.3 Installing software and popular extensions

Section 1. Introduction. 1.4 Using Notepad or TextEdit to create your first webpage