Assignments

Assignment 1 - Create your homepage - Due: January 24, 2012

  • Create a webpage named index.html
  • Do not use a table for the page layout. Do not use the font tag.
  • Use a consistant color scheme. You can find color schemes from COLOURlovers, Color Schemer Gallery and Adobe kuler . Other color resources are available.
  • Add an image. The image should be inside of a folder called images or img.
  • Include your vision statement. List all of the things that you would like to learn during this semester.
  • List the tools that you currently use to design a webpage.
  • Place links to the course homepage and to the Multimedia Department
  • Create another webpage and list your favorite websites and what it is you like about them. Place a relative link to the homepage.
  • Place a relative link from your homepage to the page that lists your favorite webpages.
  • Use CSS if you know it. You may use some of the tutorials from Lesson 2 to help with styling your page using CSS.
  • Upload The Page
  • Correct this file
    • Add a DTD
    • Fix the errors
    • Validate it
    • Provide a link to it from your homepage.

Assignment 2 - CSS Styling - Due: January 31, 2012

Part 1:

  1. Download this webpage: assignment2.html
  2. Add CSS to this style sheet: assignment2-styles.css
  3. Add comments to the stylesheet
  4. Use pixels or ems for the text size
  5. Specify a list of fonts as well as a generic family to be used for the text
  6. OPTIONAL: You do not have to do this - The links inside the div id="navigation" should be different from the content links.
    • Make the navigation links horizontal. To do this you will need to add #navigation li as a selector
  7. Style each header (h1 - h6)
  8. Add styles to the special class
  9. Modify the leading on the paragraph text
  10. Modify the bullet type on the unordered list
  11. Upload it.
  12. Add a Link to the page on your homepage

Part 2

  1. Download this webpage: assignment2b.html
  2. Add CSS to this style sheet: assignment2-styles.css. Make it look the way you want it. Use any fonts, colors and images you desire. Here's an example
  3. Upload it.
  4. Add a Link to the page on your homepage

Assignment 3 - Applying CSS - Due: February 7, 2012

Part 1:

  • Create a web page
  • Use an external style sheet
  • Do the following using CSS:
    • Add a background image to a page that repeats horizontally across the y-axis or vertically down the x-axis (background-repeat)
    • Add a background image to an element
    • Create a button like css navigation. It can be horizontal or vertical. Here's an example.
  • Upload it.
  • Add a Link to the page on your homepage.

Part 2:

Assignment 4 - Create a 2 or 3 Column Layout - Due: February 14, 2012

  • Create a web page and an external CSS file
    • Use absolute positioning OR float to position the navigation column.
  • Do the following using CSS:
    • Add comments to your stylesheet
    • Create a two or three column layout
      • One column for the navigation
      • One column for the content
  • You can use this webpage for the 2-column layout.
  • You can use the webpage for the 3-column layout.
  • You can use any webpage for your 2 or 3 column layout.
  • Use the @font-face for at least one of the fonts in your webpage.
  • Use at least one background image in an element.
  • You will only create 1 web page for this assignment. It will be either a 2 or 3 column webpage.
  • Include W3C XHTML and CSS validation links
  • Validate it
  • Upload it

Assignment 5 - Table Conversion/Mimic Design - Due: February 21, 2012

Assignment 6 - Template Based Site - Due: February 28, 2012

  • Create a SSI template based site OR a Dreamweaver template based site consisting of 4 pages.
  • Use one of the layouts supplied with the book or use your own.
  • Optional: Use Dreamweaver's CSS Panel to add color and/or images to the page. The only requirement is that you use a consistent color scheme.
  • Include W3C XHTML and CSS validation links
  • Validate it
  • Upload it

Assignment 7 - Create an Accessible Form - Due: March 6, 2012

  • Create a form with at least 3 fields. One field should be an email address field.
  • Use accessible tags such as label, fieldset and legend.
  • Style the form using CSS. Do not use a table.
  • Submit the form to the following: http://webhowto.awardspace.com/process-form.php
  • Add method="post" to your form tag.
  • Upload both files to test it.
  • Here's an example.
  • Use the tutorials from Lesson 8 for help on this assignment.

Assignment 8 - Use 2 javascripts - Due: April 3, 2012

  1. Use Lightbox JS 2 to create an interactive image gallery with at least 6 images. When the thumbnail is clicked the larger image will show. Here's an example. Here's the folder structure.
  2. Use another script from on of the following sites:

Resources

Assignment 9 - Create an HTML5 Site - Due: April 10, 2012

Create a four-page HTML5 compliant website. You can choose the content, however it must be fully styled with no missing images, lorem ipsum text, or broken links.

Assignment 10 - Prototype Your Final Project - Due: April 17, 2012

  • This should be used for the Final Project. You should be in a team before doing this assignment.
  • Create the basic layout/look of the page using Photoshop, Illustrator, or use another application such as ConceptDraw WebWave
  • The site should have at least 3 pages.
  • The site should have a contact page, products page, images of the product.
  • You do not have to create web pages for this assignment. You will simply sketch/plan the site.
  • You should use this assignment to prepare for the Final Project.

Bonus Assignment 1 - JavaScript Form Validation

  • Use JavaScript validation for the form on Assignment 7
  • There are plenty of tutorials on the web about how to do this

Bonus Assignment 2 - Read and Summarize SEO/Ecommerce Articles

  • Find 5 good articles or blog posts about Search Engine Optimization (SEO) or eCommerce
  • Read Them
  • Create a web page. Link to each article. Summarize each article.
  • Find 5 good articles dealing with any aspect of eCommerce
  • Read Them
  • Link to them (use the same page you created earlier)
  • Create a PayPal account (optional)
  • Buy something online (optional)
    • If you do this, write about your experience. Did you enjoy it?
  • Write about a previous ecommerce shopping experience, preferably one that ended in a purchase.
    • Did you like it?
    • Was it easy?
    • Did you worry about security?
    • Did your order arrive on time

Bonus Assignment 3 - Become A Freelancer

  • This assignment does not require you to make a webpage. Everyone will recieve full credit for this assignment. Those of you who want to become a freelancer or start your own company are advised to complete this assignment.
  • Listen to podcasts about freelance web design
  • Read as much as you can about freelancing
  • Read as much as you can about starting and running a business
  • Read as much as you can about marketing
  • The Web Design Business Kit is a great resource.

Bonus Assignment 4 - Create a Donut Order Javascript

  • Create a JavaScript that:
    1. Prompts a user for their name.
    2. Takes their order for donuts.
    3. Writes the person's name and their total to a textbox or to a specific element using innerHTML.

Bonus Assignment 5 - Modify 2 Javascripts Animations

  • Find 2 animation or motion based scripts from Dynamic Drive
  • Modify each script individually. For example, you can make it animate faster.

Projects

Midterm Due: March 20, 2012

Final Project Due: May 8, 2012

A Horizontal Accordion! (Nested)