Reflection - Final

Project 12 - My Sites

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 2 - Senses+

image

Reflection

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 3 – Location Site

image

Reflection

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 4 – Vimeo Playlist

image

Reflection

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 5 – Color Bars

image

Reflection

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 6 – The Onion

image

Reflection

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 7 – Layout

image

Reflection

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 8 – Layout Grid

image

Reflection

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 9 – Layout: Final

image

Reflection

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 10.1 – Content

image

Reflection

This was the first of a 3-part project. My task was to gather and organize content to become part of my next site. The theme of this project is myself and my interests, as well as a small portfolio of my works. At this stage, all I had were notecards with keywords on them arranged according to which category they fall into.

Project 10.2 - Wireframe

image

Reflection

This was the second of the 3-part project. Now that my content was organized and prepared, my task was to create a wireframe for a website that will suit my content.

Project 10.3 - Design

image

Reflection

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.

Project 11 – JavaScript

image

Reflection

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.