The goal today was to make this website a lot more easier to maintain. Currently everything being worked on here is hardcoded in by hand. A very manual process that takes a bit too much time. Even with the use of templates for this writing section, there's always a lot that I might want to update over time. And this will make it easier.

To cut to the chase, I wanted to have a footer and header section that could be maintained separatly. To do this, I'm following a tutorial from this webpage.

Now, I won't go over all the details in steps as shown in the tutorial, but here are the broad strokes

---

1. Create a separate html page for the code you wish to reuse. In our case I've made one for the header and one for the footer. Named aptly 'header.html' and 'footer.html'

2. Go to the page you wish for the code to show up in, link jquery in the header.

3. In a separate script section, on the condition of page ready, use the load function to load a html file content into a specific id tag div

4. In the section where you want to add the code in the main html page, create a div with the id tag that matches the loaded content.

5. Done! That's it! Check for bugs and typos and enjoy your reusable code.

---

Thanks again for the tutorial I was using to follow along. Was pretty simple and had nice explanations.