Project 6 – The Onion

My Site

The goal of this project was to manipulate the layout and content of my page in such a way that mimics the layout of The Onion.com as close as possible, including: font size/family/weight, image and text alignment, and other decorative elements.

One of the more challenging parts of this project was matching the font on my page to the font on the original. There was always some aspect of the fonts I used that didn’t match. Another issue was formatting the blocks of content. For instance, with the “float: left” property, the page only looks correct if the browser window is a certain width. I also tried to format the main image so that it has a set max size, but will resize according to the size of the browser window.

Advertisements

Project 5 – Color Bars

My site

The goal for this project is to get a deeper understanding of the <div> element in HTML and CSS with the use of TV color bars. With this format, we have a clear goal for how to arrange and size out pallet.

The theme I chose for my pallet is “Pastel Autumn”. With help, I was able to format the code to correctly display the color bars evenly and in the correct format.

Project 4 – Vimeo Playlist

My Site

The goal for this project was to be able to embed videos into a web page, as well as to further my experience with CSS.

With this project, I was able to try more things with CSS, including successfully using an external CSS style sheet. The table that contains the content of my web page is formatted neatly for easy navigation. While I was able to divide the rows with solid line dividers, I wasn’t able to divide the columns, which I think would make the table a little easier to read.

Project 3 – Location Site

My Site

The goal for this project is to gather locations under a specific theme and create a website with different pages for each location, including a map per location.

For this project I started using CSS for the style of pages, including font style, size, and background color. If I could redo anything, I would try to find and/or make more uniform background patterns. I would also include more specific locations, if possible at least one specific festival/celebration location per holiday rather than just the country where it’s celebrated.

Project 2 – Senses+

My site

The goal for this project is to add on to our site from the previous project by adding images to make the site more visually appealing.

I incorporated my knowledge of image coding by adding small icons beside each link in the navigation list and to the tops of each page. I added the icon to the tops of pages so that they would be easily identifiable when clicking through each link.

I was successful in keeping the icons as uniform as possible, with each other as well as between pages. I tried to make the icons into buttons/the links themselves, but couldn’t get the links working without keeping the icons and links separate. Also, unfortunately I didn’t have a lot of time to dedicate to working on code, so I wasn’t able to add as many images as I would have liked.

Project 1 – Senses

My Site

For this project, the goal is to code a basic website design with the given content that is easy to read and navigate. The 5-page website has external links, an MLA formatted Reference section, and a site directory with links to its other pages.

What I’ve learned so far is the basic coding necessary for a web page to display properly and for the text to be readable. For the aesthetics of the site, I’ve also learned how to add line breaks between sections of text and add a background image. These are all features of my web page.

I’ve succeeded in making sure all the links work properly, including the site navigation, the referenced webpage links, and the subscript numbers. The background image is also a bonus because not only does it break up the plain white background, but the image I chose is textured (crumpled paper) which I feel subtly reflects the subject matter. My site might be lacking in the Reference section because I’m not certain I formatted the citations according to all of the rules of MLA.