Learn how to make a quick custom website using HTML, CSS, and JavaScript using data from a Google Sheet.
Perfect for beginners to web development or experienced devs looking to make a website without a backend!
The End Product
Final Website
My website is about How to Pronounce Indian names — a cause close to my heart as an Indian-American.
Below is a sample of how it looks. You can view it live here, as well.
Code
Here is the full code for the two files that will create the website: index.html & index.css.
Don’t worry! We will be going through and explaining all the code to you.
index.html
index.css
Now let's get into the code!
Start by Creating Your Spreadsheet
Create a spreadsheet on Google Sheets that contains the data you want to show up on your website.
As I mentioned above, my website is about how to pronounce Indian names and I want to display 3 things: the name, how it is spelled out phonetically and the actual pronunciation.
So in my spreadsheet, I have the following column names
name - the name to pronounce
the name to pronounce written - name spelled out phonetically
name spelled out phonetically audio - url of the audio file that contains the pronunciation of the name
Connect your Google Sheet on APISpreadsheets.com
Now, we need a way to get our data from Google Sheets onto our website.
To do this, we are going to be using our tool to convert the Google Sheet to a REST API.
It’s okay if you don’t understand REST APIs fully. All you need to know is they let you read or write data using a standard protocol available through Javascript
The nice thing about using Google Sheets with API Spreadsheets is that I can keep adding values onto my Google Sheet and the website will update automatically with the new data!
Make an account if you don’t have one already (it’s free for up to 3 files!) and choose the file you want.
Once you have uploaded the file, checkout the quick tour to get a deeper understanding of all the features.
For this tutorial, we will only be reading our spreadsheet so click on the “Read” tab and Javascript Code Sample
We will be copying and pasting this Javascript code sample in our code.
You don’t have to do that now. We will show you when to do it below. Just keep the tab open.
Now let’s create our HTML & CSS Files.
...
Open Up a Text Editor of Your Choice
I will be using Sublime Text but you can use whatever you are comfortable with, such as Atom or Notepad.
Create HTML file
Create and set up an HTML page, index.html, with the & .
In the , we are going to include 3 div tags that will be crucial in:
Displaying our data from Google Sheets, Showing a loader while we are getting the data,
Showing an error message if something bad happens,
I also included a Header/Hero in the
to display at the top of the page and a to display at the bottom.
Copy the Javascript code from API Spreadsheets
Place it at right before the end of your
elements
In the index.css file we will be styling our 3 crucial elements.
We will set
and
to NOT display initially.
This is because when the website initially loads, we will be fetching our data from Google Sheets and won’t have anything to display.
We also won’t know till the fetch is complete whether to show the error or not.
#allNames { display: none; } #errorMessage { display: none; color: red; }
We will also add the following CSS for the
. This will give it the appearance and make it spin.
We want the loader to display when the website initially loads till the fetch is complete. So we won’t be setting anything for its display property.
#loader { border: 16px solid #f3f3f3; /* Light grey */ border-top: 16px solid #3498db; /* Blue */ border-radius: 50%; width: 50px; height: 50px; animation: spin 2s linear infinite; margin: auto; margin-top: 40px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
The FULL Javascript Code
We are going to be adding A LOT more to the fetch code. The final code in the