Flexbox Image Gallery Codepen.io part 2 5/11/18

Today, I continued to work on my Flexbox Image Gallery and added many CSS rules to make the Gallery look better. I changed many of the colors, added a border to the images and image captions, and I learned how to order my images using the order CSS rule. First, I made a border using border: black solid 2px; which sets the color, type, and width of the border. I also added the border-radius rule, which allowed me to round the edges of each border to make it look smoother. I also rounded the edges of my images using the border-radius rule. The last thing I did was create an order for my images by using the order rule. This allows me to organize the gallery by changing a few numbers in CSS rather than cutting and pasting entire figures inside the HTML.

Flexbox Image Gallery Codepen.io Assignment part 1 5/7/18

Today, I worked on my Flexbox Image Gallery.  It was made with an h1 tag, followed by a section tag to put the website’s content in. Within the section tag, there are 9 figure tags, each with an image and caption. Every image was taken from lorem flickr as a sample image. This is useful because you can set it to be a different image every time you refresh the page. In addition to the HTML, we added multiple CSS rules using flexbox to organize the content. For example, We used flex-direction:row; to organize the images horizontally, and we used flex-wrap:wrap; to make the pictures wrap around to the next row so we don’t have to scroll horizontally.