Metal Toad University #7: First Site Done!

Want to join Metal Toad University? Join the Google+ Page.

Our 8th class was all about finishing the one page scrolling web page that we started on a few classes back. We had a some more styling to do and that wasn't surprising because most of the work on a simple web page is styling.

Right off the bat I did some minor styling tweaks that made the page shadow flow around the entire page and I changed it's color by modifying the box-shadow property. Then we worked on the main content body and added a semi-transparent white to the box behind it. This gave the text more contrast and made it easier to read.

We also introduced Pseudo Elements in this class. That's using the CSS syntax of

[classname or element or id]:before {
  content: "Some stuff";
}
[classname or element or id]:after {
  content: "Some other stuff";
}

But we weren't displaying text. Instead we were hiding the text of our newly created CSS-only elements and giving them background images. This allowed for some interesting skull icons and graphical borders.

We also added a text shadow and some color transformations on our links. That made them appear to pop up from the page when we hovered over them for a great effect. In modern browsers this effect is animated, but older browsers will still see the end results.

After adding a footer image, our site was officially done! Ok, it still needs a little more polish and we need to put it up on the web, but we are really close!

This week we'll be using a class that gets applied to the body that will let us create an entirely new theme. Then we'll have the students create their own themes and we'll create a button or control of some sort to swap the themes out.

Check out the site here!

Here's the video from last week: