falinwang / photography

SI 539 Web Design

Write-up of falinwang.github.io

Name: Roy Fa-Lin Wang Class: SI 539 Web Design Date: 2018/12/15

Final Project Specification

Required Minimum Content

1. Submit a (minimum four page) site. All of the pages must use a common header, footer, and navigation.
2. The navigation must clearly display the current page.
3. Each page should contain a main section that can be reached using a Jump to Content option with the first tab on the page.
4. With the exception of a landing page, each page must have a minimum of two paragraphs of text or two pictures or a combination of picture and paragraph. This is a minimum.

To-Do:

• All pages have header
• All pages have footer
• All pages gave navigation
• Show current page at navigation
• All pages contain a main section
• All pages have “Skip to the Main content”
• Each page has at least two paragraphs or pictures or a combination of a picture and a paragraph

Required including documentation

I. A description of where to find at least two uses of JavaScript and/or jQuery.

1. Lightbox photo gallery using javascript and jQuery
   1. Location: Work - Photography (works.html)
   2. Description: I use what I learned in class to display my photography with Lightbox that user can click on the small pictures and see the bigger image and the description under that picture.
   3. Sources:
      • Assignment - Lightbox photo gallery.
      • I use the starter code which teacher provided and follow the instructions and use the javascript and jQuery file provided by “Lightbox by Lokesh Dhakar “
      • The file I used:
        • lightbox-template.html
        • style.css
        • lightbox-plus-jquery.js
        • lightbox.css
   4. I changed the photo links and the color and border in css and then integrated the css into mine.
2. Contact form and validation using javascript and jQuery
   1. Location: Contact - Contact Form (contact.html)
   2. Involved files and sources:
      • contact.html
      • contactform.js
      • <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
   3. Description: To provide user a contact form to send email to me, I add the contact form that can validate the input with Javascript and jQuery and then send email to me with the service provided by [Formspree](https://formspree.io/).
   4. Source:
      • Tutorial by Kevin Simper Making and validating a working Contact Form with JavaScript - YouTube
   5. I follow the tutorial to add the jQuery and JavaScript. I changed the variables, items , the validation, and the prompts. And also changed the css.

II. A description of where to find your uses of grid and/or flex box.

1. Using Grid for display the photos in Lightbox
   1. Location: Works > Photography (works.html)
   2. Description: I use grid to divide the page into three columns evenly that my photos can be display prettier.
2. Using Grid to locate page into two sections
   1. Location: Contact > Main (contact.html)
   2. Description: Because I want the page can display the icons and the contact form in each side of page, I divide the page into two parts using 1fr 1fr.
3. Using Grid to locate the icons
   1. Location: Contact > Left Side (icons) (contact.html)
   2. Description: I want to put six icons in orders so grid would be the best choice to locate these icons. I use grid-template-areas to assign each icon to each area and group them.

III. A description of your responsive design choices and how to trigger them.

• My responsive design is based on the size of width changes. Two triggers include the width is wider than 1024 pixels and the width is wider than 680 pixels. The main change is on the navigation bar and logo and also for the items rearrange for different devices users.

IV. Axe and Wave

• Home: axe
  • Elements must have sufficient color contrast: Element's background color could not be determined due to a background image
  • I have changed the background to black and the text color to white and I use the dimmed background image so the color contrast of text should be good.
• Works: WAVE
  • 3 Errors caused by Lightbox
  • I have checked the Piazza and these errors don’t need to be fixed for now.

---

Process of Building

Project with HTML and simple CSS

Sep 21 - Second Commit

• Criteria:

1. Content: The site is well thought out and there are no glaring omissions in content. You must have at least four separate pages that are linked via the nav section.
2. Images: There are at least 10 images on your site. At least five of those images must be local and stored in a separate folder from the HTML.
3. CSS: The navigation section is styled and the css code is in a separate file AND separate folder from the HTML.
4. The site validates: The site must validate via validator.w3.org.
5. The site is succesfully hosted: There can not be any broken images or links.
6. Other: Make sure to check the grading protocols for possible deductions. https://umich.instructure.com/courses/244017/pages/grading-slash-attendance-slash-protocols?module_item_id=513709

Project with Layout

Oct 5 - Third Commit

• Criteria:

1. Use grid or flexbox for significant portions of one page on your site (e.g. layout is done with grid or images are displayed using flex).
2. Use FontAwesome on one page of your site.
3. Use Google fonts on one page of your site.
4. Use background image(s) on one page of your site.
5. Utilize best practices in accessibility (check on wave)
6. Validate your code and fix errors (check on w3)

• Changes:
• Applied grid on contact.html and flexbox on works.html

Project with Responsive Design

Oct 26 - Fifth Commit

• Description:

Using media queries, create three distinct layouts. These new layouts can be based on viewport size, orientation, or device type. It is important that the actual functionality is changed, not just size and/or colors.

Design at least three unique layouts

Write at least two media queries using the mobile-first paradigm to implement your designs Please make sure to follow the rubric below. You MUST have all of the portions complete to receive credit on this assignment. If you do not receive full credit you may resubmit up to two additional times as long as they are within 10 days of the original deadline.

• Criteria:

1. One view that is different in layout from previous version
2. Third view that is different from other two via layout and/or user preferences.
3. At least one media query rule is not based on width.
4. Site works successfully on actual mobile device, not just simulator. (Test it!!)

Changes so far:

• Change the default layout to mobile-first version
• Add width based media query with (1) width < 680, (2) 680 - 1000 and (3) width > 1000
• Add orientation media query (landscape)
• Add Google embedded PDF version of Resume on biography.html
• Add more photos on works.html and change the title
• Change the background image layout on index.html
• Position About.html
• Add current-page with yellow color for user to locate the page
• Add downloadable resume on biography.html
• Position about.html
• Add RWD
• Add pictures on works.html
• Add "Back To Top" footer
• Remove the big space under contact.html
• Add lightbox on works.html
• Add "Jump to Content" (Skip to the main content)
• Add "Jump to Navigation" (Skip to navigation)

To-Do: