Monday, March 28, 2016

New Assignment: Portfolio Website

Hello Students,
Your next assignment is to create a portfolio website that documents the skills you have developed in this course, documents the work you have completed in this and other courses and displays your prowess with writing html and css and incorporating graphics into your website. Your portfolio site must be rich in graphics and utilize the techniques from our previous projects. You are also required to write about yourself and to complete some research and write about your possible future career path, whatever that may be. You may draw upon and incorporate work you have completed from any previous ROP class, or can include examples of any work or projects or other classes or even hobbies that you are particularly proud of.

The organization of this site should mirror the ROP Career Portfolio.  Review the portfolio handbook in detail for tips on writing your letter of introduction and creating the other sections of your website. Download the ROP Portfolio Handbook to use as a guide for creating your own portfolio website.

Portfolio Website Technical Requirements:
  • Your portfolio website must have the following sections:
    1. Front page: file must be named index.html for proper functionality. Think of this as the cover of a book about you. This page can contain your letter of introduction
    2. Career Development: This should contain your resume, your career research assignment and your letter of recommendation.
    3. Work Samples: This can be multiple sections, this should include graphic projects, animations, written assignments, lecture notes, artwork, previous website projects, etc. Anything you have created that makes you proud should be included as long as it's content is professional. Written details about each work sample must be included
    4. Contact: This page can contain your email and any other links or contact information, no phone #'s or mailing addresses
    1. This project must be created or edited with a text or code editing program such as Komodo
    2. This project must utilize a platform that provides mobile ready responsive design, W3C.CSS/Bootstrap/Etc..
    3. Each page must display your web page title or name in the <title> area and self explanatory, such as "Seth Wilsons ROP Web Design Portfolio"
    4. Each page must contain the HTML 5 DocType declaration that will enable you to use the HTML Validator, your pages should strive to validate 100%
    5. Each page must contain the character encoding meta tag for utf-8 and each page must be formatted for utf-8 when created
    6. Each page must contain either graphic buttons or text links to the HTML and CSS validators. Make sure you use the code to validate as HTML 5. Put these at the bottom of the page or incorporate them into your page design so that they are not obtrusive
    7. Each page should contain colors for text, backgrounds and link states
    8. Each page should use the same font families and use consistent sizing, spacing and style
    9. When complete the entire website must be less than 20Mb in file size

    Portfolio Content Requirements:
    • Have an example of everything required in the ROP portfolio handbook, letter of introduction, letter of recommendation, resume, work samples
    • Take a photo of yourself to include in the front page, this photo can be turned into an illustration with Illustrator or processed with Photoshop if you like. A camera can be provided upon request.
    • Research 1 possible career you are interested in and write a 1 page paper about the career, what does it involve, what is the salary range, what kind of education do you need, how do you break into the career. Include this in your "Career Development" section. 
    • Show your best or favorite work samples in the work samples section of your website, minimum of 3 examples must be shown, more is encouraged. You can include work from other art, design or ROP classes. Write a 1-2 paragraph summary for each work sample.
    • Include your resume and letter of introduction in the career development section if your website. Do not include phone numbers or mailing addresses, only email addresses for contact info.
    Design Style:
    • Your website should be professional and clean looking
    • Your website layout should be easy to navigate and text should be easy to read
    • Each page should show the same menu at the top for easy navigation
    • Your website should show good design choices for fonts, colors and style
    • Your website should demonstrate the techniques, skills and abilities you have studies during the course of this class
    • Your website should be viewable on mobile devices
    Website Flow/Organization:
    Your website must follow the flowchart below as closely as possible...



    Meeting the minimum requirements above does not guarantee an A+. You must put the time and energy into the project and really use it as an opportunity to shine. Include more material and content and information to guarantee a stellar grade. Must be original work that you created, create some artwork, take some photographs, make a movie, write a paper... this is your portfolio, make it shine.




    How To Add Validation to your website:
    Validating HTML and CSS is a great way to demonstrate your coding skills. Use the code below at the bottom of your page to add a validate button to your pages...
    This is an example of code to add both HTML and CSS Validate buttons to your webpage
    This is how the Validate code above will be displayed, you could also use an HTML5 logo and CSS logo to make graphical buttons for your validators

    How Your Portfolio will be evaluated:
    • Contains required content and format
    • Well organized
    • Free of grammar errors
    • ROP related work samples
    • Shows creativity
    • Shows skill development
    • Appropriate for use in job search
    • Professional yet creative appearance
    Final Portfolios are due May 6th!

    Grading for total of 10 points:
    20 Points - Portfolio website meets assignment specs and requirements
    20 Points - Portfolio contains all sections
    20 Points - Portfolio links work correctly and is error free (including spelling and grammer)
    20 Points - Portfolio has no missing graphics or elements
    20 Points - Portfolio turned in on time and is awesome and is 6Mgb or smaller

    Check out these collections of amazing portfolio sites for inspiration:

    Check out these examples of web page portfolio designs from previous students:





    Ok, stay focused, work hard and have fun!

     - Mr.W