Results 1 to 10 of 10
  1. #1

    Any CSS gurus in here? Need feedback on this code

    I'm submitting this mockup for a potential employer today and would like to have some people critique the code to make sure it meets standards and has no glaring issues:
    http://www.outinthegarage.com/clients/bbi/

    I know that there probably shouldn't be any style code on the page itself but I think I can get by with that as it was a rush job. Anything else that might make me look incompetent on the page or in the style sheet? It's going to be used as a template file eventually.

  2. #2
    Join Date
    Aug 2005
    Location
    Barcelona, Spain
    Posts
    3,397
    Sorry, but I'd fully disapprove the current state of this document. The CSS consists mainly of poorly named classes like red_10 and text1, etc. the inline styles are not faster than coding clean, especially on the long run and overall I suggest to fix this before you give it to them.
    hi there!

  3. #3
    Quote Originally Posted by Jay August View Post
    Sorry, but I'd fully disapprove the current state of this document. The CSS consists mainly of poorly named classes like red_10 and text1, etc. the inline styles are not faster than coding clean, especially on the long run and overall I suggest to fix this before you give it to them.
    When you say the "inline styles" you're referring to the style code placed in the document instead of the css doc? If so, I figured that would be an issue and planned to move it all over to the stylesheet. As for the naming scheme of the classes, would you prefer to see more descriptive names? Are those the two biggest issues?

  4. #4
    Join Date
    Oct 2009
    Location
    Canada
    Posts
    482
    Syntax error on line 37:
    <a href="#"><img src="images/cat1.gif" alt="" border="0""></a>

    Need to remove one quotation mark.

    Also has 2 w3c errors.

    Critique: You're using in-line styles which I personally think causes inconsistency if the site grows. All styles should be in your CSS document.

    Also, you should be redefining tags and resetting them so they are consistent accross browsers. I do not see one redefined tag in your CSS other than "a" and "body"... And you haven't used any headings. Google can't read images.

    Your document is HTML 4.01. You should be using at least XHTML 1.0 Transitional or Strict and possibly HTML5 depending on your employers requirements.
    Owner Media-Hosts.com AS14442 Canadian Web Hosts Since 2002
    █ 24/7 365 Support, 100% Network Up-time Guarantee
    █ Web Development Specialists (E-Commerce, Inventory, Design)
    OpenVZ.ca Reliable, Affordable VPS Servers and Web Hosting. IPv6 Available

  5. #5
    Quote Originally Posted by media-hosts_com View Post
    Syntax error on line 37:
    <a href="#"><img src="images/cat1.gif" alt="" border="0""></a>

    Need to remove one quotation mark.

    Also has 2 w3c errors.

    Critique: You're using in-line styles which I personally think causes inconsistency if the site grows. All styles should be in your CSS document.

    Also, you should be redefining tags and resetting them so they are consistent accross browsers. I do not see one redefined tag in your CSS other than "a" and "body"... And you haven't used any headings. Google can't read images.

    Your document is HTML 4.01. You should be using at least XHTML 1.0 Transitional or Strict and possibly HTML5 depending on your employers requirements.
    Do you have a link to some more info on redefining/resetting tags?

    I do plan to move all the inline styles over to the stylesheet before I send it over.

  6. #6
    Join Date
    Jan 2010
    Location
    San Francisco
    Posts
    1,799
    Quote Originally Posted by media-hosts_com View Post
    Your document is HTML 4.01. You should be using at least XHTML 1.0 Transitional or Strict and possibly HTML5 depending on your employers requirements.
    I'm curious, since you're throwing out recommendations like the above, do you know what the difference is between HTML and XHTML besides markup changes?

  7. #7
    Join Date
    Oct 2009
    Location
    Canada
    Posts
    482

    *

    Quote Originally Posted by ludachris View Post
    Do you have a link to some more info on redefining/resetting tags?

    I do plan to move all the inline styles over to the stylesheet before I send it over.
    A quick example would be like this:

    Defining your headings

    h1 {
    }
    h2 {
    }
    h3 {
    }

    then common elements
    p {
    }
    a {
    }
    a:hover {
    }

    etc... this way whenever you create a <p> take or <h1> or whatever, the style is always the same throughout the site.

    from there you can define more specific styles. So in your main divs you can style those according to preferences.


    example:
    #productListing {
    }
    #productListing h1{
    }
    #productListing p{
    }
    #leftNav {
    }
    #leftNav li {
    }

    etc etc...

    Ideally you want to create the site so that you set the standard for the rest of the pages and don't specify any fonts,sizes, spacing, colours on major elements.

    from there you can define classes that can be used repetitively like:

    .alignRight{
    }
    .floatLeft{
    }

    these can be used anytime.

    Etc etc...

    One other Important note is different browsers and different versions of those browsers apply different "Default Values" to these elements.

    Quick example would be IE vs. Firefox. If you don't specify padding/margins for your <p> tags your spacing will be different on the different browsers, you'll notice this as you go along.

    A good basis sometimes is to reset everything to 0 and go from there.
    Owner Media-Hosts.com AS14442 Canadian Web Hosts Since 2002
    █ 24/7 365 Support, 100% Network Up-time Guarantee
    █ Web Development Specialists (E-Commerce, Inventory, Design)
    OpenVZ.ca Reliable, Affordable VPS Servers and Web Hosting. IPv6 Available

  8. #8
    Join Date
    Oct 2009
    Location
    Canada
    Posts
    482
    Quote Originally Posted by WickedFactor View Post
    I'm curious, since you're throwing out recommendations like the above, do you know what the difference is between HTML and XHTML besides markup changes?
    Markup is part of it... <br> vs. <br />

    From an accessibility standpoint, the main differences are defining where elements can and cannot be. For example some elements cannot be placed inside specific things.

    This page explains it better than my blabbing: http://www.w3.org/MarkUp/

    At the end of the day, I stated that more to be aware of it rather than recommending one or the other. Picking one isn't really wrong, but it depends on your audience and/or company requirements

    Although, if someone did a <p align="right"> inside XHTML1.0 Strict than that is wrong and shows that the developer doesn't know what the declaration means.

    Same with writing a <br> in an XHTML document etc...
    Owner Media-Hosts.com AS14442 Canadian Web Hosts Since 2002
    █ 24/7 365 Support, 100% Network Up-time Guarantee
    █ Web Development Specialists (E-Commerce, Inventory, Design)
    OpenVZ.ca Reliable, Affordable VPS Servers and Web Hosting. IPv6 Available

  9. #9
    Join Date
    Aug 2005
    Location
    Barcelona, Spain
    Posts
    3,397
    Quick example would be IE vs. Firefox. If you don't specify padding/margins for your <p> tags your spacing will be different on the different browsers, you'll notice this as you go along.
    a quick

    * {margin: 0; padding: 0;}

    would solve that!
    hi there!

  10. #10
    Join Date
    Oct 2009
    Location
    Canada
    Posts
    482
    ^ Yup! but to the OP, the only way to get into CSS is doing it and experimenting.

    Also using other sites as an example can help ;-)
    Owner Media-Hosts.com AS14442 Canadian Web Hosts Since 2002
    █ 24/7 365 Support, 100% Network Up-time Guarantee
    █ Web Development Specialists (E-Commerce, Inventory, Design)
    OpenVZ.ca Reliable, Affordable VPS Servers and Web Hosting. IPv6 Available

Similar Threads

  1. Photoshop to CSS, need gurus' advice
    By rbwire in forum Web Design and Content
    Replies: 9
    Last Post: 08-20-2008, 01:22 AM
  2. Browser incompatibilities: xHTML / CSS gurus please help!
    By foobic in forum Web Design and Content
    Replies: 2
    Last Post: 07-24-2008, 07:13 PM
  3. Replies: 5
    Last Post: 06-08-2008, 03:51 PM
  4. how to specify css code only for IE?
    By Draco in forum Web Design and Content
    Replies: 2
    Last Post: 12-04-2005, 11:16 PM
  5. How to code this in PHP or Perl? coding gurus please help!
    By hostchamp in forum Programming Discussion
    Replies: 35
    Last Post: 02-15-2005, 04:37 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •