If you'd like to see this advice in action, here's an hour long stream of me sketching out and constructing a map, answering viewer questions along the way:

Sidebar scroll script based off of this
Iframe relative sizing based off of this
Image rollover based off of this

Rubric Requirements:

• Original Graphic: Logo in the bottom right (or the banner on the intro page)
• Link to Homepage: Logo in the bottom right
• Embedded Rich Media: Top of this page
• Image Rollover: About halfway down the construction page

In class I asked if I was required to cite sources, and this is pretty much why. All of the information on here is from my own personal experience, and all the links are simply additional reading material. I'm extremely proud of the work I put into the content of this project, even if it is only 5% of the grade. While parts of it might not be applicable to anything outside of minecraft, I think the design and aesthetics section especially can be relevant to anyone working with level or even landscape design in other contexts.

As for "extra" work not dictated by the rubric besides spending way too much time writing, the site's layout is based off css grid and JQuery. The grid code is mostly an extension of my project 2, with some changes and optimizations, so I'm not especially proud of it. Something I am more proud of though is the sidebar.

As I knew each page would be long, I elected to go for a vertical navigation menu that would follow alongside the page rather than a horizontal one that would cover the top lines of text as it followed. Immediately I felt that adding "position: fixed;" wasn't really enough to differentiate it from my project 2, so I worked on a dropdown menu for each option giving a visual preview of each topic. At some point I decided to put my logo in to fill the empty space in the sidebar, only to find that in order to have it at the bottom of the screen it would end up leaving the sidebar and going into the footer at the bottom of the page. My initial soltion was to offset both the menu and the logo by the size of the header and footer, but it felt weird in the middle of the page and on a smaller window the two would sometimes overlap. I ended up looking into a basic JQuery script that would toggle an element from position: fixed to absolute at a certain scroll height, and modified it to instead modify the fixed top/bottom offset based on the scroll distance to either the top or bottom of the page. The result is a lot smoother and cleaner overall.

Back to Intro Last: Submission