Project 7 Web Page

P7JessieSkinnerScreenshot

  1. Description: I made this web page to display the logo I created along with explanations of its target audience, the tools and principles I used to make it, and why I chose the color scheme I chose.
  2. Process (Programs, Tools, Skills): I used Text Wrangler to code the HTML and CSS for this page. I used basic coding to input the image of the logo, the font color, background color, headings, and link. With a little help from someone more experienced, I created divs in order to make the black boxes holding the text. I input code that created the block shape they’re in.
  3. Message:  The message I want to get across with this site is that I can create modern, sleek, audience-catching logos, and that I can do this in a very legitimate way because of the knowledge I possess of design principles and the Adobe design programs. I also created this site to show my basic HTML and CSS coding abilities.
  4. Audience: My audience is anyone looking to hire me to create logos, web pages, or any other projects that fall under the graphic design category.
  5. Top Thing Learned: The top thing I learned is that coding HTML and CSS is not nearly as scary or intimidating as I’ve always thought. I feel better about my abilities now, knowing that I can at least do the basics. Making this web page was actually kind of fun and so much simpler than I originally thought. 
  6. Color scheme and color hex(s):  I used a monochromatic color scheme: black and white. The hex code for white is #ffffff, and the hex code for black is #000000.
  7. Title Font Families & Category: I coded for Century Gothic. I coded for Verdana as a second choice. These are both in the sans-serif categories. I coded for sans-serif as my third choice.
  8. Copy Font Families & Category: I coded for Cambria. I coded for Georgia as a second choice. These are both in the oldstyle category. I coded for a serif as my third choice.
  9. Changes made to the CSS: I changed the whole background to white. I made the body copy text cambria font. I made the heading 1 background black, and I made its text white. I also made this text Century Gothic. I made the size 3.2em. I put 12px padding on each side of the heading 1 text. I made the heading 1 background 603 px  in order to line up with the rest of the elements on the web page. I put a 30 px margin on the bottom of the heading 1 background to keep it from crowding the rest of the elements on the web page. I made all the heading 2’s century gothic font and put the following padding around each one: 25px, 25px, 10px, 25px. I made those headings and all body copy white. I created black div boxes for the heading 2’s and body copy to go in. I made it so they were each in a block shape and so they’d line up with each other in a 2×2 rectangle with the logo image. I added 21 px of bottom padding to the “Tools/Skills Used” heading. I made the body copy font and list item font 1.1em in size. I added margin px to the image and the div blocks to make the image and the div boxes all align perfectly with each other. I added padding to the text in the div’s in order to make them align with the headings and to keep them from being too close to the div edges. I added text and a link at the bottom of the web page. The text and link are black cambria font and are 1.95em in order to align with the rest of the web page. I changed the width of the body to 660px.
  10. Word Count: 209
Advertisements

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