Project 12 – Final

My Site

The goal for this project was to create a website to showcase most of my previous projects (excluding the first). This site includes screenshots of the main home-page as well as the reflections from my blog posts about them.

I feel that my site is well formatted to accommodate this type of content. I made the main content div a scrolling div while the header and link menu on the left are stationary. This way the user has access to all of the links regardless of which project description they’re scrolled to. The ‘Back to Top’ button is also always available for convenience.

This Course Overall

I came into this class knowing next to noting about formal coding of webpages, the most I could do was make text italic or underlined in message boxes. I’ve learned how to understand the syntax of html coding and it’s basic rules, which is an important skill to apply when trying out new code.

Project 11 – JavaScript

My Site

The goal of this project was to practice incorporating the basics of JavaScript into an html web page.

The Javascript elements I included in my page are the random number generator and the button (which displays hidden content when clicked). I had to research how to include JS within the html code, but I was able to code them successfully.

Project 10 – Portfolio

Content Wireframes Design

The goal for these projects was to design a site while considering the content that will inhabit it. At each step the site design was being developed as the content was. Using all that we’ve discussed regarding composition, layout, and function, our site must have a pleasant visitor experience.

I feel the composition of my site is solid, even a little too solid. While the composition of each page is consistant and easy to navigate, a little more scrolling room would help to open up the space. I kept the main navigation simple, with a div color to indicate which page the user was on. The secondary navigation on the home page could benefit from a rollover title or some other indication that each column of text or images leads to their respective pages. On the About and Bio pages, there’s a slight inconsistency of the space above the text due to the altered First Letter. For the portfolio page, I looked up the code for dropdown-images so that when one hovers their mouse over the thumbnail, the full-size image would appear and not be restricted to the size of the column. However when I added in other images near the first one, the dropdown-image appeared behind the rest of the content, so i was unable to include that feature.

Research Presentation – Owlet

My Page

For my research project I was assigned the Owlet baby monitoring system. This project was interesting to work on as I got to take an in-depth look at the technology behind this product, especially since it’s target users are infants and their families. Because the goal of this device is a monitor system for young babies, there is a lot of expectation on the app and sock to be as user-friendly and systematically sound as possible. For the webpage itself I would have liked to have less white space in the “header” and “links” divs.

Project 9 – Layout: Final

My Site

The goal of this project was to take the website layout we designed in the last two projects and add content and a few more features, such as a rollover animation to the navigation, a footer, and <article> tags that link to other pages.

My site layout is successful because I refined my design and added more features (aside from the required ones) to simplify the user’s experience. For instance, in the “Price” field on the Products page, I added a drop-down menu so that a user must select a size before they can see the price associated with it. This makes it easier to understand which size they are adding to their cart. I chose the content based around the idea from the previous layout, as if I were to set up a site where I could sell my art and take commissions. All of the photos used on the site are my own, as well as the site banner on the home page and the site background. The only drawback to my design is that I couldn’t get the code to work where each individual navigation menu item has its own rollover animation, instead the entire navigation bar is effected.

Project 8 – Layout Grid

My Site

The goal of this project was to recreate the site we designed for Project 7 using the 960.cs grid system to organize the layout.

I picked up the concept of the grid system pretty easily and applied it to my code with few hurdles. However, there are a few things that don’t line up exactly the same, such as the text box on the Contact page. While they look fine on a Mac computer, it’s not quite the same on a Windows computer.

Project 7 – Layout

My Site

The goal of this project was to design a website layout that is well-composed, easy to navigate, and professional. While using minimal content, primarily the “Lorem ipsum” text, we should be able to understand the layout and fill in content at a later date should we wish to.

I feel as though my website is successful in that the appearance is clean and pleasant to look at, easy to navigate, and designed so that the text is easy to read. My Products page has an organized table of 3 example items with their details and a short description, whose titles lead to a separate page with a fuller description and more images. Listed after each item is a shopping cart button which, when clicked, will hypothetically add that item to “Your cart” shown on the right. My Contact page has a simple feedback form where visitors can submit questions, comments, or other feedback. On each page I have a form where visitors can sign up for regular newsletters.

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.

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.