RCS Web Design

This video will show you how to shoot.

This will show you how to make the background appear as if its moving.

This tutorial will show you how to jump / bounce.

Learning to Debug!

You may work together to complete this assignment, but I expect each of you to complete the debugging process on your own computer.

1. Visit this site - there are 4 cats near the middle of the page.  Each cat contains a problem that needs fixing. 

2. Click on the cat to download the Scratch program.

3. Open the program in Scratch

4. Visit this page - to see what the problem is.

5. Fix the code.

6. Complete all 4 exercises

7. We will review the answers tomorrow as well as play the games you created.

Complete the below tutorials.  You can make them all in one program in you want.  I will grade these on Monday.

Rainbow Fish

Whirling Butterfly

Beat It

Dancing Queen

Haunted Scratch

This link will bring you to a tutorial that will show you how to create animations for your website using Photoshop.

Create a 3 page website (i.e. homepage, products, contact, etc.) You should create this for a non-profit organization of your choice (it should be a real one).  At a minimum the site should include: navigation, lorem ipsum for headings and paragraphs, links within paragraphs, a logo, a main image or video, and social links.  Try to be creative with the layout.  All four pages should have a consistent theme/look.  Your HTML and CSS should pass the W3C Validator before submitting. Browse this site for ideas.

It’s typical for a client to look through examples and point to concepts that they like.  Let’s assume that a client chose the below sites as one’s they like. It’s ok to not make an exact replica of each component, but you’ll want to get the general concept right.

http://adventureworld.ourentry.com.au/ - The Header

http://www.briabby.com/ - The content area, but smaller – main pic & text

http://www.tvsafety.org/ - The Footer

Each team member should create 1 of these components: header, main content, footer.  Your final submission should be 1 HTML file and 1 CSS sheet (not including reset.css).  

Below is an example of what the finished layout should look like.  You do not need to use the same colors as the examples, but your 3 components should all use the same theme/color combinations and similar font styles.

Use these sites for free icons, images, patterns, rounded corners, gradients, and font-kits.

Create a Header similiar (doesn’t need to be exact) to the one in the picture. If you want a different view here is the link to the site, click the French words at the bottom of the intro video to skip it. To clarify things I made a list of steps you should complete:

1. Copy your template folder into your Library/1000px folder

2. Rename the folder “Header - Centered”

3. Go to SubtlePatterns.com and find a background that you want to use. Download it and save it inside the images folder. It should be the only image you need.

4. Optional Step: Go to Font Squirrel and download a creative font to use for your large text.

5. In your index.html file create a div called “header”

6. Begin creating your code inside the header div

Assignment #2 August 30, 2012

Using the template we made yesterday, recreate the website displayed.  You can make it larger by clicking on it.  Use your HTML code sheet for help.  The CSS code sheet is on my desk, make sure you get one!  Read the list at the bottom for useful tips.