Final Project - VISC210

Final project requirements

In this lesson, we'll be going over the requirements for your final project, which will be to build a 3-page website.

Final Assignment

NOTE: The following instructions apply only to the ONLINE VISC110, and ont the in-class VISC110.

A up until now, we have learned the basics of building a website from Photoshop design through HTML and CSS. Now that you have the essential building blocks for creating your own webpage, we will be spending the last few weeks doing just that. I have had some students tell me that they are either having trouble learning the material or falling behind with the homework assignments. You may use these last few weeks to catch up on any assignments you may not have completed and also to ask me specific questions about problems you are having.

For your final project, I would like you to combine all the lessons that we have learned so far into a single-page website. Below is a list of the requirements for the webpage.

Project purpose:

For the final project, I would like you to design and code a single-page website for one of the following:

  1. A local or regional band.
  2. A world-famous band.
  3. A non-profit organization.
  4. A personal portfolio page.

Technical requirements:

  • Start by creating the layout in Photoshop. Your Photoshop file should be very well organized, like the ones that we went though in the tutorials. Make sure that all your layers are labeled and that you group sections where appropriate.
  • The HTML file, image files (JPG, GIF, and PNG), and CSS file should be contained within a main folder. Basically, you should be able to move this entire website on a jump drive or uploaded to the web without having files scattered all over your hard drive.
  • Label your main folder as (first initial)(last name)-final. For example: jearley-final
  • Your HTML page should be labeled index.html
  • Do not use any capital letters or spaces in any of your file names. Everything should be lowercase, and you should only use - and _ as special characters. For example, do not name an image like this:  Background Image.JPG but rather background-image.jpg
  • All of your non-HTML files, such as JavaScript, CSS, and images should be in their own folders inside of a folder called assets. For example, inside your main site folder, you will have index.html and a folder called "assets". Inside of the folder "assets", you will have separate folders for "images", "css", and "js" for javascript.
  • You should incorporate Fancybox or a NivoSlider gallery plugin into your page.
  • Please include your layered Photoshop file so that I may look at your design.
  • Include non-web standard fonts in your webpage either using Font Squirrel or Google Webfonts. Do not create image based text.
  • Make sure all of your CSS code is contained inside of a separate .css file, and not within the HTML pages <style> tags.
  • Use Filezilla (or any other FTP client) to upload your website folder using the login that I've provided.


Here are some useful links and tutorials to help you complete this final project (These are all review, BTW):

Designing a site in Photoshop

Converting a Photoshop file to HTML and CSS

Nivo Slideshow


Web Typography Adive

Font Squirrel

Google Web Fonts

Homework Catch-up

Please look over The notes from: past lessons to see what is required. If there any assignments that you are late on that you are now turning in, please deliver them to me in a way that they were specified in the past weeks notes, and send me an e-mail, letting me know that you have turned them in. Also includes participation in discussion boards.

Final Test

I will be posting your final test in Blackboard under class sessions. It will be made available for the remainder of the semester, but you have one chance to take it and will have an hour time limit. It will be an open note test and there will be 40 multiple-choice, true/false, or matching questions. The information for the test will pulled mainly from Week 2 lesson. Don't worry about watching any of the videos or external links found in those lesson, just the text.

You should also look through the history of the internet in this image: You may need to click on the image in your browser in order to zoom in.

Overall, you should know about the basic history of the internet, the basic differences in terms of overall function between HTML, CSS, Javascript, PHP, MySQL, and XML.

You should brush up on correct syntax (structure) of HTML and CSS, as you will be given examples of code that you will need to identify errors in.

You will have until the last Wednesday of this semester to take this exam.

Final Grade

Your final grade will be determined by the following three things:

  • Your score on the final test
  • Your participation in discussion boards
  • Your completion and delivery of the homework assignments
  • Your completion and delivery of the final project
  • All assignments that are being turned in late will be given a 20% deduction. However, if you have a very strong final project, this should not have to big of an effect on your final grade.

If you do feel like you're struggling with this class, by contacting me and letting me know what specifically were struggling with, I will be much more lenient, since we're making an effort to do well, which is the important part in my opinion.

As always, e-mail me at the if you have any questions at all.

Good luck!


As always, please email me if you have any questions!