MetaMask is a browser plugin that allows your normal browser to behave as a web3 browser, to interact with DApps, and to send transactions without running an Ethereum node. MetaMask achieves this by injecting the web3js API into every web page's JavaScript context.

The necessary instructions for installing and setting up MetaMask are well documented on their official website, at: https://metamask.io. After the process of wallet creation, switch to the Ropsten test network in MetaMask's settings by clicking on the network selector located on the upper left corner. Once you're connected to Ropsten, you'll need to get some free worthless ether by choosing to buy some coins as shown in the following screenshot:

MetaMask can be connected to any RPC provider locally (Ganache, Geth) or online (testnet, Mainnet). For a detailed step-by-step guide to using MetaMask, I point you to the official documentation available at https://github.com/MetaMask/faq/blob/master/USERS.md.

All set; now, go back to your Remix browser (you may need to refresh it) and select (in Remix) injected web3 as the environment option, in order to deploy your contract directly online. MetaMask will initiate the deployment transaction and give you back the contract address:

MetaMask provides an Ethereum Etherscan link for each transaction, in order to visualize, among other details, the transaction status and gas cost:

Voila! The contract is easily deployed in the testnet.

Alternatively, you can connect Remix to the testnet by setting up a light node connected to the testnet network as explained in the next section. To test your auction web page using MetaMask, you have to add the following code snippet to the beginning of your auction.js file to detect MetaMask's injected web3 instance:

if (typeof web3 !== 'undefined') {
    App.web3Provider = web3.currentProvider;
    web3 = new Web3(web3.currentProvider);
} else {
    // change to your RPC provider IP and Port
    App.web3Provider = new web3.providers.HttpProvider('http://127.0.0.1:7545');
    web3 = new Web3(App.web3Provider);
}

Instead using only web3.setProvider(new web3.providers.HttpProvider("http://127.0.0.1:8545")); as we did earlier in section talking to the blockchain.

The testnet network is very helpful as it gives you an accurate idea of the delay processing and cost of your transactions. However, the implied delay time and limited ether won't be helpful for developers who regularly change their DApp's code, hence the following third option or Ganache is more suitable as a starting environment. You can then you move to this testnet option before going into production on the Mainnet.