9A HTML and CSS Coding Project

9arobwagnerscreenshot

DESCRIPTION
Code a custom webpage with HTML and CSS.

PROCESS (Programs, Tools, Skills, FOCUS principles)
1. First I created my logo in Illustrator. I enjoy marketing and made this my focus.
2. I resized my logo to be 450.
3. I downloaded the HTML file and input my own content and added appropriate tags.
4. Then I downloaded the CSS file and made adjustments according my style and coloring.
5. I changed the body font to Verdana, and the Heading fonts to Cheek.
6. I knew that a lighter background would be best so I selected white for the body, and light grey for the surrounding white space around the subject page.
7. I validated both my HTML and CSS. CSS was fine, but I continued to get an error on the HTML suggesting that the “head” tag already existed. I checked and re-checked, but at length could find no way to correct this and concluded that it may be an error within the validator since no other tag exists with that name.

CRITIQUE PROCESS
I received a lot of feedback regarding the logo design via Facebook friends, and another classmate who suggested that I get away from the Papyrus font and use a rectangle to lengthen the stem of the “P” so that it achieved the look I admired in the Papyrus version. I spent half the day working on this, and then checked with my wife to see which she preferred, and she said that she still likes the Papyrus version better, and I agreed. So I spent all of that time creating a new one, but now I know I like the original best. Here’s an example of the new version I decided not to use.

9a-logo

MESSAGE
Reach your target audience effectively with our marketing services.

AUDIENCE
Local, SMB (Small to Mid-sized businesses).

TOP THING LEARNED
You don’t have to add extra shapes to your text to alter it’s appearance uniquely, you can actually select each letter individually as a separate object as I learned from a Youtube video after spending some time trying to match up a rectangle’s dimensions with an “I”.

COLOR SCHEME & COLOR NAMES
Complementary // Red, White, Black, and Light Gray

TITLE FONT NAME & CATEGORY
Cheek // Modern

COPY FONT NAME & CATEGORY
Verdana // Sans Serif

THUMBNAILS OF ANY ORIGINAL, UNEDITED IMAGE(S) USED IN THE PROJECT
N/A

SOURCE OF EACH IMAGE (website name and hyperlink)
The graphics are my own.

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s