|What I Did||Why I Did It|
|Added normalize.css||Since I finished the bulk of my project last week, I wanted to focus on making the page work on multiple browsers, since the students in this class probably don’t all use Google Chrome (the browser I was testing the site on as I worked on it.) I grabbed the normalize.css code from Github and added the styling to my index.html file. The normalize.css file is supposed to override all default styling for every possible browser (well, almost every possible browser) so that the styling I apply via my style.css file will show the same on all browsers.|
|Checked usability on different browsers & screen sizes||I logged onto the computer in the lab and check the page on different browsers (Safari and Firefox). It looked the same exact the styling was messed up when the viewport size was huge (> 1200 pixels) and a few other miniscule differences from Chrome to other browsers, such as the scrollbars for my iframes being hidden on Chrome until you scroll, where as on Safari and Firefox the scrollbars are always there. This was actually a relief because one of the issues when I showed my rough draft was that, on Chrome, the scrollbars weren’t there. I accounted for this issue by placing a small disclaimer at the top of the page.
Additionally, I had to add some more media queries in case any of the students (or anyone for that matter) views my page on large screens. I set some styling for when the viewport size is greater than 1200 pixels and made everything line up, expand, and shrink appropriately. I thought this would be a big pain at first but with a little persistence and constant editing of CSS and re-checking on the lab computer, I was able to get a pretty satisfactory result. I’m pretty confident of the cross-browser and screen-size compatibility of my web page now, and am almost ready to present it to my peers.