Element Inspector

Assuming you haven't scratched your eyes out from the sight of comic sans, in this post I will be going to some professionally designed websites and looking at the actual HTML and CSS code that makes the websites look the way they do, and trying to figure out how they work.

The first site I will be going to to look at for elements is a site titled "If the Moon Were Only 1 Pixel". Unfortunately for those viewing this from school internet, the site is blocked for some reason (Personal Website content?) It is a very interesting website that shows a scale model of the solar system, truly depicting the amount of SPACE that is in between all of the planets in our solar system. The website even has a feature that lets you cruse along at a scaled speed of light, meaning it takes 8 minutes to get from the sun to the Earth, half an hour to Jupiter, and two hours to get to Pluto.


Of course, it would be very tedious to have to scroll all the way to every single planet when you just want to quickly look at the planets, and see how they compare to each other in size. At the top, there is a navigation bar that allows you to click on any of the icons that symbolize the planets, allowing you to jump to the planet, as you can see in the image to the left. The way this work appears to be simple, and I will explain it to the best of my ability.

Peering into the jumble of code present to create this site, I found the Navigation bar in the code, a simple list of links all named for a div. When the user clicks one of these icons, it jumps to the location of the "div" that is placed where that planet is on the chart. In the pair of images below you can see I have boxed out the table where it displays the links, and also the divs themselves, and underlined the names of the divs.

----------

The site also displays the would-be distance from the sun at the bottom. Interestingly, it allows you to choose from a variety of different units to display the distance in. This is from a small dropdown (or i suppose up?) menu that pops up when you click on the distance at the bottom. Selecting any of these causes the website to use some black magic javascript voodoo that I don't know entirely how works. Although, I do have a decent understanding of basic logic structure in coding, and can try to the best of my abilities to explain it.

Above is the actual code from the HTML, it doesn't reveal much about the inner workings of the site, but it is there nonetheless, and vitally important.

Above is the ultimate terror that is Javascript. from what I can see from it, it appears that the code assigns the distance of one kilometer to some distance in pixels, then, using the kilometer as a base, calculates what the distance would be for all of the other units of measurement, relative to the kilometer.

An interesting feature that the site contains, is a button in the lower right corner that will automatically scroll the image, to a scale speed of light, meaning it takes 8 minutes to get to Earth from the Sun, and around half an hour to get to Jupiter from the Sun.

Considering how LONG that it takes to get to the outer planets of our own solar system, I think that proves once and for all, that light speed, is just too slow.

Anyway, joking aside, this little trick appears to also use some demonic Javascript wizardry. This time unfortunately, I have next to no idea how this is working its magics. Maybe someone reading this who better understands java or just logic programming in general will see it and understand. There is also some HTML code where the button is, but that appears to only simply place the button in its place, and not actually affect the java in any way.

My Logo

Before the end of 2nd Semester we were tasked with creating a new logo for ourselves. Though this was a few months ago I still do remember a majority of the details and the process I went through to create my logo. In this blog post I will show you through the process that I went through to create the logo that I ended up using.

In case you had not noticed, the small icon displayed on the tab for my Blog Page (the Favicon), is a small flag. That flag is the flag of the glorious Empire of Matto. Long story short, many years ago I created a fictional alternate reality world where most of the world was ruled by massive nations, each nation was created, ran, and named after me or one of my friends. These nations were basically used to represent conflicts within our inner groups of friends. I took the idea of this and stuck with it, creating a flag for my nation as well as a very detailed history for the nation. The flag you can see is displayed to the right of this paragraph, that flag has been the basis for all other flags that I've made for my great nation, and the colours have been used as a basis for many of the designs for my projects and also for my logo.

The first step to creating our logo was what many would expect, simply brainstorming an idea. It took me a while to get any decent ideas, but eventually some started flowing into my mind. To the left of this paragraph you can see my first primitive sketches. Various ideas sprang to my mind, using the flag to represent the lines across the T's of my name, as well as simply having them be on the tops of the T. Another idea that I rather liked was a tank blasting through a wall with Matto displayed in big letters above the hole blasted by the tank, however that idea would have been very complex and difficult to actually make. After scrawling some ideas onto the piece of paper that I scanned and have displayed on this document, our class as a whole spent a day showing the designs we had come up with and asked the other members of our class what their opinions of the designs as well as for ideas for a logo based off of those that we had already created. On my sketching image, you can see to the bottom left there is another design, simply Matto written in cursive with the Imperial flag hanging off of the tail of the O. That idea is the idea that I based my flag off of for the most part, although there were parts of it that I had changed.

This picture isn't as significant, before making the final draft of my logo before designing it on the computer I wanted to practice writing my name in Cursive script. Considering I hadn't written hardly anything in cursive for several years, I hope one can understand why I had to practice writing my own name in cursive, when it was in a much larger size than that needed to simply sign a small dotted line.

To the right, you can see the final sketch that I made of my logo, before going onto the computer to actually create the logo in Adobe AfterEffects. This was the last hand written thing that I did for the project. From the tail of the O you can see the colours of the Imperial flag fly off into the distance, which I had based somewhat off of the idea of having the flag hang off of the tail of the O. As you can see, my cursive handwriting still isn't very good, even after practicing, but hey, this wasn't simply just writing it, it was writing in very large bubble letters, and that's much more difficult to do.

