Create a Crypto Coin Dashboard Using HTML for Free

Did you know you can easily create a crypto coin dashboard with little coding experience? We’ve compiled a step-by-step guide on creating a crypto dashboard using HTML only, all for free.

It would help if you had internet access and a computer or device (like a tablet) that can convert a notepad file into an HTML file. This dashboard will be local to your machine; however, if you’d like to get it up on a server, you can so anyone can access it anywhere.

It’s a great option if you have a second monitor and would like to watch cryptocurrency trading happen in real-time. I will share a few steps you need to complete

Let’s dive in:

1. Pick the Crypto Coins You Would Like to Track

Create a list of the cryptocurrencies you would like to add to your dashboard. Find their ticker symbol by visiting Yahoo Finance or any digital crypto exchanges. (https://finance.yahoo.com/cryptocurrencies/)

The HTML code will have a limit of 4 currencies you can track at once, so you can start by picking the virtual coins you would like to monitor.

Or you can pick from Trading View.

2. Open a Notepad Note on Your Computer

Once you know the tricker symbols you want to track, you can paste the following code example into a notepad.

<!doctype html>
<title>Crypto Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#outer-grid {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
#outer-grid > div {
background-color: white;
color: white;
font-size: 4vw;
padding: 10px;
}
#inner-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 5px;
}
#inner-grid > div {
background: salmon;
padding: 10px;
}
</style>
<div id="outer-grid">
<div><!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div class="tradingview-widget-container__widget"></div>
<script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js" async>
{
"symbol": "COINBASE:ETHUSD",
"width": 650,
"height": 320,
"locale": "en",
"dateRange": "12M",
"colorTheme": "light",
"trendLineColor": "rgba(41, 98, 255, 1)",
"underLineColor": "rgba(41, 98, 255, 0.3)",
"underLineBottomColor": "rgba(41, 98, 255, 0)",
"isTransparent": false,
"autosize": false,
"largeChartUrl": ""
}
</script>
</div>
<!-- TradingView Widget END --></div>
<div><!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div class="tradingview-widget-container__widget"></div>
<script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js" async>
{
"symbol": "BINANCE:BTCUSDC",
"width": 650,
"height": 320,
"locale": "en",
"dateRange": "12M",
"colorTheme": "light",
"trendLineColor": "rgba(41, 98, 255, 1)",
"underLineColor": "rgba(41, 98, 255, 0.3)",
"underLineBottomColor": "rgba(41, 98, 255, 0)",
"isTransparent": false,
"autosize": false,
"largeChartUrl": ""
}
</script>
</div>
<!-- TradingView Widget END -->
</div>
<div><!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div class="tradingview-widget-container__widget"></div>
<script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js" async>
{
"symbol": "BITFINEX:WAXUSD",
"width": 650,
"height": 320,
"locale": "en",
"dateRange": "12M",
"colorTheme": "light",
"trendLineColor": "rgba(41, 98, 255, 1)",
"underLineColor": "rgba(41, 98, 255, 0.3)",
"underLineBottomColor": "rgba(41, 98, 255, 0)",
"isTransparent": false,
"autosize": false,
"largeChartUrl": ""
}
</script>
</div>
<!-- TradingView Widget END --></div>
<div><!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div class="tradingview-widget-container__widget"></div>
<script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js" async>
{
"symbol": "BINANCE:SHIBUSDT",
"width": 650,
"height": 320,
"locale": "en",
"dateRange": "12M",
"colorTheme": "light",
"trendLineColor": "rgba(41, 98, 255, 1)",
"underLineColor": "rgba(41, 98, 255, 0.3)",
"underLineBottomColor": "rgba(41, 98, 255, 0)",
"isTransparent": false,
"autosize": false,
"largeChartUrl": ""
}
</script>
</div>
<!-- TradingView Widget END --></div>
</div>

Now find the following pieces of code so you can replace them with the proper crypto ticker symbol. We’re tracking Ethereum, Bitcoin, Shiba, and Wax in our example.

"symbol": "COINBASE:ETHUSD", "symbol": "BINANCE:BTCUSDC", "symbol": "BINANCE:SHIBUSDT", "symbol": "BITFINEX:WAXUSD",

Here’s an example of what it looks like when you change the ticker symbols to different coins worth tracking. For example, you can change the code to start tracking DogeCoin, Sand, Solona, and Luna.

"symbol": "BINANCE:DOGEUSDT", "symbol": "BINANCE:SANDUSDT", "symbol": "FTX:SOLUSD", "symbol": "FTX:LUNAUSD",

3. Publish the Cryptocurrency Dashboard Locally or to a Server

Save the notepad as a ‘.html’ instead of a ‘.txt’ file, and your internet browser will allow you to open the file locally. It’s easy to open and update in real-time in a new browser every time you click on the file.

If you host a website and have access to the FTP, you can upload this file to a specific page, and it can go live for anyone on the internet.

How The Crypto Dashboard’s HTML Code Works

Below will explain in more detail what the code means so you can learn how to change it if you would like in the future.

The crypto dashboard uses Trading View Widgets to track cryptocurrency easily because of the open-source code. In addition, it allows you to customize the mini-chart to a light or dark version.

In our example, we started with a simple HTML template.

It includes the head, body, and metadata after using a grid layout like the style and making the background white so the widget will blend into it without confusion.

The Trading View Widget scripts come from a third-party site and within each div. Lastly, the size of the widgets becomes customizable to the monitor you have.

If you’ve enjoyed reading about how to make a crypto coin dashboard using HTML, you may also like these: