INTRODUCTION

For more than a year, I have been studying and practicing modern HTML and CSS page design. Aside from developing sites in my classes, I have taken on a few side projects with organizations on the UF campus.

To view screenshots of the websites I currently maintain, click here.

Below are examples of basic models of CSS design essential to mastery. Each caption explains the purpose of the exercise, all of which I completed in my online media class at UF. Clicking on a screenshot open up a new browser window and take you to the actual website.

 

Typography Study

One of our earlier exercises depicted the conveyance of emotion through typography. Picking opposite or conflicting words, we had to choose fonts in Photoshop and blend and filter them to convey the message in text.

 

Rounded Tab Navigation

Our professor gave us three basic HTML pages with the divs already set up in a CSS document and told us to create any sort of navigation we saw fit.

Because I had never been able to program it before, I created a tabbed horizontal navigation between pages.

The way I programmed this "rounded" feature, although it is pleasing to the eye, doesn't work in Internet Explorer. Another design, called the 'sliding door' method, is compatible, and soon this page will be revised using that setup.

 

Precise DIV Positioning

This exercise, our last one before moving into Flash journalism, used CSS positioning elements to show exactly how perfect one can align text, boxes and photos in a website.