Google's Web Fonts

Today, (well actually yesterday but THAT DOESNT MATTER) we have been given a SOCK

 WEB FONT! A google web font site, to be precise. These are a wonderful thing made by the omnipotent Google for use by anyone. It's incredibly easy to use, too. The first step is obvious; you need to go to the Google Web Font site. Afterwards, browse through and find fonts you want. For my jabberwocky site, I selected "Eater" because it fit my desire for a spooky font for the poem. 

After that I wanted to find a font that would look fancy for the author and for the other background info. Both of these looked good and fit the bill for what I needed, but I picked the top font, "Spirax" over the bottom one, "Cinzel" because Jabberwocky originates from a book that features the same character Alice from Alice in Wonderland; since the movie adaption was by Disney, I figured a more fantastical font was in need. 

After you've picked the fonts you want, you click "use" (bottom-right) and then after a few more selection you are able to see how the font looks in paragraph or heading form. Something important to note is that if you go too crazy with fonts and font variety, you could cause your web page to load slower then it should, which might inconvenience your users (see my previous blog posts on preventing thinking).

Once you are happy, you need to pick how you put the fonts into your website; I personally prefer "@import" (totally not because I don't know how the other ones work)

In the CSS file for your website, simply add the code it gives you to the top and then save and check it out- boom! Fonts that aren't Times/Comic Sans/Wingdings/Papyrus! Like magic!

CSS Zen Garden Jabberwocky

The above piece of paper is my design for the CSS Zen Garden website. We were given a HTML file and a blank CSS file with some suggestions mapped out and spaces for us too use. We, without editing ANY of the HTML, had to create a 100% original interpretation of how the site should look. This was to help us learn the power of CSS, and that you don't need to use HTML to make a good website.

Thanks to the use of images and fluid width, I feel like I replicated my ideas very well (compared to how complicated it usually goes). With Photoshop and Illustrator used to make the background, I also used them to create the title and the lightning bolt for effect. In my mind I thought I would be able to seperate the content and the title with the bolt, and put the extra links and info next to the author, but it didn't quite work out that way. At the same time I think it works better how it came out.

One major thing I learned doing this project, and its hard to believe I didn't know about this before but somehow I didn't know that you could input images wherever you wanted through background images and/or AP Divs. I had always been under the impression that the only way to put in images was through HTML, which gave me a little concern when I started but thank goodness I found out. In fact, the background, hilariously enough, the hardest part of the project, but not because of the background images concept. I spent 1.5 periods in class (and even some outside of class! I was silly determined to see it work) just working on the background and it's respective images. There were too many things I wanted to put in and I spent so much time trying to make them all fit and have no border and all this other nonsense. 

All in all, the entire project took me about 6 class periods to create and I am very satisfied with the end result. It has a few hilarious issues with browser width, but otherwise it's good. In fact, you don't need to take my word for it, check it out yourself on my index!