Sarah Bailey's Web Design Portfolio

This portfolio displays the design and technical skills that Sarah Bailey has developed throughout taking Web Design I. Each of the following examples showcases specific Dreamweaver skills. They also show a variety of different types of sites for different types of clients.

Contact Info: sarah@seekingsarah.com

CSS3 Image Gallery

CSS3 Image GalleryI created a CSS3 image gallery using special selectors and defining hover behavior. First, I resized the images as thumbnails. Then I used absolute positioning and nth-of-type selectors to align the thumbnails at the top of the gallery. Next, I defined each image with hover behavior to expand each image as the mouse hovers over it. These technical skills allowed me to create an interesting image design.

JavaScript

JavaScriptI used JavaScript behaviors to change the background image and content description when a user clicks the different links of the site. For example, clicking the "Home" link displays an image of lavender with lights, and a description of lavender lotion bars underneath this image. However, when a user clicks on the "Supplies" link, an image of tools needed to create the lotion bars and a list of needed supplies beneath it is displayed.

Also, I added jQuery UI elements to this site. Using the jQuery accordion element, I was able to design a functional and aesthetically pleasing list of upcoming events, regional clubs, and contact information.

Online Form with CSS

Online Form with CSSI created an online form using a form element, adding form text fields, menu fields, a check box, submit and reset buttons. Finally, I added CSS to the form to design it according to my client's wishes. This online form shows that I have the technical and design skills to obtain information from site users with an easy to navigate and aesthetically pleasing form.