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.