New Media Production Portfolio
The New Media Institute at the University of Georgia offers a New Media Certificate program for students. This certificate program seeks to instill in students an understanding of new technologies, making them more “technowledgable.” One of the classes included in the certificate program is New Media Production, a class focused on teaching students HTML, CSS, Bootstrap, WordPress, and other coding languages in order for students to have a solid foundation for building websites and webpages for personal or professional use. The assignments listed below are assignments from this class.
To view my assignments, click on the thumbnails.
For this assignment, I was challenged with the task of creating a three-page website using HTML and CSS. I decided to add a comedic twist to it by featuring photoshopped images of myself in different settings. Through completing this assignment, I learned the basics of linking webpages together, styling fonts, background colors, and links using CSS, and laying out images in an aesthetically pleasing way. Although the website took me a while to complete, I was very pleased with the result.
Assignment two involved having to make a six-to-eight page website using Bootstrap. When I started this assignment, I wasn’t sure what I wanted to make the website about, but I ultimately chose to feature some photos that I have taken in different places. I created a navbar with a dropdown menu that links to different webpages about different places that I have been. On each page that features a destination, I used a carousel to slide different pictures that I’ve taken that the user can view.
Assignment three focused on using WordPress to create a website. I created another website that featured photos that I have taken similar to assignment two, but this time I did not sort them into different places; I separated them onto different webpages based on whether the picture was of a person or of a place. To me, WordPress was difficult and frustrating to figure out since it is harder to figure out how to edit the code, making it harder for me to obtain the look I was going for. Ultimately, I think the assignment ended up looking and functioning well, but it took me a while to decide on the theme and other characteristics.
For assignment four, the instructions stated to create your own webpage that would play music. To do this, I made the setting a car because who doesn’t like to listen to music in the car? For this assignment, I used Jquery, which called a specific song to play when that album cover image is dragged and dropped onto the image of the car.
For my final project, I created this website! I decided to use WordPress because I wanted to become more familiar with really making a theme my own. I edited some of the CSS, and I learned more about plugins and how to use those too.
My Classmates: used jquery to call a certain name when mouse is rolled over a corresponding picture
Example Page 1: used CSS styling elements to mix font sizes, styles, and colors
Example Page 2: used CSS and Photoshop to create a repeating background for a webpage
Lists: used CSS to create a list with unique bullets created in Photoshop
CSS Rollovers: used CSS to create rollovers for links with different styles and colors
Fun with Nature!: experimented with HTML and CSS to create a three page website
Google Fonts: learned how to implement Google fonts into webpages
Adobe Fonts: learned how to implement Adobe fonts into webpages
Web Fonts: created a webpage using many different fonts from the web
Google Form: created and embedded a Google Form into a webpage
Christmas Tree Farm: used Bootstrap to arrange pictures and design a website for a Christmas tree farm
Slide Toggle: used Jquery to hide or reveal content when a button is clicked
Load Content: used Jquery to load an image in a div tag when a button is clicked
Animate: used Jquery to implement animation into a webpage, allowing the user to move the object right, left, up, down, or do a rotation
Autoanimate: used Jquery to autoanimate a picture of a monkey when the webpage is loaded
Autoanimate 2: used Jquery to autoanimate a picture of a monkey moving in a square pattern when the webpage is loaded
Jukebox: used Jquery to call a certain HTML document (thus playing a song) to load when an image is clicked
Juke: used Jquery to call a image and song to play in an invisible div tag when an image is clicked
Eyecatcher: used Jquery to display the correct images when moused over
Checkerboard: used Jquery to create buttons that change colors in a checkerboard pattern when pressed
Tooltip Exercise: used Jquery to display comments when an image is moused over
Potato Head: used Jquery to create draggable images and that can change what layer they are on when double-clicked
North Campus Tour: used Jquery to display a specific picture when the user scrolls to a specific spot on the webpage
Drag and Drop: used Jquery to set draggable divs and droppable divs to play a certain song and text when images are dropped
Lynda Assignment: learned how to use Lynda as a powerful resource to learn more about creating websites, specifically using WordPress for photography
PHP Intro: learned how to use PHP to create a loop
PHP Includes: learned how to use PHP to show links on all pages without having to insert each link individually into each file’s HTML code
Babies: used PHP to create an array that randomly chooses a baby YouTube video to display