Finally, now you can see below this paragraph, the final result of my creativity. Once I had the idea solidified in my mind, it was a simple task of going into Adobe AfterEffects and recreating the logo, with a crisp, fine look to it. Personally, I am very satisfied with the end result. The logo is simple, and displays the colours of the Imperial Flag, and pleasant to look at if you ask me.

Google Fonts

We recently learned about Google Fonts in class. With Google Fonts we can use other fonts that aren't the small selection of fonts that we've been restricted to using before. The process is also rather simple as well. To the right you can see this image of one of my recent projects with fonts from Google Fonts applied to it, giving it a more unique feel than a site would be using just the fonts that we were previously restricted to. Below the image of the site itself, you can see a screenshot from my CSS code, showing the import text that allowed me to use the fonts from Google Fonts, and below that you can see the actual font itself being applied in the CSS. Below I will make a short tutorial-thing showing how to actually use google fonts.

When you get to Google Fonts it will display a list

of all of the different fonts as seen in the image below.

It's simply a matter of finding a font that you

want to use, below is one of the fonts that I 

used in my project that is shown up above.

Once you find a font that you like, click the

Quick-use button shown in the image below.

Doing so will bring up the page pictured below which

shows all of the different styles of that font that are

available for usage. Only select the ones that you will

be using, as when you have more fonts, and different

styles of one font, your page will take longer to load.

Once you have selected your fonts and all the

different styles of the fonts that you want, scroll

down and it will show you the code that you import

into your CSS, as pictured below. Then you simply

paste it into your CSS, and there you go, you can use

the font that you chose!

CSS Zen Garden Jabberwocky

This project was an interesting project. We were given a pre-made HTML sheet, and were instructed to customize the website using only the website's CSS. The idea of this came from a site known as CSS Zen Garden, which basically does this on a very large scale and creates a very large amount of different website layouts using only CSS off of the same HTML template. Click Here to go to the actual CSS Zen Garden Website. The specific HTML text we were given was the text from Through the Looking Glass, and What Alice Found There, by Lewis Carroll. The first step of our project was to draw a sketch of what we wanted our website to look like once all of the CSS was applied to the website. To the right of this post you can see the sketch that I originally drew up for my site. After opening up the HTML in Dreamweaver I then modified the various different divs to set all of them to be placed and coloured as I pleased. I also added the image of the Jabberwocky's head into the background of the text, and added a spooky forest background to the entire site, as you can see below. The hardest part to designing the site was probably getting the Jabberwocky's head to stay where I wanted it to be placed, mainly because of the long antenna that it has. I learned from this just how much stuff CSS truly can do, and how to harness the true power of CSS to manipulate the design of the site without even touching the HTML. This project in the end took about 2 or 3 days to do I think. Once the general idea has been put into your mind, it's a matter of finding which things need to be edited and applying it to the entire site, until you get the desired design for your site.

Good and Bad websites

Excessive background noise, just look at all those ads! Some of them you can't even tell if they're ads and they look like they're part of the content.

This site has hardly any background noise! AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA!!!

Is there something I'm supposed to be able to click on?

Very clearly, I can click all of that red text. Thanks SCP Foundation!

What? What is all of this stuff supposed to be organized into? I get a headache looking at this site.

(Plus, I really don't like memes)

Very well organized, you can clearly tell what's what. No headaches.

Good old Memory Alpha. Making excellent usage of Conventions to help make the site more fluid.

Don't Make Me Think - Unnecessary thinking

What is outlook.com? Why does it say in the classroom? What is Explore?

Where do I search for stuff? Where do I view the school calendar.

Why is Money highlighted? Why would a news site have an opinions section?

The Paint Place Project

This project was a simulation of a client project. We were given the specifications and guidelines for a website to create for a made up Client named Peter Piper, with his independently owned business called The Paint Place. We also were tasked with creating our own logo for The Paint Place, I used the logo I made as a banner for the website.

We started off with finding out what the "client" wanted his website to contain, and what he wanted it to look like. We then planned out what our website's design would be on a piece of paper by sketching it, along with the logo as well. Once I finished sketching, I used Adobe Illustrator to create the logo for my site, and then used Wordpress to find a theme similar to that which I designed, and created a Child Theme based on that theme to use for my website to make it look more like I wanted it to look.

During this project I learned about how to make the menus and side bars contain certain content that I wanted them to have. I also now better understand what to expect when working on a website or other project for a business client.

There are some certain small parts of the menu that I would have liked to have made somewhat differently. If I could I would have made more posts, but wasn't exactly sure what to post about, so they ended up being mostly just random gibberish about quality and customer service. Being that this is only a made up scenario, not all of the things on my site are 100% serious of course, and in the event of an actual client project I would take a much more serious attitude towards the project. I am however, pleased with the overall outcome of the website.


From this project I have gained the experience of having to create a website based on more specific guidelines. I have created a much better method of planning the design of a site. I have developed a better understanding of creating a child theme for Wordpress as well, and also have a better understanding of creating multiple pages for Wordpress.

Overall I feel I did a good job with the site, and I think I will do even better on the next project that I receive.

Here are the remaining Images from the other pages of the Paint Place Site: