HTML & CSS Coding Project

screen-shot-2016-11-09-at-10-21-27-pm

DESCRIPTION
The purpose of this assignment was to create a webpage using HTML/CSS showcasing the logo designed for the Buisiness Identity Project.

PROCESS (Programs, Tools, Skills, FOCUS principles)
1. I had already created my logo for the Buisiness Identity project which I made in Adobe Illustrator.
2. First, I resized my logo to be 300 px on the long side.
3. Next I typed up all of the information that I wanted to use on the website and added the <p>, <h1>, etc. tags to make it look organized.
4. Then I created my CSS file and made sure to link it in the HTML code.
5. I made changes to the CSS file that were similar in color to the logo. I also used a contrasting sans-serif font for my body copy.
6. For the background, I used a free image from the free Subtle Patterns website. I chose the diamond background because it was similar to the diamonds used on the crown in my logo.
7. I validated both my HTML and CSS codes to make sure everything was running smoothly.

CRITIQUE PROCESS
I critiqued Christine Winward and Lindsay Handley on Facebook. I was unable to post to Facebook to receive critique but my husband gave me a few very helpful critiques. He suggested that I use a sans-serif font for my body copy instead of a serif font because it made it look too messy. The sans-serif font made it much easier to read. He also suggested that I add extra space between the lines in my text to make it more readable. He also pointed out a few spelling/ grammatical errors.

MESSAGE
To understand my process and reasoning for creating my Jack and Jill Children’s clothing store logo.

AUDIENCE
Parents seeking to buy sophisticated and classy clothing for their children.

TOP THING LEARNED
It is better to first type out the content in a program that will spell check for you and then add the tags.

COLOR SCHEME & COLOR NAMES
Complementary // Purple & Yellow

TITLE FONT NAME & CATEGORY
 Bodoni// Old Style/Serif

COPY FONT NAME & CATEGORY
Open Sans // Slab Serif

THUMBNAILS OF ANY ORIGINAL, UNEDITED IMAGE(S) USED IN THE PROJECT
whitediamond

SOURCE OF EACH IMAGE (website name and hyperlink)
http://subtlepatterns.com/white-diamond/

4 thoughts on “HTML & CSS Coding Project

  1. Great job hannah! This was a tough assignment and you conquered it! I love the purple color you chose, it pops nicely against the crown logo. My only thought is try adding one more color to go with the purple and see how that affects your website’s feel. I also like the fonts you have chosen. They are fun yet still very readable. I think you are on a great road towards some awesome web designs! 🙂
    Here is a link to another blog:
    https://designandartprojects.wordpress.com/2016/11/09/9html-css-coding-project/comment-page-1/#comment-13

    Like

  2. Hannah,
    Looks good. I agree with Missy Holland on most of her comments. The only thing I would do is use the yellow in more places, this way the colors stat matching your logo. If you think about it using different shades of the yellow as you did with the purple I think It will stand out more. Just my opinion.

    Here is a link to my project.
    https://designandartprojects.wordpress.com/2016/11/09/9html-css-coding-project/
    Here is a link to Lisa Wharton’s project.
    https://lisawhartonportfolio.wordpress.com/

    Like

Leave a comment