How I made the journal section on my website one page (tutorial)

How I made the journal section of my website!

I'm really proud of how the journal section in my website turned out, so I thought I would share a tutorial of how I made it for others to use if they like what I have done. It's not perfect, so feel free to tweak yours however you need!

What I like about this method is that all of my entries live on one document. Some people might not like that, and would rather have a new document for each entry. If the latter is what you prefer, then this might not be for you. I like having one document because it makes things easier for editing and organizing my old entries, as I like to filter them by month.

First of all, I took inspiration from sadgrl's HTML guides; the one page blog and entries snippet to be specific. When I was going to make my journal originally, I was just going to use that. However, when I added the code to my CSS, it made one of my webrings disappear! That isn't good! So, I had to figure out how to make it work.

First, I decided to put the journal entries in a separate HTML document being displayed through an iframe so I could use the code and not have my webrings vanishing. In the documents with my journal entries, I used internal styling instead of external. I added the code for the one page blog and entries then I styled it to fix the rest of my site.

At first, I had separate links for each of the months, and I didn't like how messy it looked. I also knew that down the line the links too the entries would begin to take up more and more space. I decided to go with having a drop down menu. I looked at the tutorial found on W3Schools. It was easy to modify the codes to my needs.

After that, I did some minor edits to make sure it looked good and behaved how I wanted it to, then it was complete.

Here is a codepen of the code.