Grow your CSS skills. Land your dream job.

New to everything with website code and design, Help with first website

  • # September 3, 2013 at 12:13 pm

    Hi, I am new to everything. I have discovered how awesome website creation and design is and I have been learning how to code, Css and web design on my own. I am sure I will / have been making mistakes but I want to learn what is wrong and how I can fix it. I want to become really good at this so all the help I can get is wonderful so thanks in advance!

    I am building a website for my father’s liquor store. It is still in the design/ creation stages so it is not up ( there is not content on the site just jiberish to see how future content will look like)

    The website is: http://pantryliquors2.com/
    The Breakdown:
    1.) At this point I am mainly working on the homepage. The homepage really shows the color scheme. I went with a triadic color scheme. I also read up on color theory and added this orange-red like color to the design (that also fit into the triadic color scheme) to catch the users attention. So first question is give me your opinion on the color of the site so far and there locations.
    2.) Give me your advice/opinion on the websites background. – I went with a wood texture and then near the footer I added a Png image of a wine stain to give it some affect.
    3.) What do you think about the code so far of the website?
    4.) I can’t find any links that tell me what to add to css to make sure the website renders in older versions of Internet explorer ( and should I worry about this , I see its 50/50 in opinions on this topic)
    5.) Any tips ?

    Thank you, and please understand I am only about 4 months in teaching myself about all of this, I am completely new. But I really want to give me fathers store a great website.

    # September 3, 2013 at 5:54 pm

    First off, I think it’s great that you’re learning all this new stuff! It’s not easy and to do it on your own is quite impressive.

    You have a lot of different type styles going on… pick one or two and use them throughout. I’m not sure if the wood grain is a good fit, either by concept or color, with what you’re doing here. Maybe put some color into your header and drop the background altogether. It’s probably more distracting than anything.

    With no experience in design or website construction, maybe for a first attempt you’d be learning more — with better results — by using a template that works with your color scheme and content. There will still be lots of things you’ll have to figure out, but at least you’ll have the design and structure to start with.

    # September 4, 2013 at 6:08 am

    @ian.izaguirre001, I have to say: “Nice jod, buddy”, since you only use 4 months to learn CSS,HTML and so on.In my opinion, I don’t like the basic color in your website, I prefer some color which may make your website look elegant/noble and highlight the product you sold.As your basic color, what about dark_red? This may help.http://www.colorschemedesigner.com/

    # September 4, 2013 at 7:29 am

    @janet4now and lrelia – Thank you so much for your kind words. So I have some questions about your advice , and I would love feedback on what I write , thanks for helping me:

    1.) “The background” – Ok so I see you do not like the wood grain because you do not think it is a good fit. The thing is it is a liquor store website , shouldn’t the background have something to do with a liquor store? I searched hours upon hours before settling on this wood grain background and then added a background wine stain to it ( near the footer). The wood grain background actually matches the floor of my fathers liquor store when you walk inside. So that’s why I settled on that , plus wine is kept in wooden barrels, whiskeys etc all have to do with wood. So I though this background was a much better match then a bland one color background or a gradient that just has nothing to do with a liquor store. Even browsing other liquor store websites I noticed many also go with wood textures.

    2.) janet4now , you said you don’t like the different type styles going? Is this referring to font-styles like Georgia , times new roman etc? If it is , does a website generally stick to 2 or less ? and I do believe I only use Georgia primarily with one ( so far) Comic Sans MS heading.

    3.) As for putting color into my header that will be tough to make it flow because the logo image I was given was not a Png , so I can not nor do I no how to change the background of the logo which is like an off white , so I went with a white header for the illusion that it blends in.

    4.) “by using a template that works with your color scheme and content” – I am using the WordPress Graphene theme and I have created a child theme with which I work with to modify the site. Is this what you are referring to?

    @lrelia

    Thank you for the kind words :-)

    1) for the color I have on my website I have kept it to the triadic color scheme I got when using Kuler by Adobe .

    Its as follows:
    White: # ffffff

    Red/orangish color ( focal color to draw the eyes) : # Ef4939

    Black/grey: # 333333

    And That’s about it I believe.

    I honestly believed that this color scheme made the site look elegant. What do you think is a better fit?
    I went with the red/orange color to purposely highlight product- was this not accomplished?
    I went with a triadic color scheme. Should I change color schemes or just the actual colors and keep it triadic?

    • I read up briefly on color theory ( I will get more into it with time) and I chose the red to capture the eye, the grey is neutral so it evokes no emotion. I tried to keep it simple.

    Thanks for taking your time to help me, I hope to hear back from you again.

    # September 4, 2013 at 12:12 pm

    Regarding your questions: I’m not trying to “convince” you of anything, just offering my opinion.

    The background just doesn’t go with liquor stores to me. It looks more like a home improvement or flooring company site. Wine barrels would be great, or just leave it plain and let the site be interesting enough to not need a background. The content is what should stand out. You can adjust the levels in photoshop on the logo so the background becomes white. You can change it to a bitmap, save a png or whatever. The color can be added to the navigation bar, above the logo, to the circle with the “more” in it… there are ways to make that top be more interesting.

    There are at least 6 different fonts being used. Some are probably coming from plug-in style sheets.

    I see that you’re using a template, but you’ve changed it entirely and are now basically designing from scratch. My suggestion was to use a template that you could use the typography, colors and basic layout and only need to make MINOR changes.

    Good for you to open up your site for feedback…

    # September 5, 2013 at 8:12 am

    Thank you for your response and help. I really value your opinion. I am not sayin your trying to convince me of anything lol I just like to ask in depth to get a better understanding of the “why” your saying certain things. I am trying to expand my small understanding of web design and one of the ways is by lots of negative feedback :-).

    • The first two things I will be working on are :

    1.) changing the fonts and narrowing them down to only two.

    2.) changing the body background

    I have some questions though if you dont mind helping :-)

    1.) In webdesign the body background of the website does it generally dictate the color of the entire website? like for example if my background is a blue gradient then I have to have blue shades in the content colors ?

    2.) I cannot figure this out using Css ,- For example: I want to have an image take up 10% of the body background and then I want to have a solid color take up the remaining 90 % of the body background. How would I code this useing just css? In firefox if you look at my body css useing firebug you will see something like

    body{ url of image } repeat transparent;

    something to that affect. So what would I need to add on to create my desired background?

    Thank you for helping me again

    # September 11, 2013 at 8:35 pm

    Ok I have read a ton and I would like to know if you think you see an improvement :-)

    # September 12, 2013 at 5:21 am

    I like the colors better, for sure. There are style and script sources showing up in the body tag instead of the head tag. You may want to check on that. Try using the validator http://validator.w3.org/.

    Maybe eliminate the drop shadows on the type and container. Your colors have plenty of contrast without it and this would be more consistent with how the type looks elsewhere.

    # September 12, 2013 at 3:26 pm

    Where in my WordPress Dashboard would I go to fix errors like these? Since these errors don’t appear to be errors in my child theme? What folder would I search for ?

    # September 12, 2013 at 4:07 pm

    You’d have to look at your source code and find the line #’s errors are occurring and try to figure out where they are coming from.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".