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.
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.
For the final project, I would like you to design and code a single-page website for one of the following:
- A local or regional band.
- A world-famous band.
- A non-profit organization.
- A personal portfolio page.
- 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
- 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
- List of tutorials for designing Websites from the ground up in Photoshop - Pick the one that is closest to your vision.
Converting a Photoshop file to HTML and CSS
- Image Types and Usage in Web Design
- Week 5 Notes on preparing images for your Web site and HTML
- Week 6 Notes on HTML and CSS
- Week 7 Notes on CSS wrap up
- 'Pixel Perfect' Article
Web Typography Adive
Google Web Fonts
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.
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: http://www.tooft.com/wp-content/uploads/2010/10/internet-history.jpg. You may need to click on the image in your browser in order to zoom in.
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.
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 email@example.com if you have any questions at all.