Project 7: Web Page


P7JeanetteLarsenScreenshot Description: I created a webpage to showcase a logo I created for a company.

Process (Programs, Tools, Skills): I started this project with an html file. Using TextWrangler, I added a correct title, edited the content of the list and headers, added a footer and hr break line, and a div section to group the body together. I inserted my correctly sized PNG logo file. I also added code in to connect the code to a CSS style page.

In the pre-formatted CSS page I changed the size, color, and padding of most of the items. The colors that I used came from my logo design. To do this, I opened my logo in Adobe Photoshop and used the color picker tool to find the hex code for each of the colors. Then I could change the original colors that were in the file. Then I changed the fonts and made sure to add several options, which helps with the multitude of differing browser and font libraries people have access to. In addition, I worked with the hr break line and the image to make sure they worked nicely together. I stylized the div, hr, and footer section.

I made sure to both a CSS validator and an HTML validator. Doing this actually helped me to catch a mistake I had made, even though the browser did not show it when running the page.

Message:  My goal was to create a logo for the plumbing company, Drip Drop Plumbing. The fix all sorts of plumbing issues.

Audience: Any person who is needing a good plumber to help them.

Top Thing Learned: I learned how to stylize an html page using CSS. Doing this helped me to see the importance of using specific and correct semantics in html that make this process easier and help communicate your idea more clearly.

Color scheme and color hex(s): Triadic: Green- #99cd6c; Blue- #283592; Orange/Brick- #d44427;  Blue-gray- #5C6284;

Title Font Families & Category: “Trebuchet MS”, Helvetica, sans-serif; — San Serif

Copy Font Families & Category: “Palatino Linotype”, “Book Antiqua”, Palatino, serif; — Old Style Serif

Changes made to the CSS: I changed the header color and size, the background color, the body and list size and color, I changed the padding around all the objects, I added a footer and edited the type and link within, I also added and stylized a break line, and I deleted the border around the body.


2 thoughts on “Project 7: Web Page

Leave a Reply

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

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