Week 5 Online Notes

Using Social Media Icons, Embedding Flickr and Working with CSS3

Social Media Icons

FlickR is a great place to search for free images

FaceYourManga– Create an avatar

iStockPhoto– you have to pay for these, but there are some nice concepts

Useful links for CSS3 Standards

CSS3Generator Generates a variety of new code used in CS3

ColorZillaGradient Generator– I'd use CSS3Pie below first, but this will generate gradients compatible with most browsers

CSS3Pie– Super cool tool to generate gradients, drop shadows and rounded edges

Building Sliders with Javascript and JQuery

Wow Slider is free to use for non-commercial sites- Tutorial Here

Really Simple Slideshow is pretty self explanatory


Week 4: Online Notes

Color Type and Other Design Ideas for Your Website

Use the following sites to get some design ideas for your project.

Use of Color, Balance and Unity

Matt Bango- Like the minimalist design here and the use of contrasts

Being Wicked– Creative way to create a theme using interesting words

Davroc Interiors– Scroll over the images. Easier to do than you think!

PANDR– Bold design!

Snog Yogurt– Pink!

Milan Chudoba– Lot’s of good ideas here in terms of type and color selection

David Hellmann– Like the idea of using an avatar. Just search on “create your own avatar” Here’s one to get you started http://www.southparkstudios.com/avatar

Black and White Concepts

The Fashion Photography– Great Layout

MediaFlex– Some color but a nice example of contrasts and use of Type

Examples of Text Designs

125 Creative Text Designs

25 Creative Resume Designs

Brands of Words– A great place to get ideas for typography designs

Week 1 Online Notes

The Tools of the Trade

Working with the web requires that you become familiar with a variety of software. The good news is that most of this software is Open Source and free. Below is a list of commonly used items that you can download and play with to familiarize yourself with web development.

General Links

Tutorials to Learn Code

W3Schools (a great set of tutorials and a reference for when you forget)

CodeAcademy (learn all sorts of code including HTML, CSS and Javascript)

This is a list of ports that transfer data on the web

TCP and UDP Ports

Links to Common Developer APIs

Twitter https://dev.twitter.com/
Facebook https://developers.facebook.com/
Google Maps https://developers.google.com/maps/
FlickR http://www.flickr.com/services/api/

Below is a list of Free Software that you can use.

Webserver Tools

FTP Clients

Filezilla (I recommend this one)


The Linux Operating System

Ubuntu (Ubuntu is the first choice for Linux newbies)


Web Server Installations

These two options make it easy to install everything you need to run a webserver.

WAMPserver (Apache, MySQL, PHP for Windows)

XAMPP (for Mac and Windows)

These are the separate components you need for a webserver if you prefer to install each of them without using the bundles above.

Apache Server


WYSIWYG Programs

KompoZer (Just dowload, unzip, and click on the .exe file)

Tools for Graphic Design

General Purpose Links for Photo, Audio and Graphics Tools

WebJournalist has a great selection of tools

Text, Photo and Graphics

Open Office (Just like MS Office, only free)

Gimp (Great alternative if you can’t afford Photoshop)

InkScape Similar to Adobe Illustrator

Useful Tools for Web Design

Web Fonts

Google Fonts API (let’s you add more than the standard fonts)C

Color Pickers for Web Design

Adobe Kuler

Color Matching Tool

Color Picker for Hexadecimal Color

Grid Design

The 960 Grid System

Mocking Up Web Pages

Balsamic– used to develop web page mockups

Dummy Text- Generators

Content Management Systems