{"id":639,"date":"2020-01-02T18:53:21","date_gmt":"2020-01-02T23:53:21","guid":{"rendered":"http:\/\/newmediaproduction.mynmi.net\/?page_id=639"},"modified":"2025-08-12T20:17:08","modified_gmt":"2025-08-12T20:17:08","slug":"indexes-and-directories","status":"publish","type":"page","link":"https:\/\/nmi.cool\/webdev\/indexes-and-directories\/","title":{"rendered":"Homepages and Course File Structure"},"content":{"rendered":"\n
\"File
Photo by Maksym Kaharlytskyi<\/a>.<\/figcaption><\/figure>\n\n\n\n

It\u2019s time to expand your files and folder knowledge and learn more about index files<\/strong> and the file structure we’ll be using for this class<\/strong>. You’ll also create your website’s homepage.<\/p>\n\n\n\n

Homepages<\/h2>\n\n\n\n

Homepages operate a little bit differently than other files.<\/p>\n\n\n\n

Homepage at the root directory<\/h4>\n\n\n\n

If we place a file called index.html<\/strong> in public_html, index.html would become the homepage<\/strong> of our website. <\/p>\n\n\n\n

Meaning, that if you type in your domain, such as yourname.com, what you’re actually viewing is that person’s index file, located in the public_html folder of their server. Indexes are home pages.<\/strong><\/p>\n\n\n\n

Homepages in folders<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

You can create other<\/em> homepages by placing index files in folders. For example, if you created index.html,<\/strong> placed it in the webdev folder, and navigated to yoursite.com\/webdev, you’d see that<\/strong><\/em> index.html.<\/p>\n\n\n\n

Essentially, you can have more than one homepage. Rather than the webdev homepage being at the root directory of our site, it would live in a subdirectory\u2014the webdev subdirectory!<\/p>\n\n\n\n

Subdirectory: <\/strong>a directory (fancy word for folder) located within the root directory.<\/p>\n\n\n\n

TL;DR: indexes are home pages, and you can have more than one!<\/p>\n\n\n\n

Still confused? Read more about directories and subdirectories<\/a>.<\/p>\n\n\n\n

Every other webpage<\/h2>\n\n\n\n

Most web pages we create for this class won’t be index files. If we wanted to view in the browser a file that is not <\/strong>an index file, we would type in the file path followed by the file extension.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

To view project-one.html, which resides in two folders:<\/p>\n\n\n\n

www.yoursite.com\/webdev\/project-one\/project-one.html<\/pre>\n\n\n\n
This should sound familiar to the previous lesson on folders and file paths.<\/a><\/p>\n\n\n\n
Course File structure<\/h2>\n\n\n\n
Download the file structure<\/a> for this course.<\/p>\n\n\n\n
Move the webdev folder into Dropbox, your flash drive, Google Drive for desktop, or the cloud\/hard drive of your choice. Just don’t save it locally<\/strong> (to your desktop). Why? You will have a designated (more secure) location (cloud, hard drive, flash drive) as your homebase for your files for this course. You will also create a backup that you update regularly. <\/p>\n\n\n\n
Create webdev homepage<\/h2>\n\n\n\n
You likely already have an index.html file that exists in the webdev folder, but if you do not:<\/p>\n\n\n\n
Skip to this lesson<\/a> and create one in Visual Studio Code. Save it as index.html.<\/p>\n\n\n\n
Create a homepage at the root directory (your NMI portfolio homepage)<\/h2>\n\n\n\n
Create a second<\/strong> index.html (perhaps by copying and pasting that first file?) and save it, but not <\/strong>in the webdev folder.<\/p>\n\n\n\n
This will become your website’s main homepage, which will appear when you navigate to yoursite.com. See the index located at the top level.<\/p>\n\n\n\n
\"\"
Your folder structure should look like this. Notice there is an index.html file at both the root level and in the webdev folder.<\/figcaption><\/figure>\n\n\n\n
Add content<\/strong> to your nmi portfolio home page<\/h2>\n\n\n\n
Wouldn\u2019t it be nice if the home page of your website said something like your name? Your major? Let\u2019s edit the index.html\u2014the one we just made.<\/p>\n\n\n\n
Add your name as title between your title tags. In the body of your page, add:<\/p>\n\n\n\n