June 8, 2017 . Responsive Website with Media Queries. HTML & CSS.
So just completed the final week 2 project. The idea was to create a website with a responsive design, that would shift the content based on the screen size of the device being used. I used media queries in the CSS to adjust for mobile, tablet and desktop sizes. I found that starting at the smallest size, and working to the larger sizes worked best. I also found a lot more fluidity in the design using width and height measured in “vh” and “vw” values. I know a lot of people used “em” and “rem” values. I made the decision to stick with “vh” and “vw” because that’s really what I wanted to use for the calendar page, to have it scale all the way up to full screen. I assume the same thing could have been done with “em” or “rem”. But this way just seemed to work for me this time. The biggest challenge was the main page, since there was quite a bit more content, and mix of both images, shapes and text. I ended up using min-width, max-width and min-height, max-height values based on vw and vh, in order to control the content, while still allowing for some fluidity as the content scaled up or down. I also added some mouse on and mouse off effects which in css uses the :hover and (not):hover classifications. I also thought the “jiggliness” of the mouse on and off effects on the calendar page worked out rather nicely. If you have any feedback, or comments, feel free to share. Here is a link to the github and youtube below. Thanks!