Results 1 to 8 of 8

Thread: CSS Tutorial

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    CSS Tutorial

    I need some help with my CSS skills. I know how to write CSS, like I understand it's syntax, however I have a tough time actually implementing it. To give you an idea, I know how to write and implement HTML and JavaScript, so I'm able to write the content of the webpage and I'm able to program any client interactions, but I have the toughest time creating the layout of my webpage. I spend hours on trying to get my webpage to look right using CSS.

    Whenever I first started programming with HTML, the 'norm' was to use Tables to layout your webpage. It was easy to initially get the page to look like how you wanted it to, but it took a lot of unnecessary bandwidth and it just wasn't right. So I appreciate how CSS evolved web developing, I just can't quite grasp how to use it properly.

    What tutorials/books do y'all suggest?
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  2. #2
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,597

    Re: CSS Tutorial

    I think you either got it or you don't. I mean i am struggling with CSS, make a page pretty, fix the corners, choose the images. In the end for me is easier to be using something ready and then customize it, that is more difficult than actually create the CSS but the customized will always look better than what CSS i have in my mind.
    No tutorials or books, sorry.
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  3. #3
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: CSS Tutorial

    Mozilla Developer Network always has good documentation. dochub.io is great for a quick lookup. If you have time, just go through the entire list of CSS properties and read up on what they do.

    Some other great links, in no particular order:

    http://css-tricks.com/
    http://www.html5rocks.com/en/
    http://movethewebforward.org/
    http://www.webplatform.org/
    http://www.paulirish.com/
    https://isobar-idev.github.io/code-standards/
    http://www.sitepoint.com/
    http://alistapart.com/

    I would suggest reading up on the "Box model" as that is a basic part of CSS. Flexbox is also good to know. You should also be familiar with the different values for positioning (absolute, relative, fixed) and display (inline, inline-block, block) and how they apply to various elements/properties. That will save you many headaches. (eg. knowing that "width" doesn't apply to "inline" elements).

    Learn to use your browser's developer tools. All major browsers now have built-in tools that let you dig in to the scripts/styles behind your site.

    The best way to learn is to just "do it", and read up on blogs/forums for when you get stuck on something.
    Last edited by tr333; Sep 28th, 2014 at 07:29 PM.
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

  4. #4
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: CSS Tutorial

    A few tools to help out with development:

    Using LESS or SASS can be a huge productivity booster.

    Try using HTML5 Boilerplate or Yeoman for your next project.

    Autoprefixer is nice.

    http://mothereffinghsl.com/ (HSL is awesome!)
    http://mothereffingtextshadow.com/
    http://mothereffinganimatedgif.com/ (not CSS, but still awesome!)

    HTML5/CSS3:
    http://modernizr.com/
    http://html5readiness.com/
    http://html5please.com/
    http://caniuse.com/
    Last edited by tr333; Sep 28th, 2014 at 07:16 PM.
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

  5. #5
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: CSS Tutorial

    If you're posting an example, put it on one of the code playgrounds. Much easier for other people to test it out and fiddle with your design.
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

  6. #6
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: CSS Tutorial

    And one more thing...

    Usability is one of the most important aspects of web development (or any UI development). Jakob Nielsen has some great articles on UX.

    I've only ever bought two books on web development. Don't Make Me Think and Rocket Surgery Made Easy by Steve Krug. Nothing specific to CSS in there, but a website is nothing without good UX. DMMT especially will (hopefully) transform the way you think about designing your websites.
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

  7. #7
    PowerPoster Nightwalker83's Avatar
    Join Date
    Dec 2001
    Location
    Adelaide, Australia
    Posts
    13,344

    Re: CSS Tutorial

    Quote Originally Posted by sapator View Post
    I think you either got it or you don't. I mean i am struggling with CSS, make a page pretty, fix the corners, choose the images.
    That is why is called web Design! Software on the other hand is more about the code behind than the design. Don't get me wrong, software design is still important but a big grey background on a webpage is a bit more of putting than a grey background on a software program.
    when you quote a post could you please do it via the "Reply With Quote" button or if it multiple post click the "''+" button then "Reply With Quote" button.
    If this thread is finished with please mark it "Resolved" by selecting "Mark thread resolved" from the "Thread tools" drop-down menu.
    https://get.cryptobrowser.site/30/4111672

  8. #8
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,597

    Re: CSS Tutorial

    Quote Originally Posted by Nightwalker83 View Post
    That is why is called web Design! Software on the other hand is more about the code behind than the design. Don't get me wrong, software design is still important but a big grey background on a webpage is a bit more of putting than a grey background on a software program.
    Ye not my cup of tea. I am at stick people drawing when it comes to design but i have to do some sites, so i just "borrow" stuff or free templates.
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

Posting Permissions

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



Click Here to Expand Forum to Full Width