This past weekend I decided to make a personal website. Whenever I have a professional website, if I switch jobs then I lose the site. I wanted to have a permanent place with all of my materials. I used GitHub Pages to host the site.

As I was making the website I spent a lot of time trying to beautify my code as I went along. I made notes and this post is just going to be a list of issues that arose.

• Each page has a menu bar that includes a link to the homepage, except for the homepage. For the non-homepages I used JavaScript to call the HTML I used for the header of each page (title, menu) but since the homepage header was different (it doesn’t include the Home link) I had to rewrite most of the code in the index.html file. I feel like there should be a way to use the standardized code and just modify it not to include the Home link on the homepage, but I couldn’t find a way.
• My computer is set to use the English international keyboard so I have access to characters with accents. However, these characters do not work with HTML (or LaTeX, I found out). I learned the special character code for é is é or é and the code for ö is ö or ö. I don’t think I was consistent about whether I used the numerical code or the one with the name. (Awhile back I also learned the special character code for a colon is : or :, which I needed, to include a colon in the title of my posts about PCA.)
• I wanted to make all of my links open in a new tab, except for the ones in my menu bar. To make any one link open in a new tab, just add target="_blank" to the a tag. Since I wanted it in all of my links, with a small exception, I thought there would be a way to automatically include this attribute and then just turn it off for the links where I don’t want it. Never found out how.
• For awhile I had a big problem with my div elements overlapping, particularly when I resized the browser window. To fix it I just resized the browser window to the smallest size, then adjusted the padding and margins according to that size. However, the problem returns when you try to view the site on a mobile device. I think phone browsers have ways of making webpages mobile-friendly, but it’s not perfect and I would like to be mindful of that whenever I make a webpage.
• Here’s an issue that bugged me to death and is still bugging me. I created a separate CSS file that I call in each of my pages. It includes styles for my div elements. However, when I click on the links to the different pages on the site, the widths of the divs don’t match. Over time it’s changed, which pages didn’t match the homepage. The issue seems to be arbitrary because at one point all the pages were perfectly uniformly formatted. As of now, the subpages are consistent with each other, but not with the homepage. I have no idea how to fix this.
• I”ve always used tables to organize my content on webpages, but this time around something told me it was too old-fashioned. On this website I use one table on the homepage. Everything else is organized using div and nested div elements. I guess it’s less code to write than it would be if I had used more tables.
• On my subpages I have three script elements that have different src attributes. Can I combine these into one script element? I’ve read that reducing the number of separate script elements helps the page load faster.
• I learned that if you inspect an element on a webpage (in Chrome, at least) then there is a window in the development tools where you can see which styles have been applied to your element. This was really handy when I was trying to fit my divs together.
• I read that the dollar sign in JavaScript is a shortcut for document.getElementById. However, when I tried to use it in my function that shows/hides text, it didn’t work.
• And speaking of toggling visibility of hidden text, I was having the problem that when I made the text appear, it would either shoot the text to the top of the browser window (if I used the div id in the a tag), or it would make the text visible, but also go back to the top of the page (if I used "#" in the a tag). I think what fixed the problem was when I added return false; to the onClick command. I don’t know exactly what that does, but I had it in the source code for my old University of Arkansas website.

It only took 3 days, and I tried to keep notes as I was working, but I know this is not everything.