WGD-242 Final Project


Advanced Web Design has been a very informative class. Throughout this class we learned a lot about the power of CSS and its ability to control the layout and look of your webpage. We also looked into JavaScript a little and explored JQuery’s ability to add smooth animation to your page.

I knew, going into this class, that CSS was a powerful tool for designing the look of your web page. What I didn’t know was just how powerful. I learned that CSS can be used for more than just positioning and color. You can create interactive events using CSS as well. For example: CSS has pseudo-classes. These pseudo-classes can be used to select an element during an event suck as moussing over, clicking, or becoming active. This allows you to set all sorts of events into motion. You can cause an item to change colors, drop a shadow and even move slightly. This is a great way to make an item pop up off the page when you mouse over it.

One of my favorite CSS events occurs in the navigation menu. I was able to select the color, shape, and position of my menu items. In the case of this page, I selected a dark green for my color and rounded the corners. I them placed them in the header and floated them to the right of the page. I chose this setup because the colors complement the image and by floating them to the right it didn’t clutter up the title that was floating on the left. The real magic happens when you mouse over the menu items. I was able to use pseudo-classes to create a new look when the user mousses over the menu item. In this case, the color turns lighter green. This gives the effect of it lighting up and draws the user’s attention to the item. I like when an item that is interactive confirms with the user that "yes, I do something click me". More than that though, is the ability to hide and show objects that aren’t the item you’re interacting with. I can select a sibling element and place instructions to show a sibling element when the first element is being interacted with. This allowed me to create a menu item that spawned additional menu items when the user hovered over it.

It feels like CSS wants to have control over all design elements of a web page. Even the interactivity of hiding and showing elements. This is a great thing as some people disable JavaScript for security reasons. Giving CSS the power to have items appear and disappear based on user interactivity allows the page to have a more personalized feel without using any JavaScript. I wouldn’t be surprised if in the future more is added to CSS to control miner animations so elements can be slid into place. For now, however, that is controlled using JavaScript. While CSS can build a very personalized look for your page and even add a small amount of interactivity, JavaScript is still needed to give your page an animated, modern feel.

In this class, we looked into a JQuery add-on for sliders. With this JQuery add-on we were able to cause a portion of our page to slide in and out of frame when we interacted with an element. In the case of my page, I used this to animate my side bar on the main home page. I picked this portion of the page to animate because I did not want to hide any part of the main content. In my layout the important part of the page was in the main section area. The aside was for less important content or additional information for the main topic. For that reason, I can hide the side bar and have it accessed through an interaction. This gives my user something to discover and encourages the user to explore my page further for hidden treasure.

When it comes to menu items I would prefer to keep JavaScript out of it. Fortunately I was able to avoid using JavaScript in my menu bar but that is not always the case. If I wanted my menu to have any sort of animation like my side bar, I would have turned to JavaScript to accomplish it. In my case, however, I used the HTML attribute "role" to turn a check box into a button. I then styled it like a menu item and used the sibling selector to effect the main menu when the check box turn button was selected.

JavaScript is very good at animating objects, but it can do much more. IT can handle any sort of interactivity that you may want. One example of this is an entire layout and interactive structure built entirely from JQuery. The full page scroll. This is an amazing way to take sections of content and fill the page with them. The user can simply scroll up, down, left, or right to get to the next page of content. One of the down sides of this effect is that it is in itself an entire page structure. It is not something you can add into an existing layout easily. Instead of trying to make a section of my page into a full page scroll layout, I added a link to a full page scroll example in my side bar. I was able to limit the scroll effect to the main content of the page. This allowed me to keep my title bar. The main reason I didn’t try to incorporate this into my main page was the conflict in menu items. I wanted to showcase the light up menu buttons when you scroll, but already had that area set aside for the main menu of the page. If I wanted to drop the scroll menu, I could use something like that for a long winded block of text like this essay. It is something I will keep in my toolbox for the future.

JavaScript is also very useful when validating forms. Though, it seems JavaScript and CSS are fighting for this honor. At the moment a combination of both is your best bet. CSS is not as accurate as JavaScript can be. However, much like my prediction for animation, I think CSS is going to add more into itself for form validation. For the purpose of this class, I used a purely JavaScript validation for my form. It checks to make sure the user added something into each form and made sure the e-mail contained a "@ " and a "." And the phone number was in fact a number.

My form is a simple contact form. I chose each element so I could showcase a few of the input options available to us and how JavaScript can be used to check each one. One effect I love is the use of fieldset and legend. These elements really help to break up the form and make it seem more manageable. It also gave me a convenient place to display an error message. Many people like to plug an error message right below the element that was flagged. I don’t like this because it pushes other elements around. By using an existing element and repurposing it, I can display an error message without my elements bouncing around.

In this class we touched on a few things that I am going to explore further. I was shown how a check box element can have the role of a button. That opens up a lot of possibilities for me. I also learned (from my own research) how to rearrange elements on my page using flex-box and order number. This was a huge help when rearranging elements as the view screen shrinks. I learned about columns in this class as well, but, because it is not accepted in all of the browsers, I choose to ignore it until it is more universally accepted. I can achieve the same effect using JavaScript if I need to. I look forward to testing the limits of flex-box, role, pseudo-classes, and sibling element selector in my upcoming projects.