Project 5

The goal of Project 5 was to demonstrate our learning of chapter 11 mostly and using colors and spacing in CSS effectively.

I will say this was a lot harder than I imagined. It took me a long time just to measure the blocks, do the math, and figure out how to space them so they all flowed like the example. Once I finally figured that out, I started changing the colors and adding images but my images even though I changed the size still kept turning up squished. I wish I could’ve found a way to fix it, I tried cropping the original image to make the picture less squished but it still tried to compress itself when I put it on the page.

My theme was Africa, because I really enjoy the colors that the wildlife and the landscapes and the culture are associated with. I also thought it would be an interesting mix between nature and humans and natural structures. I added images of animals in different positions and tried to relate where I tried cropping them to what else was going on in the page. I also added the blending and gradient of colors to add a different effect rather than all solid blocks it creates more of a blending of colors within one or two blocks. I wanted to comment that one of the gradients I made to illustrate the range of skin tones in Africa, because most countries are diverse in skin color but I didn’t want to emphasize one or the other even though people of african descent are usually thought of as dark-skinned, there are people of african descent that have very light skin, so I didn’t want to stereotype the type of people that live there, but rather use colors to represent them as well as other aspects like their natural surroundings, plains, oceans, dark starry nights, and bright tribal colors as well.

I used all the required color applicators which included, hex codes, rgb, color names, rgba, hsl and hsla.

I wish I could’ve centered the color block and want to figure out a better way to control over 22 items on a CSS page. I also wasn’t sure if we were allowed to add text.. I thought about it but I didn’t think it would go in line with what the project was about(making color blocks with colors and pictures to illustrate a theme.) I also am still confused on hwo to cite your images with a scroll over link, I tried looking it up online and none of the codes I tried worked.

Project 5 link:


Project 4

Project 4


To create a webpage with 5 or more vimeo videos related to a theme as a video gallery demonstrating what we learned from chapters 1-10.

I decided to base my theme on landscape time lapses that I found on vimeo because I’m really interested in nature and how nature can be expressed as art and when I thought of videos time lapses are a really scenic way to see the things that happen in nature so I thought it fit perfectly.

I made a couple different boxes and embedded the vimeo iframes within them and put those in a container within the body. I chose simple colors and tried to focus on the design elements in CSS. I added all of the content in the videos description and included all the links back to the sources, etc. I proofread those as well and fixed them in html and crated some lists to keep it all organized on the page.

I played around with colors. I color coded the boxes and the links.I added a horizontal bar across the top and linked my boxes with each video as link buttons, when you hover over they turn black. I thought this would enhance the users experience. Though I would’ve liked to add a back to the top button but I wasn’t sure where that would go in my document. I had trouble with the text design… I’m having trouble getting text to change fonts and colors but I did successfully indent each paragraph and center the videos and their captions on each block. I made the menu bar items italic.

I added a link at the bottom to a simple works cited page for both project 4 and 5.

I added a link at the top of project 4 to project 5 because I was doing them at the same time and they were due at the same time so I just thought it would make sense in navigating through.

I could not figure out how to separate the list items in my menu bar from the list items in my paragraph texts… but you can see in the html code I put a lot into just editing those text paragraph descriptions of each video it just got messed up on the page from my CSS making of the listed items menu bar.

Link to project 4: