- Date: Please check the due date in our Canvas class calendar
- html file uploaded to the server
In this assignment, you will create a single-page resume with jQuery parallax scrolling, mobile navigation, lightbox image gallery, and show/hide effects.
- Organize a current resume on paper if you do not already have a current one.
- Watch ALL demo videos to walk through the lessons (required) so that you can create your own functional, responsive mobile-first page with jQuery mobile navigation, parallax scrolling, and a jQuery image gallery. The first video gives you an overview of the assignment and its goals, and all required videos total about 2.7 hours.
- IMPORTANT: Complete the resume with your own UNIQUE imagery, information, and styling. Do not make a complete cookie-cutter duplicate of the instructor’s resume demo. This is a requirement, and you will lose points for not following this part of the directions.
- The page must be styled with design images and supporting text to add to the overall visual appeal of the page.
- READ ALL CHECKLIST REQUIREMENTS BELOW.
- responsive design for all device sizes (use CSS media queries where necessary)
- successful utilization of the following jQuery scripts: mobile navigation list, parallax (smooth) scrolling, lightbox image gallery
- use HTML5 doctype and valid markup
- style the page and its components using an external css style sheet.
- global mobile-first navigation
- minimum of seven section: page-header, profile, skills, education, experience, portfolio, contact
- full-screen page-header feature background image
- all original personal content relating to your professional resume
- design images and supporting text for the rest of the page
- nav, section, header, h1, h2, article, p, ul, dl (dt, dd), img tag usage
- external css style sheet
- sections as per demonstration
- specific styling on nav, section, header, h1, h2, article, p, ul, dl (dt, dd), img tag usage
- use Google fonts or other specialty web subscription font service for carefully chosen specialty fonts. Make sure that the text is still easy to read! Be particularly careful of using hard-to-read script fonts.
- Experiment with using some CSS3 techniques to style your text, boxes, and other HTML page elements. The instructor elaoborates on this in the video demonstrations.
Consider using a snapshot of yourself in your personal profile if you are comfortable with it.
Be sure to choose a clear, high-resolution image that can scale well on large screens for your full screen page header. Also, make sure that the image is appropriate for a resume while still reflecting your personality and professional character.
If time allows, consider experimenting with jQuery scripts that will allow you to toggle portions of your resume open and closed for economy of space (as in sections of a portfolio). Successful implementation of this will warrant extra credit ONLY IF all other jQuery requirements are present and fully functional first.
List of Resource Links:
- Morguefile.com for images
- jQuery library download page
- jQuery toggleClass API reference
- jQuery removeClass API reference
- jQuery slideToggle API reference
- general jQuery API reference
- Smooth Page Scroll (parallax scrolling) snippet from css-tricks.com
- Lightbox 2 framework for image gallery
- CSS3 Generator – use this generator to write code for your css3 styles.
- CSS3 Tools – see a list of other HTML5 and CSS3 generator tools!
See How It’s Done
The tutorial is comprised of 12 videos totaling about 2.7 hours. Depending on your learning curve, give yourself at least seven to twelve hours or so to complete it.