Post by alincoln0761 on Apr 3, 2016 13:48:56 GMT -8
URL: gc.palomar.edu/32950/32950alincoln0761/Unit10.html
This week covers flexible images and advanced selectors. I decided to use my two column layout to demonstrate the usage of a flexible image. I used a simple div as a container for the image which uses a width of 100% as apart of a parent container that has a 72% width. The image itself uses a max-width of 100%, meaning the image's actual width cannot go beyond 100%. As a result, this creates an effect of a flexible image whenever the viewport's width changes, always expanding/shrinking the column and its image to fit inside. Another part of the assignment was to use advanced selectors. I picked out three more pictures and used two different selectors. In the first picture, I used an advanced selector which uses a regex-like expression to select any images that ended with (-city.jpg), which happens to be my new york city picture. As a result the expected behavior should select the first image and paint a red border. In the other two pictures, I wanted to experiment and use pseudo selectors by utilizing the (:nth-child) child selector to select the last two nodes (elements) found. As a result, these pictures should create a yellow border. Overall this assignment was fun as I was able to learn about the different types of advanced selectors that exist, as well as determining how to create a flexible image.
This week covers flexible images and advanced selectors. I decided to use my two column layout to demonstrate the usage of a flexible image. I used a simple div as a container for the image which uses a width of 100% as apart of a parent container that has a 72% width. The image itself uses a max-width of 100%, meaning the image's actual width cannot go beyond 100%. As a result, this creates an effect of a flexible image whenever the viewport's width changes, always expanding/shrinking the column and its image to fit inside. Another part of the assignment was to use advanced selectors. I picked out three more pictures and used two different selectors. In the first picture, I used an advanced selector which uses a regex-like expression to select any images that ended with (-city.jpg), which happens to be my new york city picture. As a result the expected behavior should select the first image and paint a red border. In the other two pictures, I wanted to experiment and use pseudo selectors by utilizing the (:nth-child) child selector to select the last two nodes (elements) found. As a result, these pictures should create a yellow border. Overall this assignment was fun as I was able to learn about the different types of advanced selectors that exist, as well as determining how to create a flexible image.
