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.
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.
|Git||Git integration for Brackets.|
|Emmet||High-speed HTML and CSS workflow.|
|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|
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