Web Design for Everybody:
Coursera Capstone Project

Project URL 1: monakelleherrealtor.com

Project URL 2: 404 error page with responsive design: 404 error page

W3.org screenshots of html validations for each page.

• presentation.html (This page)
• index.html
• profile.html
• blog.html
• contactme.html
• 404.html

Overview

The project I selected is building a website from scratch for my wife, Mona, who is a Licensed Real Estate Broker servicing the Portland Oregon metropolitan region. This site replaces one that I had set up in Wordpress which was installed on a self-hosted server in Amazon Web Services (AWS). The objective is a live static-website (no servers required) self-hosted in my AWS account in an AWS S3 (Secure Self Storage) bucket, the site is responsive, designed for accessibility, and passes both HTML and CSS validation.

Design Considerations

The site is designed for mobile first and has two responsive breaks, one at 480px and the other at 736 px. I chose these values after considering the range of mobile and tablet devices likely to be used, a web search on common break points in responsive designs, and a subjective assessment of how the site design looked and behaved at various sizes. The smallest screen size I used was for the iPhone 5/SE, please do not use any screen sizes smaller than 280px, the site is not designed to perform on screens narrower than 280px. I chose a color pallette from colorpallette.org and augmented it with additional tints and shades using maketintsandshades.com as required in order to stay consistent with the color palette and still pass accessibility validation

Responsive Design Elements

The Headers and Footers are responsive and rearrange at the design breaks. In addition the css adjusts formatting as the screen size increases. I coded an error page that is not reached by the menu that also meets the criteria for substantially transforming the look of the page by rearranging the location of elements within the content area. The link is provided above.

Key features for grading

The Capstone requires 3-4 additional features that are considered extras above and beyond the assignments in the class. The following items should be considered for that requirement:

• FontAwesome Icons used in the following areas:
  • Hamburger and X icon in the Navigation menu
  • Caret in the Navigation menu
  • Facebook, Twitter, LinkedIn, and telephone icons in the footer.
• Animation of the caret in the Navigation menu to make it rotate
• Custom Icons used in the following areas
  • Keller-Williams Icon and Google Maps Icon, both created from images
• jquery used in the following areas:
  • toggleClass in the Navigation bar
  • slidingToggle on sibling elements to show and hide full blog content on the blog page.
• I registered the domain name for monakelleherrealtor.com using the AWS Route 53 service
• Self hosted and secured (meaning you will see the lock icon to the immediate left of the domain address in the URL bar, to the left of "http" in the registered domain) in an Amazon S3 bucket. The site is accessed via a Content Delivery Network (CDN) for extremely low latency.
• Embedded map on the Contact Me page
• Phone tag in the footer is configured to dial the number
• Email tag in the footer will send an email configured with default header, address, and content
• Form tags used on Content page. Only the Front End for this form is built, backend is beyond the scope of the course, I haven't done the input sanitizers yet.
• I did two media query breakpoints, one at 480px and one at 736px
• I used a pseudo attribute ::before to modify the DOM by appending a check box image for a bullet character on the unordered list of core-values.
• The footer is always at the bottom of the document and the page takes up the entire view frame even when there isn't enough content to force the footer to the bottom of the view frame.
• I created and included a favicon, the little icon that appears in the top browser tab next to the name of the page.
• I discoverd that the deployment sollution I chose to use with AWS mandates that my code use a security policy scheme called Content-Security-Policy (CSP) in order for my pages to work as designed. Without the CSP none of the formatting, links, javascript, jquery, etc. will work, the CDN would refuse to allow it. I had to learn about how these policies work and write the portion of code that would allow my pages to fully function. This involved refreshing the page, looking at the errors in the console, and resolving them all one at a time. Typically this code is in the HTML document itself but in my case I had to remove it from my HTML docs and put them in the content delivery network I created, editing the serverless lambda function that adds security headers to the Origin Response from the server. You can see these when you inspect the page, click on a GET response and in HEADERS look at the "content-security-policy"
• Fully functional Contact Me form using AWS S3, SES, and Lambda services with form-validations and client side verification using Google's anti-spam reCaptcha service. Client side verification is less secure than server side verification, I plan to upgrade as I become more comfortable with the coding required but this is enough to get started. I adapted publicly available node.js code to my site and configured all of the CORS-Cross Origin Resource Sharing and CSP-Content Security Policies in my AWS environment, tweaked the HTML and stripped the js and css into separate documents. Go ahead and test the form, I'll get the email!

Discussion

The navigation bar was adapated from one I found on youtube from a site called Coding Nepal. I had to modify it by reconfiguring the buttons which are named based on the content, I changed the hamburger from a fixed position and put it into a div in the header so I could better manipulate it's location relative to other header contents. I changed some formatting and created a separate js file for the jquery functions and moved the formatting into my css file. It's working fine but after discovering the ability to toggle children and siblings with jquery I think I could simplify the code a great deal from the original if I had more time to spend on it, on hindsight the code seems unnecessarily complex and awkward to support onging updates with new content.

The Blog Page uses a jquery method called slidingToggle, which is a little bit fancier and nicer than the simple toggle method I initially considered. I found some ways using javascript that just seemed too complex and felt it was worth trying to find something simpler. I plan on improving this by adding an additional function call into the toggle() method to update the text on the show/hide but I need to complete a few other projects first. From what I read I should be able to change the DOM for the text in the button with an additional callback.

Much effort went into the headers and footers trying to get them to behave, I redid them a number of times as I travelled up the learning curve. I chose to put the various elements into containers so I could manage arranging the containers without messing too much with the content of the containers. I also found that it was convenient to use a mix of absolute and responsive measures, mixing pixels with ems and percentages. This allowed me to limit the number of things that were changing at once. I would make sure that the layout maintained it's integrity to the next breakpoint, then I would make the changes necessary for the range in the next mediaquery. Once I had headers and footers that always looked pretty good and stayed where they belonged the page content was simpler to manage. They aren't perfect but I can always improve them later as I learn more.

Some comments about self-hosting on AWS

I have spent some time pursuing certifications in AWS, at first I was just motivated to gain familiarity but then decided to pursue a deeper understanding of the various services offered and the value they provide. This lead to the realization I could tap into a tremendous resource if I learned some web development skills. At first I planned on doing the setups manually but then I found a GitHub CloudFormation template offered by AWS that is simple to execute and delivers the perfect highly performant, secure static website, meaning very low cost because you don't have to consume and pay for server time. It's not a solution for every web site and it's not something a novice should attempt but if someone has some interest and technical skills and plans on doing lots of web development it's an option to consider. The backend and performance on this site is as good as you would get if you were a Fortune 5 company and there are no annoying ads to drop in.

Content-Security-Policy

The unexpected challenge was the additional work needed to implement a Content-Security-Policy on the CDN in order to protet against cross site scripting attacks that exploit weakness in a web page. I couldn't find a way around this so and decided it was best just to learn it and implement it on the site as a security best practice. Overall my choice of architecture forced me to pay close attention and adhere to secure coding practices.

Testing and Deploying on a CDN - Content Distribution Network

Some production conditions were difficult if not impossible to duplicate in my desktop environment, this meant that I would have to write code but before I knew if it would work I had to put it into my production environment and make sure everything worked with the security protocols in place. This also required that I pay attention to the cache on the edge of the CDN, I had to either clear the cache or version docs so that I was seeing the updated versions and not the cached versions of the previously deployed versions.