SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How should I start learning CSS3 and HTML5 (is there any websites that might help)

    Hi

    I have a feeling that I should have started to learn CSS3 and HTML5 earlier (not sure) but I am still learning other things (php and so forth) so I planed to lear CSS3 & html5 for later

    but I think that it might be nice to learn them from now. would you be able to share any useful links which would help me start learning?

    thank you for your help

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    There isn't a big rush with this, as both of them are a long way off being finished. If you Google those topics you'll find a wealth of information on the web. If you want everything presented to you on a convenient platter, check out this new SitePoint book, which sounds perfect for your purposes:

    Home - HTML5 & CSS3 for the Real World
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I really should have asked the question to get that answer::
    "There isn't a big rush with this, as both of them are a long way off being finished"

    Considering I have a lot to learn on php and js and so forth. Do you think I would be in a disadvantaged side if I went in a job interview (not freelance of course) or there these two not at this stage wet.

    ps - I always wanted to make sure: what are these (css,html, php ..) officially called - are they called "technologies" or are they all considered programming languages

    Thanks ralph.m

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by akurtula View Post
    Do you think I would be in a disadvantaged side if I went in a job interview
    If the interviewer knew a lot about the web, was wise and intelligent, then no. BUT … that's the kind of interviewer you only meet in dreams. I suspect you'll need to be able to throw around the right buzz words to impress people these days. You just need to be aware of the basics of HTML5 and CSS3 at this stage, as most of it is not really usable. A few little things like CSS3 rounded corners will get you a long way. I think if you read that book (you know, instead of watching TV for a few nights) you'll be pretty well prepped.

    ps - I always wanted to make sure: what are these (css,html, php ..) officially called - are they called "technologies" or are they all considered programming languages
    They are all languages (categorized as styling, markup, programming etc.) but yes, I also consider them technologies. I'd be interested in other responses to this. "I'm up to date with the latest web technologies" sounds sexy, but to me it's the same as saying "I'm proficient in (web languages such as) HTML, CSS and PHP".
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I like the reply, thanks for your help
    I will definitely get that book

    Whether I wanted or not I got the basics of css3 (in terms of terminology). so if I had to I could probably be able to through buzz words and sound as if I know how to use them (basically reproduce what I read in different blogs - but I don't know how to use these at all, as as I said I concentrated in the "technologies" that I really need to expand on).

    At university (on assignment briefs) they called them web technologies but I don't often see this reference among such forums

    thanks a lot

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by akurtula View Post
    I don't know how to use these at all
    With CSS3, it's really just more options, such as

    Code:
    element {border-radius: 5px;}
    However, as most of it is still experimental in most browsers, you have to use proprietary prefixes, so the above rule more commonly looks like this at the moment:

    Code:
    element {
      -moz-border-radius: 5px; /* for Firefox */
      -webkit-border-radius: 5px; /* for Safari and Chrome */
      -khtml-border-radius: 5px; /* for Konqueror */
      -o-border-radius: 5px; /* for Opera */
      border-radius: 5px;
    }
    Essentially, HTML5 just has some new elements like <nav>, <header> and <footer> (and some different syntax rules) but to use them at this stage you have to dance around a bit, especially in browsers like IE8 and under, which can't handle unknown element like this without the aid of JavaScript.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    That book isn't really a reference material for markup and very niche so if you want to learn said non normative markup it's probably not the best of books. It basically just briefly covers the items related to that fictitious newspaper demo site and how and to apply some JavaScript hacks. It does cover some common CSS 3, which might be useful if you are a little outdated.

  8. #8
    SitePoint Zealot PatrickSamphire's Avatar
    Join Date
    Jul 2006
    Location
    UK
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think it's worth learning both now. They are not terribly difficult, and while both will certainly change in the future, I think it's worth keeping up with the cutting edge of development so that if you *are* called upon to use them for a job, you'll know how and you'll know the pros and cons of using them. That'll put you ahead of people who haven't bothered to learn them and then have to scramble to catch up.

    The best way to teach yourself these technologies is to build yourself a website using them. I learnt HMTL5 by building my portfolio site with it, and while I would do parts of it differently now (fewer tags, for example), there is absolutely no substitute for trying everything out to see how it works.

    CSS3 elements have been around for a long time, in one form or another, and you'll find a lot of tutorials on them. For HTML5, try going through the HTML5 Boilerplate - A rock-solid default template for HTML5 awesome. and understanding what every part of it does (and then stripping out all the stuff you won't need). Also take a look at HTML5 Doctor, helping you implement HTML5 today and read through the whole thing.

  9. #9
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Site cracks me up:
    Code:
                                        
                                   -o/-                       
                                   +oo//-                     
                                  :ooo+//:                    
                                 -ooooo///-                   
                                 /oooooo//:                   
                                :ooooooo+//-                  
                               -+oooooooo///-                 
               -://////////////+oooooooooo++////////////::    
                :+ooooooooooooooooooooooooooooooooooooo+:::-  
                  -/+ooooooooooooooooooooooooooooooo+/::////:-
                    -:+oooooooooooooooooooooooooooo/::///////:-
                      --/+ooooooooooooooooooooo+::://////:-   
                         -:+ooooooooooooooooo+:://////:--     
                           /ooooooooooooooooo+//////:-        
                          -ooooooooooooooooooo////-           
                          /ooooooooo+oooooooooo//:            
                         :ooooooo+/::/+oooooooo+//-           
                        -oooooo/::///////+oooooo///-          
                        /ooo+::://////:---:/+oooo//:          
                       -o+/::///////:-      -:/+o+//-         
                       :-:///////:-            -:/://         
                         -////:-                 --//:        
                           --                       -:
    And liberal sprinklings of the word "awesome" everywhere. As if they were Mozilla or something.


    If you know the basics of HTML and CSS (the current, working versions) you will easily pick up the extra junk added to both. Any employer who can't realise that is someone you *don't* want to work for.

    Then again, who am I to be saying stuff like that? Lawlz.

    ++ on the HTML5 doctors, though. It's a nice site to keep up on what has changed and what hasn't (often everything from tags that have changed like the <hgroup> waffle, or more often Best Practices, like how <nav> went from "Use It Absolutely Everywhere" to "Stick to major navigation").

  10. #10
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the links and suggestions, I will read those,
    I searched around and found lots of post like "top 30 tutorials on css3" - so I will be looking at those, but I thought there was any "must know" recourse/thing that I should know: for example I did not come across the two resources @patrick provided abover (at least I dont think I have)

    thanks

  11. #11
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    You should have run across the doctors site... it's run by "doctors" which are mostly people who are actively working on the HTML5 spec themselves. (every so often, they get mail from people thinking it's a medical site... and Bruce will sometimes post the hilarious descriptions of puss-filled sores or other bodily complaints for the lawlz...)

    You might also want to check out Bruce Lawson's blog, even tho it's private: Bruce Lawson’s personal site : HTML5

    Yeah, that's right, he's riding a unicorn fighting Nazis with the power of HTML5 and a "lazer" gun. Yup.

    If your CSS is good, learning some CSS3 junk from any decent tutorial site should be fine.

    HTML5 you need to be a bit more discerning about. Resources from Opera, Mozilla or Chrome guys (like Paul Irish) should be pretty safe. The important thing to remember about HTML5 is it's in Draft. That means anything, even <header> tags and stuff, can change at any time (even though obviously some of it is less likely to change than others... there are "more stable" areas and "actively contested" areas).

    Also be aware there is a growing split between the WHATWG version of the specs and the W3C version... mostly they split on the newly-announced Schema.org plan (vs W3C's RFDa plan) and accessibility stuff (which isn't a big deal really... if you care about accessibility and want to follow "the spec" you can just follow W3C for now and even if a lot of stuff ends up being left out of the WHATWG version, you as an author should always be free to add it in anyway).


Tags for this Thread

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
  •