Project 7: Web Page

P7BenFagerstenScreenshot

Description:

A webpage to display my logo and describe the process of its creation.

Process (Programs, Tools, Skills):

I used Notepad++ to edit a basic html and css code in order to create the webpage. Before this project I had never understood html/css coding, much less use it. I started with sketches to figure out what I wanted my webpage to look like. It proved difficult to make what I sketched, mostly because I didn’t know what the different options I had were called. I did get close to what I wanted and am very proud of that. I knew I didn’t want it to be title, logo, content so I made sure to get some columns going on in the page and if you notice I got columns within a column…inception! I also knew that I wanted a background image rather than a plain colour so I went to the css code and replaced the colour code for an image code and it was as simple as that. I added two links to my page, one that will take you to this blog in a new tab and one for my email. The email link is set up so that your default email will open up a new email addressed to me with the subject “Contact from Logo Design Process page.” Something that helped me learn html/css more was creating a different web page (which can be found in the independent work page).

Message:

I am professional, put together, and skilled visual communicator.

Audience:

Business professionals and potential clients who need design work.

Top Thing Learned:

codecademy.com and w3schools.com are my best friends when it comes to coding. If I can think of something to do I can find out how to do it on one of those websites.

Color scheme and color hex(s):

Complimentary – Blue #1469af and Orange #f8a01d

Title Font Families & Category:

“Linux Libertine Regular”, Georgia, serif

Copy Font Families & Category:

“Lao Sangam MN”, calibri, sans-serif

Changes made to the CSS:

I added a note to the top of the css about the hex codes for colours. I changed the background from colour to an image making it center, no-repeat, and a fixed attachment. I changed the font-family for the title font and the body copy, I also changed the font colours. I changed the colour of the header background and the body background. I changed the body width. I changed the image float to left. I added two column tags. There is a special setting on one paragraph tag. I added two links to my page and made it so the links are the same orange as my logo and when you hover over the link it turns the blue from the logo.

Word Count: 324

Advertisements

One thought on “Project 7: Web Page

Leave a Reply

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