SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: learning css

  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    learning css

    Sorry for my bad english. In order to learn css, I wrote a page where I can see what happens changing commands (js).
    I'm not sure it is well done. Anyone can tell me if there are errors, or what is missing?

    http://www.ristomagic.com/ristomagic/picker/index.php

    thanks

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    For me it would just be easier to make changes in the CSS file adn hit F5 (refresh) to see changes.

    Though there are many CSS properties that are difficult to "see" always.

    I dislike w3schools.com, but they do have a "TryIt" editor. Where you can write real CSS and HTML and see the results immediately.

    JSfiddle would be another pre-built tool that immediately shows you results of your code.


    Later you will write CSS and when you don't see what you are trying to make, you come here and post the code and ask "why am I not getting (x)?" and we can explain what your code is doing and why you don't see x.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I dont know if you meant that you are trying to create an online tool or not. If you are, I guess I just find the UI confusing, even if teh features promise to be robust. Do look at w3schools.com, "tryIT" UI.

    If what you are trying to do is to be able to see for your self what each propriety does, I would think it would think a good tool would be FIREBUG. FIREBUG lets you add/remove/disable/enable code live onscreen! There a quite a few advantages to Firebug that come to mind

    1) It does what you are intending, on any piece of code. So you could start with a simple HTML document you made yourself and use Firebug to inspect it... and move up to inspecting complex coding masterpieces. This allows you to learn formulaically, that is you can come in with your own assumption of how the property behaves, and then have a sample ( and a calculated value).

    2) Firebug show you which rules are overriding which.. so along with a property you get to see HOW THE CASCADE works. This is just as important in CSS as knowing what "command" does what

    3) Because you can tweak style sheets live and non-destructively you can test out your hypothesis' of how rules behave. Personally I find that to be a great learning aid... beign able to to confirm if the way I THINK something should work is teh way it ACTUALLY does work.

    4) Firebug is already a great debugging tool for experts, so once you do master CSS you have also become familiar with a great way to DEBUG your work ( as opposed to going through the effort of coding a learning tool which you intend to abandon once you're semi-comfortable with CSS)

  4. #4
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Think you both are right. I know w3schools.com, and less Firebug. I'm lazy. I tought in w3schools.com I have to write code, while in my page with only 2 clicks I can see float:left and float:right, but unfortunally css is not so simple. Probably best to do is to follow Firebug. I will do it.
    thanks a lot

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Writing code by hand is the slow but best way to learn. And guess what? I'm still writing code by hand. You learn to see how terrible the code is from machines that write it for you. When you're new you don't see how bad it is : )

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Arnhem, The Netherlands
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Although I totally agree with poes and dresden_phoenix, it just so happened that Nettuts+ posted an article today on how to do what you want to do: http://net.tutsplus.com/tutorials/ht...nto-an-iframe/

    It's the technique that's probably also used on w3schools.

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Ah, yeah, they mention JSBin which sounds like JSFiddle. Which also do the same thing except those are on other's servers instead of your own machine.

  8. #8
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    w3schools site is best site for learn the CSS quickly for beginners....
    Last edited by spikeZ; Nov 24, 2011 at 05:48. Reason: Fake sig removed

  9. #9
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Arnhem, The Netherlands
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by francistomas View Post
    w3schools site is best site for learn the CSS quickly for beginners....
    I wouldn't be too sure about that: http://w3fools.com/

  10. #10
    SitePoint Wizard frank1's Avatar
    Join Date
    Oct 2005
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sitepoint css books are also very good and practial...
    They worth reading


Bookmarks

Posting Permissions

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