Revision 994853 of Installing basic software

<div>{{IncludeSubnav("/en-US/Learn")}}</div>

<p>{{PreviousNext("Learn/Getting_started_with_the_web", "Learn/Getting_started_with_the_web/What_will_your_website_look_like")}}</p>

<div class="summary">
<p>In <em>Installing basic software</em>, we show you what tools you need to do simple web development, and how to install them properly.</p>
</div>

<h2 id="What_tools_do_the_professionals_use">What tools do the professionals use?</h2>

<ul>
 <li><strong>A computer</strong>. Maybe that sounds obvious to some people, but some of you are reading this article from your phone or a library computer. For serious web development, it's better to invest in a desktop computer (Windows, Mac, or Linux).</li>
 <li><strong>A text editor</strong>, to write code in. This could be a free text editor (e.g. <a href="https://notepad-plus-plus.org/">Notepad++</a>, <a href="https://wiki.gnome.org/Apps/Gedit">gedit</a>, <a href="https://brackets.io/">Brackets</a>, or&nbsp;<a href="https://www.barebones.com/products/textwrangler/">Text Wrangler</a>), a commercial text editor (<a href="https://www.sublimetext.com/">Sublime Text</a> or <a href="https://panic.com/coda/">Coda</a>) or a hybrid editor (<a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a>).</li>
 <li><strong>Web browsers</strong>, to test code in. Currently the most-used browsers are <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, and <a href="https://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>. You should also test how your site performs on mobile devices and on any old browsers your target audience may still be using extensively (such as IE 6–8.)</li>
 <li><strong>A graphics editor</strong>, like <a href="https://www.gimp.org/">The GIMP</a>, <a href="https://www.getpaint.net/">Paint.NET</a>, or <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>, to make images for your webpages.</li>
 <li><strong>A version control system</strong>, to collaborate on a project with a team, share code and assets, and avoid editing conflicts. Right now <a href="https://git-scm.com/">Git</a> is the most popular version control tool.</li>
 <li><strong>An FTP program</strong>, to upload webpages to a server for public viewing. There are loads of these programs available including <a href="https://cyberduck.io/">Cyberduck</a>, <a href="https://fetchsoftworks.com/">Fetch</a>, and <a href="https://filezilla-project.org/">FileZilla</a>.</li>
 <li><strong>An automation system</strong>, like <a href="https://gruntjs.com/">Grunt,</a> to perform repetitive tasks automatically, for example minifying code and running tests.</li>
 <li>Templates, libraries, frameworks, etc., to speed up writing common functionality.</li>
 <li>More tools besides!</li>
 <li>Learn how to use GitHub on <a href="https://github.com/youtube">YouTube</a>. GitHub is a tool that allows for you to store the code that you have written and to share your work in a repository.</li>
</ul>

<h2 id="What_tools_do_I_actually_need_right_now">What tools do I actually need, right now?</h2>

<p>That looks like a scary list, but fortunately you can get started in web development without knowing anything about most of these. In this article we'll just set you up with a bare minimum — a text editor and some modern web browsers.</p>

<h3 id="Installing_a_text_editor">Installing a text editor</h3>

<p>You probably already have a basic text editor on your computer. By default Windows includes <a href="https://en.wikipedia.org/wiki/Notepad_%28software%29">Notepad</a> and OS X comes with <a href="https://en.wikipedia.org/wiki/TextEdit">TextEdit</a>. Linux distros vary; Ubuntu comes with&nbsp;<a href="https://en.wikipedia.org/wiki/Gedit">gedit</a> by default.</p>

<p>For Web development, you can probably do better than Notepad or TextEdit. We recommend starting out with <a href="https://notepad-plus-plus.org/">Notepad++</a> for Windows or <a href="https://www.barebones.com/products/textwrangler/">Text Wrangler</a> for the Mac. They're both free and more full-featured than Notepad and TextEdit.</p>

<h3 id="Installing_modern_web_browsers">Installing modern web browsers</h3>

<p>For now, we'll just install a couple of desktop web browsers to test our code in. Choose your operating system below and click the relevant links to download installers for your favorite browsers:</p>

<ul>
 <li>Linux: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>.</li>
 <li>Windows: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>,&nbsp;<a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> (If you have Windows 8 or above, you can install IE 10 or later; otherwise, you should install an alternative browser)</li>
 <li>Mac: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a> (Safari comes with iOS and OS X by default)</li>
</ul>

<p>Before going on, you should install at least two of these browsers and have them available for testing.</p>

<p>{{PreviousNext("Learn/Getting_started_with_the_web", "Learn/Getting_started_with_the_web/What_will_your_website_look_like")}}</p>