Building a Website

After eight weeks of designing, updating, and maintaining a website, I still have a long way to go. When I started, I had no knowledge of HTML 5 or CSS, and my initial site was very plain. I've added color and what I think is a user-friendly layout, but I expect I'll never be done making improvements on my site; even as I write, I can see a lot of clumsy formatting in both my HTML and CSS that needs fixing.

Looking back, I can remember a lot of the steps I took to get here. Several weeks ago, I struggled to implement "sticky" positioning. I wanted a navigation bar that remained at the top of the window when the user scrolled down, but at the top of the page, would sit below my page title. I found two possible solutions: implement a script to change the positioning attribute as the page scrolls, or use a position attribute new CSS: "sticky".

I could write a fairly short JavaScript file to accomplish the same task; all I need is to set the position of my <nav> element to "fixed", and create an event listener to update its position whenever the user scrolls the page. However, this involves a lot of testing to implement and requires that I make sure it still works on all browsers whenever there is an update to anything.

On the other hand, "position: sticky" works exactly as I wanted; while the HTML element is positioned below the top edge of the client window, it behaves like the "relative" position, but when the element would otherwise scroll off screen, it behaves like the "fixed" position.

I like the way this works; unlike the JavaScript solution, this is designed to have a specific function within CSS, and as CSS is updated, this attribute should maintain that function. Unless you have a very large monitor, you can see it in action as you scroll down this page. This was as much a triumph as it is an example of how I need to continue updating my site; "position: sticky" is not yet supported by all browsers, and a more inclusive solution would involve writing that script to ensure that my site looks the same across all browsers.

I have yet to implemenet JavaScript on my site, and have encountered a major roadblock on the way to doing so. In my spare time, I've been working on two browser games using JavaScript: a text adventure and a Tetris clone (at the time of writing, an early version of my text adventure is available on my Projects page). They both work as intended FireFox 42 and Internet Explorer 11, but not in Chrome 46 and Opera 33. I suspect that I could work around the issue by using JQuery, but I hesitate to do so until I understand why the games don't yet work in JavaScript alone.

I have a lot of work yet to do on my site; making the layout more friendly for mobile devices, adding JavaScript, making the different pages more distinct from eachother, and probably many things I can't yet predict. Working with the dev tools has been a very fulfilling process; I love to see the results of my work so quickly and to change it so easily. I'm looking forward to taking care of my site, writing new blog posts, and creating something I feel proud to share with the world.

Previous: Computer Memory