• Skip to main content
  • Select language
  • Skip to search
MDN Web Docs
  • Technologies
    • HTML
    • CSS
    • JavaScript
    • Graphics
    • HTTP
    • APIs / DOM
    • WebExtensions
    • MathML
  • References & Guides
    • Learn web development
    • Tutorials
    • References
    • Developer Guides
    • Accessibility
    • Game development
    • ...more docs
Learn web development
  1. MDN
  2. Learn web development
  3. Getting started with the Web
  4. Installing basic software

Installing basic software

In This Article
  1. What tools do the professionals use?
  2. What tools do I actually need, right now?
    1. Installing a text editor
    2. Installing modern web browsers
    3. Installing a local web server
Overview: Getting started with the web Next

 

In Installing basic software, we show you what tools you need to do simple web development, and how to install them properly.

What tools do the professionals use?

  • A computer. 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 or laptop computer (Windows, Mac, or Linux).
  • A text editor, to write code in. This could be a text editor (e.g. Brackets, Atom or Visual Studio Code), or a hybrid editor (e.g. Dreamweaver). Office document editors are not suitable for this use, as they rely on hidden elements that interfere with the rendering engines used by web browsers.
  • Web browsers, to test code in. Currently 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 extensively (such as IE 6–8.)
  • A graphics editor, like GIMP, Paint.NET, or Photoshop, to make images for your webpages.
  • 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 tool, and the GitHub code hosting service, based on Git, is also very popular.
  • A FTP program, used on older webhosting 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 Grunt or Gulp to automatically perform repetitive tasks, such as minifying code and running tests.
  • Templates, libraries, frameworks, etc., to speed up writing common functionality.
  • More tools besides!

What tools do I actually need, right now?

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.

Installing a text editor

You probably already 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.

For web development, you can probably do better than Notepad or TextEdit. We recommend starting out with Brackets, which is a free editor that offers live previews and code hints.

Installing modern web browsers

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:

  • Linux: Firefox, Chrome, Opera.
  • Windows: Firefox, Chrome, Opera, Internet Explorer, Microsoft Edge (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)
  • Mac: Firefox, Chrome, Opera, Safari (Safari comes with iOS and macOS by default)

Before going on, you should install at least two of these browsers and have them ready for testing.

Installing a local web server

Some examples will need to be run through a web server to work successfully. You can find out how to do this in How do you set up a local testing server?

Overview: Getting started with the web Next

 

Document Tags and Contributors

Tags: 
  • Beginner
  • Browser
  • l10n:priority
  • Learn
  • Setup
  • text editor
  • Tools
  • WebMechanics
 Contributors to this page: hadleyel, jk777, evaferreira, chrisdavidmills, zizau_, Sheppy, saurabh95, SphinxKnight, KindRacoon, ownsourcing, alirobe, Jeremie, antoniogarcia78, platy11, goto.prototype, kgriff24, jsx, Jackie_Tang, KamranMackey, xfq, pseudosavant, artmees, Andrew_Pfeiffer
 Last updated by: hadleyel, Jul 3, 2017, 8:08:22 AM
