Art Colleges FTW

I have been looking at different college/university websites to get ideas for a college themed page. The idea is that the themes wont solely be for the University of Hawaii but that other colleges will be able to take the template it make it their "own". Most big named colleges such as Stanford and UCLA have very simple layouts so I went to smaller art college websites and was impressed. They are after all an art school and it definitely shows in the creativity of some of the sites.













UCLA: Although I find it impressive that they are the "national champs", the confetti background seems a little much













Stanford: Very clean (+), plain (+/-)

























Corcoran: A good example of a clean simple site that is not considered boring. Good use of color (+)

Git-ting on my nerves

The "quickstart" portion of the Git SVN guide

I have used Subversion for most of my projects. However, for this project we are using Git. It took me a bit to understand the concept of Git. I did find a site that has a Git SVN crash course, kind of a "converters" guide to using Git. For commonly used SVN commands the Git equivalent is also given.

I encountered some problems using Git. When I used SVN, I would just do an update and it would get the newest changes. However, when I used Git, if I moved a file to say my desktop and did a pull the file would not get updated. After many trials to fix the problem, George advised me that using the clone command would be the easiest fix.

Git SVN crash course: http://git.or.cz/course/svn.html

Guide to Git: http://linux.yyz.us/git-howto.html

CSS: Google-ness

When I think of Google's "style" I think of clean, simple, very minimalist. I think of their colors: white and blue, and their containers with rounded corners.












My version of "Google-ness" applied to the Dorm Energy website.











Before

Header Text Image Replacement

The font used in image1 as the header seemed very bland. I changed the text to an image using the technique told by Chris Coyier. It leaves the text there but out of sight and displays the image. This allows search engine readability while being aesthetically pleasing.

.headerReplacement {
text-indent: -9999px
width: 600px;
height: 100px;
background: url(pathtoyourimage) #cccccc no-repeat; }


http://css-tricks.com/header-text-image-replacement/












after (with some other changes)

Gradients

I wasted a lot of time messing around with the colors. No matter what color I chose (I like green) it did not look appealing. I realized that all the sites I thought had beautiful colors used gradients. I did not want to manually create an image with a gradient and use it as a background like most tutorials advised me. I found this website that does it for you. It has made my life so much easier ;) .

http://tools.westciv.com/gradients/index-moz.html

CSS: What's your position?

The position property in CSS affects the way elements are positioned on the page.
position: value;

Values:

• Static: default positioning for all elements
  
• Relative: offsets relative to the default positioning
  
• Absolute: positions element based on nearest parent element or the corner of the window
  
• Fixed: same as absolute except parent element is always the window

http://www.barelyfitz.com/screencast/html-training/css/positioning/ has a simple yet helpful tutorial about positioning. It has great examples for each position.

References:
http://www.cssbasics.com/css-positioning/
http://www.barelyfitz.com/screencast/html-training/css/positioning/