Project 6

The goal of project 6 was to create a page including a portion of an already existing page like the news articles on The Onion. At minimum we were to utilize the font-family, font-size, font-weight, font-style, font-height, and line-height. It was also important to recreate the article composition using a header, horizontal line, section, date, volume, issue, headline, image, and the article text.

I started off with filling the requirements and it took me a while per usual just to set up the container, and the divs and the size of all the texts and then after I did that all I could start adjusting fonts and adding the image. I also made the text of the article stand out by giving the first letter of the sentence starting it off emphasis and making it bigger than the rest and bold in css. In order to just meet the requirements I utilized text indent, made a couple different classes to put the section, date, volume and issue in.

In addition I wanted to add a header to illustrate that it was an adaptation of the onion so I added an image as a header with the title “the Onion” and adjusted the font and color on that as well. I also made a link to another article from the same volume my article was published in the onion because thats what it had the link to when you clicked it on the website. (Vol/Issue) I felt the right side of the page was fairly empty so to add some more things that weren’t required I made another box to the right of the article adaptation in which I added a gradient background and a couple gifs that illustrate the digestive tract just to complete the page overall.

I still can’t figure out how to provide a source link when you scroll over a picture to cite it, and so I had to put the reference link at the bottom again-I also couldn’t get the second <hr> to be bolder than the first one.


Project 6 link:


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:



Project 3

For this project our goals were to create a theme and website based upon that theme that provides links in a table to different locations. I chose to provide the locations and names of some of the most famous chefs around the world in the new wave of cuisine of today. These people inspire me on a very high level and I wanted to in-capture their uniqueness and diversity in my website. I did this by providing the location of their restaurant in each country, a picture and short description of each chef, as well as a picture of one of their dishes. I also included some meta data above each page with keywords.

I wish I could’ve done more with CSS to make the page a lot more pleasing but I couldn’t really figure out how to do all the colors and designs yet. I also wish I could’ve maybe made a slideshow or a separate page just of each chef’s dishes and a bio page for each because there is just so much more I could share that I think is important to see so If I could work on this in the future I would like to go towards that route.

I would also point out that I did choose to put a lot of them in the table because I simply couldn’t narrow it down to 4-5 I think they are all too great-

I also changed the color of some of the text, italicized some things, other things in bold, added a lot of pictures, resized them all, and provided links to each of their restaurants pages.


Project 3 Link:

Grant Achatz: “Thailand”




Project 2: Adding Photographs

For Project 2, It was difficult getting the pictures to show up, and to be honest I’m not sure if they will consistently show up or not, however the coding of the pictures into the html document was fairly easy. I wanted to create a header of images that represented each of the senses and display the links beneath them. So I had to make all the images the same sizes and put them in the code laid out above the links to the other pages and think it worked out pretty well.

I also fixed a couple things I forgot to do in the last project. I redid my references at the bottom of the page, and edited the list and made it completely different from a bulleted list. In addition I added more breaks to separate the paragraphs because I think it visually makes it look more pleasing and easier to read.

I had trouble with making the images show, though I think all of us did for some reason it was giving everyone trouble. I also was having trouble saving my index html with the copyright/credit the pictures go too. I wish I could’ve added more pictures and not spent as much time just trying to make one picture show up.

Project 1: The Senses

The project goals were to make a webpage with subpages that all could link back and fourth to one another, each containing the different senses. The objective was to display the knowledge and skills learned from chapters 1-3 on making html pages. I executed this on my project by incorporating

  • Structure: Headings, Body,Title
  • Text: Headings, Paragraphs, Bold, Italic, White Space, Line Breaks, Horizontal Rules, & Citations
  • Lists: Bulleted lists, I put the list on the top of the page so you don’t have to scroll down to navigate on the front page.
  • Links: To the other “Senses” pagesI made a slide show to show pages

    This slideshow requires JavaScript.


    I would like to be able to make the pages more organized and not stuck to the left side of the page, and make them centered. I learned a good amount of the basics in this project though and feel pretty comfortable with all these techniques from the covered chapters. I also struggled with leaving the page so plain, I’d like to start applying color and layout, and even font and typefaces.