Week 3B

In Class

Since, we missed the previous class. Our week 3B class had to move quickly by throwing a lot of different information out to the class. We mostly focused on the different way you could add media queries and CSS code to create responsive and fluid webpages.  

In the first example we simply added the embedded CSS script into our HTML page so you could clearly see what was being done without having to switch from page to page. The way we created a fluid image was by setting the max-width to 100%. By doing this the image scales to the proportion of the viewpoint. 

In the second example we added a media query. You can see where we added a comment to help distinguish between the CSS and the @media query. By doing this we can also keep a fluid image because we are setting the max-width of the screen as 480px. So the image stays relative and centered in the browser.

In the third example our goal was to have one image at the size of tablet and desktop but switch the image to screen 2 once it is in the viewpoint less than 480px. This was accomplished by another media query. By having a media query we can help decide at what pixel we want the image to switch or become hidden.

In the fourth example our goal was to switch the color of the screen in each viewpoint of desktop, tablet and mobile. In order for this to work we needed to have a media query for the range of pixels for each dimension of desktop, tablet and mobile.

Class Exercise

At the end of class we went over what important information would be displayed on our home page and sub-page. Luckily, I have a lot of content to work from on my Slam'n Salm'n Derby Website. On my homepage I'm going to make sure I have the overall purpose of the Derby, the date, time and location, direction (Google maps), event information and contact information. On my sub-page I decided to go with the Rule and Regulations page because it had the most useful content for people signing up for the derby. If I do a third page I would make it the about us and go more in depth about the Slam'n Salm'n Derby. I would make sure it had the history of the derby, sponsors and more about the benefits that are gained from the derby.