Portfolio for my SI 206 class.

##Score Breakdown:

###Header Expected Score: 10 pts Explanation: All of my pages have a stylized header that includes my name (which is a link that takes you to the home page, and darkens when you hover over it), and the login/logout button. In addition, each of my four main pages (home, about, places, contact) have either a jumbotron or a background image to represent the header. Overall, my header has at more than 7 properties that have been styled.

###Footer Expected Score: 10 pts Explanation: My footer has been styled nicely. It has a background color that matches the blue of the navbar, and it also has a styled button on the right side that links to the homepage for U of M. There are more than 6 properties that are styled for the footer.

###nav Expected Score: 10 pts Explanation: The navigation bar has been placed at the top of the viewport and styled with pills for the desktop view, circles for the tablet view, and a dropdown menu for the mobile view. In my opinion, it looks pretty nice.

###Current page Expected Score: 6 pts Explanation: The current page will have its corresponding tab in the navbar change from black text to white text, have the background color change from white to blue, and have a thick border placed around it. I use the “active” class to determine what the current page is.

###Validates Expected Score: 10 pts Explanation: I received no errors from the w3 or wave validators.

###Photo Gallery Expected Score: 15 pts Explanation: The pictures in the gallery all have the same width, and all pictures in the same row have the same height. In addition, they all have space in between them and fit in a nice grid.

###Responsive Design Expected Score: 20 pts Explanation: I have put a lot of effort to have three distinct views for the website. There are three distinct versions of the navigation bar: pills for the desktop, circles for the tablet, and a dropdown for the mobile. In addition, the mobile view has most of the content on pages in one column, while the desktop version uses 3 or 4 columns frequently. The tablet version alternates back and forth between multiple and singular columns, based on what I thought looked best. In one particular case at the bottom of the home page, I use two columns.

###CSS Classes Expected Score: 5 pts Explanation: I have numerous classes - overwritten and original - that I have styled in my CSS files.

###media query Expected Score: 5 pts Explanation: I have numerous original media queries in my CSS files, and more than two of them have 3+ rules.

###A-level work Expected Score: 17-18 pts Explanation: I proposed to include a guestbook page on my website. I have fully implemented it, for a total of 7 points. I stated that I would allow users to comment on photos on the places page. Unfortunately, I did not have enough time to implement this feature at all, so 0 points for this extra. I stated that I would allow users to create accounts and log in and out. Due to time constraints, I only have allowed users to login using Google authentication, so I would maybe assume 3 or 4 points out of 7 for this feature. I have consistently used GitHub for the duration of this project, for a total of 5 points. I stated that I would include a twitter API that allows users to tweet photos from the places page, and I fully implemented this feature. I didn’t get a number for how many points this was worth, so I will assume at least 2 points for now.

###Uses GAE Expected Score: 10 pts Explanation: I have over 4 unique templates as well as a base template. In addition, I have python files that function as the backend.

###Description of criterion Expected Score: 4 pts Explanation: Assuming the demo goes smoothly, I expect to get full points on this part.

###Total Expected Score: 122 (or 123) out of 125 points

##Resources Used: ###GAE Documentation: I used this mostly for learning how to use Google Cloud Datastore for my website. I also used it to learn about cursors, which I incorporated into the pagination feature of my guestbook, and for Google authentication. ###GAE Guestbook Tutorial: I mainly used this just to get an idea of how to use Google Cloud Datastore, specifically in regard to posting entities to the database. ###w3schools and stackoverflow: Mainly to learn about different selectors and elements in HTML and CSS, or how to position elements on the page. ###Twitter: I used twitter’s API for the Places page. For the twitter button, the way it works is that you tell twitter what kind of button you want, and then twitter generates code for that button to copy and paste into your code. Bootstrap: I used multiple types of Bootstrap components in my code, such as the grid layout and buttons. In particular, I used an example from w3schools on how to use Bootstrap to get a collapsible navbar. However, I modified that code significantly, including the layout of the buttons and also the color scheme. Besides these components, I built the front-end of my site from scratch (i.e. no Bootstrap or other templates).