Basic Setup
If you haven't already completed the Getting Started guide, go complete it here first
The page title is made unique, especially with that (name) part begging you to change it.
Start by opening up index.html, and locating <title>What is (name) feeling?</title>. Once you've found it, change (name) to whatever your name is.
Open up about.html, and locate <title>About (name)</title>. Once you've found it, change (name) to whatever your name is.
Go ahead and open contact.html, and locate <title>Contact (name)</title>. Once you've found it, change (name) to whatever your name is.
The page headers are like page titles, except they appear on the webpage and not the browser tab.
Start by opening up index.html, and locating <h1>(name) is feeling</h1>. Once you've found it, change (name) to whatever your name is.
Open up about.html, and locate <h1>All about (name)</h1>. Once you've found it, change (name) to whatever your name is. Repeat the same for <h2>👋 Hi! My name is (name).</h2>, which can be located under the last code block.
Go ahead and open contact.html, and locate <h1>Contact (name)</h1>. Once you've found it, change (name) to whatever your name is.
The PWA app name is the name of the shortcut that appears on your home screen when you install feeling-o-meter as an app.
Open up index.html, and go to the top of the page. Inside the
Open up about.html, and go to the top of the page. Inside the
Open up contact.html, and go to the top of the page. Inside the
Feeling-o-meter contains an about section, which allows website viewers to learn more about you.
Open up about.html and locate the comment `<!--Use h3 to insert some facts about yourself.--!>. Once you've located that, you can change the existing examples below, or create your own.
Feeling-o-meter contains a contact section, which allows website viewers to contact you.
Open up contact.html and locate the comment <!--Use h3 to put some social links here--!>. Once you've located it, you can use h3 to add some social links to your contact page. (Unsure of how to add links? You can read this page.)
Favicons are the icons you see next to the title, and setting them up will depend on where you are hosting Feeling-o-meter.
By default when you are using GitHub Pages, your website will be hosted on yourgithubusername.github.io/repo-name. In this tutorial, our repo name is going to be Feeling-o-meter and our GitHub username is JoshAtticus.
If your website is yourgithubusername.github.io/feeling-o-meter, congratulations, you do not need to do any setup, you can skip this step. The same goes for if your website is in this format - www.yourwebsite.tld/feeling-o-meter.
If you have a different page for whatever reason (e.g. you didn't call your repo feeling-o-meter or you didn't name the folder on your web server feeling-o-meter), don't worry, the setup process is quite simple, and will only take a few extra minutes.
Open up index.html, and go to the top of the page. Inside the
Open up about.html, and go to the top of the page. Inside the
Open up contact.html, and go to the top of the page. Inside the
You need to deploy feeling-o-meter before you can access it. This is only needed if you are using GitHub Pages.
GitHub Pages is a free website deployment service by GitHub. We need to enable it to access Feeling-o-meter.
Start by clicking on the "Settings" button near the top of your repo's website. Once in the Settings, select "Pages" from the sidebar.
Once in the Pages section of the Settings menu, look for the "Branch" section. Once you've found it, open the "None ⏷" dropdown menu, and select the "main" branch. Once selected, press the "Save" button to enable GitHub pages.
Go ahead and complete the Using Feeling-o-meter guide.