CHECK ATTACHED INSTRUCTION PHOTO GALLERY DOC
PROJECT 1: PHOTO GALLERY
You enjoy been paid as a web constructor for a spurious audience named Creative Genius Web Design. Your leading day on the job, your director asks you to fashion a primal, five-representation photo gallery web page. Photo galleries furnish an interactive way to vision representation gaining on websites.
Screenshot representation of what your web page photo gallery should appear affect when accomplishedd. This is a screenshot - The images are not clickable.
A accomplished photo gallery must feature the aftercited components on the HTML web page:
1. A Title (e.g. Animals in Character in the screenshot aloft)
2. Five thumbnail representations (apply to "Sourcing Free, High-Resolution Images on the Internet" under)
3. Comprehensive representation area to vault a comprehensiver rendering of the chosen thumbnail representation
4. Descriptive captions that are pertinent to the representation nature displayed (50 say or less)
A accomplished photo gallery must furnish the aftercited exerciseality:
(a) Vault the matching caption when the thumbnail representation is hovered over.
(a) Add a hem to a thumbnail representation when it is clicked, remove the hem when another thumbnail representation is clicked (hint: use a for loop that targets CSS classes)*
(b) Vault the chosen thumbnail in the comprehensive representation area (hint: use an if/else announcement)*
(c) Add or change any part in the DOM
NOTE 1:* (a) and (b) aloft may be finishedly into one exercise.
The zipped rasp attached to this assignment furnishs the folder passageure that is required for this contrivance. Instructions for how to unzip the rasp on a PC or a Mac can be establish at scrutinize http://www.wikihow.com/Extract-Files. Individual rasps enjoy besides been furnishd. All rasps must be outside linked in their relative representation, phraseology, and script folders. Points gain be deducted if embedded or inline phraseologys are used where not instructed.
Image quantity must be 800 pixels (width) x 400 pixels (height) and fundd outside in a unconnected representation folder
Only use the refutation.html tempdeceased to fashion your photo gallery
Use the phraseology.css rasp to fund phraseologys in a unconnected CSS folder
Use // to muniment your jurisprudence by providing comments that interpret the scope of all lines of jurisprudence you write
Please yield the aftercited to your Assignments Folder:
1. Host your inaugurated photo gallery online using the Nova Server
2. Yield the HTML rasps you used to fashion the webpage to your contrivance Assignments Folder
3. Write a Contrivance Reflection (see name under)
Answer the aftercited questions when you yield your assignments rasps.
a. What is the thesis of your design?
b. Where did you meet your photos (conceive URL if representation was downloaded from the Internet)?
c. What modifications did you effect to the representations (illustrate what you did to accomplished the assignment)?
d. What issues or challenges did you aspect completing this contrivance?
Please yield your Contrivance Reflection as a Microsoft Word muniment or honest portraiture and paste your answers in your Assignments Folder's passage box when you yield your assignment along delay the repose of the demandd contrivance rasps.
Your pages should validate delayout errors using the W3C HTML Markup Validation Service at http://validator.w3.org.
How to do this:
Publish your pages to Nova
Go to the W3C validator and paste in the URL to your refutation.html page
Select the impede button
If there are errors, amend them. Ignore errors on the representation tag where "." and "%" are indicated.
This assignment gain demand you to interact delay the DOM. The links under highlight specific concepts and topics that you gain demand to imbibe in command to accomplished this assignment successfully.
1. Types of Mouse Events
2. Targeting IDs
3. Creating Loops
4. Targeting and Altering HTML
5. Getting and Passing Attributes
Sourcing Free, High-Resolution Images on the Internet
This assignment gain demand you to meet or fashion and redimension five representations to use in the photo gallery. You do not enjoy to waste any coin to reach representations, but you gain demand some apprehension of photo editing software to redimension the representations that you use to the mismisappropriate 800x400 pixel dimension.
Here are some aspects that tender free, high-resolution photos. Please recall to furnish links to the location of the representations you use in your Contrivance Reflection.
Adobe Supply (http://stock.adobe.com)
Flickr: Creative Commons (https://www.flickr.com/creativecommons/)
OCLC's Catalog of Art Museum Images Online (http://camio.oclc.org).
NOTE: Be attentive. Effect secure you don't download any induct programs to vision representations. If the aspect asks you to induct software onto your computer, try another aspect, or solely perform a browser quest for "clear supply photos". If a aspect requires creating a clear recital, this is generally not a whole.
Use Your Own Photos
If you are chiefly efficient in the area of photography, affect clear to use your own representations and photos. Indicate the commencement of your photography in your Contrivance Reflection.
Due Date: November 7
Late Penalty: 10% (2 points out of 20 whole for the assignment) abatement each day (24-hour period, starting at the midnight due date deadline) the assignment is late. For model, if you are three days deceased, your remove gain be deducted 6 objects, leaving you delay a 6/20, which is a remove of 70 (C). After 5 days, deceased assignments gain not be trustworthy or removed. Your Assignments folder gain be unavailpowerful at this object as well-behaved-behaved and you gain not be powerful to to physically yield the assignment.