Project Requirements: For this assignment, I was instructed to take everything I've learned so far in this class to build a mobile-first, accessible, and responsive website for my "client" that matched her branding. Using semantic html and css, I was to create this website based on three provided layout wireframes for small (mobile), medium, and large viewport widths. We were provided a branding package in order to match the site to the client's brand's font and colors. Once published, we were instructed to test our site using Lighthouse to see how we did with site performance, accessibility, SEO, and best practices, and we were to work through a testing document to note any issues.

Goals/Purpose/Users: The goal of this website is to inform and promote the author/client to her audience in an accessible and usable way. The client is a children's book author who tours for meetings, readings, and book signings, so her website should easily share her books and tour locations and dates, as well as make it easy to buy tickets to her events and buy her books. User and screen-reader accessibility is a must because her audience could have any range of disabilities including physical, visual, and audible impairments. 

Steps of Site Development: Before beginning this project, I started with a bit of discovery. I looked over the branding and the provided layout wireframes; I downloaded the provided images; I read over the assignment instructions a few times. When I had a good grasp on what my client needed for her site, I began by writing the html. I was intentional to do so semantically so that the information could be displayed clearly without css, so someone could tab through the site in the correct order, and so a screen reader could read off the content as it is intended to be relayed. After I finished the html, I validated it, then made a few fixes to make sure there were no warnings or errors. When it validated perfectly, I began the css style sheet. When I completed the css, I validated that as well. Before publishing to Github, I obfuscated the css, which I had never done before, so it took a bit of research and trial and error before I got the site to display, but I figured it out! After publishing to Github, I tested the website through Chrome's dev tool Lighthouse and filled out a testing document. There were a few things that came up in the test that I would like to have fixed if I had more time to figure it out and re-obfuscate the css and re-publish. For example, there were a few links at the bottom of the page that needed more space around them in order to be appropriate for touch screen tapping. Furthermore, I admittedly regret not testing the colors I used against each other before I styled the page, because in some areas the background and foreground colors did not meet the necessary contrast ratio, in some cases due to the weight of the font. Looking back, I see that I missed a step there and I wish I hadn't. Finally, I spent a lot of time trying to get the images to upload more quickly when the page loaded or refreshed, so I changed them from svg's to jpg's. Lighthouse recommended the WebP format, so I would like to try that next time to better optimize the images.