Web Designing Nightmares (or maybe not)

Welcome to the documentation of my attempts to figure out web design. Below you will find my records


So after looking over this page I decided to update a few things about this site. First things first was look into making the site more responsive.

This turned out to take like ten seconds to make the page content behave, just a single meta tag was required. This was easily added into the defaultPage.html and to existing pages.

Next part was making the navbar behave, this was less simple, however after reading around I found a bit of a how to at https://www.w3schools.com/. Now I have been using both w3schools and MDN (https://developer.mozilla.org/en-US/docs/Web/) for a lot of the reading up to figure this out, as well disecting some webpages from other sites. From what I found at w3schools I was able to make the navbar adapt to mobile, I was also able to make it stay attached to the top of the screen.

For fun I moved onto something less... practical and more just plain fun. I decided to see if I could make the buttons on my navbar turn when hovered over. This was successful. You can see it above. I also tweaked somethings so that the header tag was used.

After that I had some fun playing around with the site's colour scheme. This took a bit of time to get right, but is pretty much the same site wide now. This meant making the article formatting site wide, and then making it look good with everything else. I set up some back up formatting for outdated or limited browsers, but for the most part the site should look a bit nicer now on all devices.

Due to limited time I don't have time to work on my next goal, which was site layout updating.


So last time I sat down I didn't have time to look into iframes, since then I have done some research on my phone into this very thing. After some digging around into the issue I decided that JavaScript was WAY more reliable for my desires.

Now the reason iframes and JavaScript were considered for my navigation bar were because I wanted one navigation bar file for my entire site. That way I could easily modify that one file and only need to overhaul the entire site if I intended to rebuild the entire site for a new method of doing this.

After some googling I learned that jQuery could be used for this, so that is the method I decided to go with. Before I just took the code I found and implimented it without understanding it (which is fucking stupid to do), I sat down to read the documentation related to the code I found (you can see it if you view this pages source). This was for two purposes, one understanding of the code, two to find what was actually being called in the source code (that is right I went straight for the source code after seeing the documentation).

Once I found what I wanted precisely from the documentation I looked through the source carefully to see if it is worth extracting the jQuery $.get() function from jQuery itself. This meant going through http://code.jquery.com/jquery-latest.js. After reading over all of jQuery code I could stomach, which was more than most people will believe, I decided that it would be faster, due to caching, to use jQuery as is than extracting and remaking the functions myself.

The reasons I decided to keep the functions as they are is simple, the $.get() function is actually just $.ajax. Depending what you feed it it fills in some details for you to save time, the important part of that though is the $.ajx() function returns a jqXHR object. This object contains all the information needed to nicely import HTML into HTML without breaking things. Extracting just the desired parts of the code was deemed a waste, as what I needed was already there and functional. It also would mean users would need to download my own version of a small part of jQuery, something that makes no sense when most people will have jQuery already cached from the Google CDN, saving myself disk space and the user time and disk space. Finally it gives me access to the entire lib if I decide I want it.

I do have issues with jQuery after reading its source, but I do understand how it works in theory now. I will add "Make my own personally jQuery like lib" to my todo list of projects after I learn webdesign. It was an excellent experience for expanding my understanding of JavaScript however, which is, while workable, been allowed to deteriorate through time unused and incomplete.

After I decided to work with jQuery for now I set myself to work on making a template page to work from with the rest of the website, this wasn't hard to put together for now, and I made sure that it was designed so that old content could easily be socketed into it when I upgrade a page to this template, as well as made this template easily upgradable, hopefully. The intention is that I will be able to pour my knoledge into this basic page so that I can, with some basic copy and paste, create a new page from it ready for content (such as the page you are reading) or upgrade old pages to use it.

This template currently includes the styling of my site, the navigation bar at the top, and a few things in place so I can go straight to work on the pages unique content. The page is easily found over at: http://squirrel-killer.ca/defaultPage.html. Nothing special to look at, but it exists for my sake and not for visitors. In the future it might look more interesting. Currently however it just contains a fairly plain navigation bar at the top and a black screen

This template does not contain the grey background on article elements yet, have yet to decide if that will be a site wide feature yet.


This will be my first entry on my documentation of learning web design. I will just go over what I did and learned today.

So today I started tidying up a lot of my site. First I fixed a lot of my site wide styling. First by making everything nicer in css, then I began working on a site wide sheet. That wasn't pleasant until I learned about "<link>". Once that happened I quickly moved onto designing a navigation bar. For now I am trying out iframes.