See also
  1. Complete beginners start here!
  2. Getting started with the Web
    1. Getting started with the Web overview
    2. Installing basic software
    3. What will your website look like?
    4. Dealing with files
    5. HTML basics
    6. CSS basics
    7. JavaScript basics
    8. Publishing your website
    9. How the Web works
  3. HTML — Structuring the Web
  4. Introduction to HTML
    1. Introduction to HTML overview
    2. Getting started with HTML
    3. What's in the head? Metadata in HTML
    4. HTML text fundamentals
    5. Creating hyperlinks
    6. Advanced text formatting
    7. Document and website structure
    8. Debugging HTML
    9. Assessment: Marking up a letter
    10. Assessment: Structuring a page of content
  5. Multimedia and embedding
    1. Multimedia and embedding overview
    2. Images in HTML
    3. Video and audio content
    4. From object to iframe — other embedding technologies
    5. Adding vector graphics to the Web
    6. Responsive images
    7. Assessment: Mozilla splash page
  6. HTML tables
    1. HTML tables overview
    2. HTML table basics
    3. HTML Table advanced features and accessibility
    4. Assessment: Structuring planet data
  7. CSS — Styling the Web
  8. Introduction to CSS
    1. Introduction to CSS overview
    2. How CSS works
    3. CSS syntax
    4. Selectors introduction
    5. Simple selectors
    6. Attribute selectors
    7. Pseudo-classes and pseudo-elements
    8. Combinators and multiple selectors
    9. CSS values and units
    10. Cascade and inheritance
    11. The box model
    12. Debugging CSS
    13. Assessment: Fundamental CSS comprehension
  9. Styling text
    1. Styling text overview
    2. Fundamental text and font styling
    3. Styling lists
    4. Styling links
    5. Web fonts
    6. Assessment: Typesetting a community school homepage
  10. Styling boxes
    1. Styling boxes overview
    2. Box model recap
    3. Backgrounds
    4. Borders
    5. Styling tables
    6. Advanced box effects
    7. Assessment: Creating fancy letterheaded paper
    8. Assessment: A cool-looking box
  11. CSS layout
    1. CSS layout overview
    2. Introduction
    3. Floats
    4. Positioning
    5. Practical positioning examples
    6. Flexbox
    7. Grids
  12. JavaScript — Dynamic client-side scripting
  13. JavaScript first steps
    1. JavaScript first steps overview
    2. What is JavaScript?
    3. A first splash into JavaScript
    4. What went wrong? Troubleshooting JavaScript
    5. Storing the information you need — Variables
    6. Basic in JavaScript — Numbers and operators
    7. Handling text — Strings in JavaScript
    8. Useful string methods
    9. Arrays
    10. Assessment: Silly story generator
  14. JavaScript building blocks
    1. JavaScript building blocks overview
    2. Making decisions in your code — Conditionals
    3. Looping code
    4. Functions — Reusable blocks of code
    5. Build your own function
    6. Function return values
    7. Introduction to events
    8. Assessment: Image gallery
  15. Introducing JavaScript objects
    1. Introducing JavaScript objects overview
    2. Object basics
    3. Object-oriented JavaScript for beginners
    4. Object prototypes
    5. Inheritance in JavaScript
    6. Working with JSON data
    7. Object building practise
    8. Assessment: Adding features to our bouncing balls demo
  16. Accessibility — Make the web usable by everyone
  17. Accessibility guides
    1. Accessibility overview
    2. What is accessibility?
    3. HTML: A good basis for accessibility
    4. CSS and JavaScript accessibility best practices
    5. WAI-ARIA basics
    6. Accessible multimedia
    7. Mobile accessibility
  18. Accessibility assessment
    1. Assessment: Accessibility troubleshooting
  19. Tools and testing
  20. Cross browser testing
    1. Cross browser testing overview
    2. Introduction to cross browser testing
    3. Strategies for carrying out testing
    4. Handling common HTML and CSS problems
    5. Handling common JavaScript problems
    6. Handling common accessibility problems
    7. Implementing feature detection
    8. Introduction to automated testing
    9. Setting up your own test automation environment
  21. Server-side website programming
  22. First steps
    1. First steps overview
    2. Introduction to the server-side
    3. Client-Server overview
    4. Server-side web frameworks
    5. Website security
  23. Django web framework (Python)
    1. Django web framework (Python) overview
    2. Introduction
    3. Setting up a development environment
    4. Tutorial: The Local Library website
    5. Tutorial Part 2: Creating a skeleton website
    6. Tutorial Part 3: Using models
    7. Tutorial Part 4: Django admin site
    8. Tutorial Part 5: Creating our home page
    9. Tutorial Part 6: Generic list and detail views
    10. Tutorial Part 7: Sessions framework
    11. Tutorial Part 8: User authentication and permissions
    12. Tutorial Part 9: Working with forms
    13. Tutorial Part 10: Testing a Django web application
    14. Tutorial Part 11: Deploying Django to production
    15. Web application security
    16. Assessment: DIY mini blog
  24. Express Web Framework (node.js/JavaScript)
    1. Express Web Framework (Node.js/JavaScript) overview
    2. Express/Node introduction
    3. Setting up a Node (Express) development environment
    4. Express tutorial: The Local Library website
    5. Express Tutorial Part 2: Creating a skeleton website
    6. Express Tutorial Part 3: Using a database (with Mongoose)
    7. Express Tutorial Part 4: Routes and controllers
    8. Express Tutorial Part 5: Displaying library data
    9. Express Tutorial Part 6: Working with forms
    10. Express Tutorial Part 7: Deploying to production
  25. Further resources
  26. Advanced learning material
    1. WebGL: Graphics processing
  27. Common questions
    1. HTML questions
    2. CSS questions
    3. JavaScript questions
    4. How the Web works
    5. Tools and setup
    6. Design and accessibility
  28. How to contribute