Project 7 – Web Page

ScreenshotJacobHayes

 

Description:
A web page designed to showcase a previously created logo as well as my proficiency in HTML and CSS developing.

Process (Programs, Tools, Skills):
I wrote and formatted the HTML and CSS for this this web page entirely using the text editor TextWrangler. I have had previous experience with HTML as well as with JavaScript , but using CSS was a learning experience for me. Learning how the different formats and languages interact with each other will definitely be an advantage in the work place. To start I created the bare-bones HTML document with what each page was going to say and do. This process was not difficult given my prior knowledge of HTML. However, when it can time to style the pages using CSS I found myself struggling a little. So, using a pre-coded CSS sheet as a template I learned how to utilize this new language and enjoyed it immensely.

I used the colors from my logo as the basis for the various colors within my web page. I found these colors by opening Photoshop and using the eyedropper tool. I also used padding around the logo, text, and list items so that they would not be too close to the edge of the web page. To finish, I recoreded (screen-captured) the interactive portions of my website and uploaded the video to YouTube.

Programs/Tools Used: TextWrangler, Photoshop, Illustrator, Quicktime, and iMovie 

Message: That Astoria Aquatics is a place that you can visit with your children without it being boring to you.

Audience:  Anybody from in the community or traveling through that would like to learn about the wonders of water based life.

Top Thing Learned: How to properly utilize and write HTML and CSS code.

Color scheme and color hex: Analogous: Teal #C3E2C3; Green #a4d0c1; Blue #516593;

Title Font Families & Category: (all names)  Calibiri Bold, Helvetica, San Serif

Copy Font Families & Category: (all names) Calibiri Regular, Helvetica, San Serif

Changes made to the CSS: I made various color and font changes, as well as styling options for hovering over links and hovering over certain list items. I changed font styles and colors, as well as different aspects of the way that the links interact with each other, but there may be too much involved for me to just type it out, so I have attached a video to showcase the website’s interface as well as to show that the page and links function as intended.

Word Count Overall: 552

Advertisements

One thought on “Project 7 – Web Page

  1. Wow Jacob! You are not afraid to go above and beyond, and that’s definitely what you did. I think your logo is so cool, and I can tell that you put a lot into it. I also like that you had little categories you could click on and explained the different parts of your project! Very unique! Also, when looking at this blog post I saw your illustrator practice one….SOOO GOOOD! Feel free to check out my blog post here: https://elliearave.wordpress.com/2015/06/28/project-7-web-page-project/

    Liked by 1 person

Tell me what you think...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s