Results 1 to 24 of 24

Thread: HTML5/CSS3: Teach me the basics?

  1. #1
    Join Date
    Sep 2007
    Location
    Australia, NSW
    Posts
    934
    Mentioned
    6 Post(s)
    Quoted
    145 Post(s)

    Default HTML5/CSS3: Teach me the basics?

    I was looking at making an interactive website (just for funsies) and I was after a little help A site that interested me was the following:

    http://michel-doudin.com/

    I like how it is clean and interactive without using flash. I researched a few of the things and found that these kind of sites are made using HTML5 and CSS3. The things I want to learn, if anyone knows how:
    • Mouseover (change of image like on the linked site)
    • Keyboard input (for possible navigation)
    • Transitions and animations (for navigation around the page)


    Post some basic code representing some of these things and I'll be very happy, and may give you a special prize I know @Kyle Undefined; is a good web developer; anyone else?

    Interacting with the background like this: http://www.ro.me/ is also very neato indeed!
    Last edited by Press Play; 03-06-2013 at 11:22 AM.

    INACTIVE
    How-to: Make S.M.A.R.T. less laggy

    Sell me your Maple Shieldbows (u)! Up to 95gp ea!

    My Scripts:
    Ivy Chopper Ultra [RS3] | Fantastic Fletcher [RS3]
    99 x78 | 99 x10 | 99 x2 | 99 x12


    Use the REPORT tags when posting progress reports to make life easier (:
    [REPORT]Put progress report in here![/REPORT]

    Super Savvy Smither V1.06Cool Classy Cooker V1.02 [EoC]

  2. #2
    Join Date
    Feb 2012
    Location
    DON'T PM ME ASKING FOR STUFF
    Posts
    2,170
    Mentioned
    38 Post(s)
    Quoted
    423 Post(s)

    Default

    codecademy is a GREAT place to learn various web languages

    Kyle does know A lot of these web based languages.

  3. #3
    Join Date
    Sep 2007
    Location
    Australia, NSW
    Posts
    934
    Mentioned
    6 Post(s)
    Quoted
    145 Post(s)

    Default

    Quote Originally Posted by xtrapsp View Post
    codecademy is a GREAT place to learn various web languages

    Kyle does know A lot of these web based languages.
    Looks like an awesome site - will definitely check it out! Can not believe I've never heard of this before! Thanks

    INACTIVE
    How-to: Make S.M.A.R.T. less laggy

    Sell me your Maple Shieldbows (u)! Up to 95gp ea!

    My Scripts:
    Ivy Chopper Ultra [RS3] | Fantastic Fletcher [RS3]
    99 x78 | 99 x10 | 99 x2 | 99 x12


    Use the REPORT tags when posting progress reports to make life easier (:
    [REPORT]Put progress report in here![/REPORT]

    Super Savvy Smither V1.06Cool Classy Cooker V1.02 [EoC]

  4. #4
    Join Date
    Feb 2012
    Location
    DON'T PM ME ASKING FOR STUFF
    Posts
    2,170
    Mentioned
    38 Post(s)
    Quoted
    423 Post(s)

  5. #5
    Join Date
    Jan 2012
    Posts
    369
    Mentioned
    6 Post(s)
    Quoted
    91 Post(s)

    Default

    Quote Originally Posted by Press Play View Post

    Interacting with the background like this: http://www.ro.me/ is also very neato indeed!
    wow I saw some cool websites in my life but ro.me is just amazing!

  6. #6
    Join Date
    Oct 2008
    Location
    C:\Simba\Includes\
    Posts
    7,566
    Mentioned
    19 Post(s)
    Quoted
    180 Post(s)

    Default

    - Mouseovers: Can be done with CSS Sprites, and the best way to do it honestly. No load time compared to doing it with JS. CSS Sprites are supported by all browsers and all versions of IE minus 6 and below (You can get them to work, just a REAL PITA).

    - Keyboard Input: With jQuery (Or simple JS) you can trap key presses up/down. Very easy to do, and it appears he utilized this jQuery plugin, http://demos.flesler.com/jquery/scrollTo/. Didn't take a look at the code though, but it operates just like that for the most part. I would still allow people to scroll, and still take key input, but that's just me.

    - Transitions and Animations: This can be done with CSS3 for the most part. Not all browsers support it, but it's really easy and fun to build. I do a CSS3 transition/animation and for unsupported browsers I do JS implementation. Just a nice fallback. I did a CSS3 page with animations for a company promo, and I have the code still, I want to host it on my site to show it off.
    Away for awhile, life is keeping me busy. | Want to get my attention in a thread? @Kyle Undefined; me.
    { MSI Phoenix || SRL Stats Sigs || Paste || Scripts || Quotes || Graphics }

    When posting a bug, please post debug! Help us, help you!

    I would love to change the world, but they won't give me the source code. || To be the best, you've got to beat the rest. || Logic never changes, just the syntax.
    If you PM me with a stupid question or one listed in FAQ, or about a script that is not mine, I will NOT respond.


    SRL is a Library of routines made by the SRL community written for the Program Simba. We produce Scripts for the game Runescape.


  7. #7
    Join Date
    Jan 2007
    Location
    Kansas
    Posts
    3,760
    Mentioned
    1 Post(s)
    Quoted
    3 Post(s)

    Default

    Quote Originally Posted by Kyle Undefined View Post
    - Mouseovers: Can be done with CSS Sprites, and the best way to do it honestly. No load time compared to doing it with JS. CSS Sprites are supported by all browsers and all versions of IE minus 6 and below (You can get them to work, just a REAL PITA).

    - Keyboard Input: With jQuery (Or simple JS) you can trap key presses up/down. Very easy to do, and it appears he utilized this jQuery plugin, http://demos.flesler.com/jquery/scrollTo/. Didn't take a look at the code though, but it operates just like that for the most part. I would still allow people to scroll, and still take key input, but that's just me.

    - Transitions and Animations: This can be done with CSS3 for the most part. Not all browsers support it, but it's really easy and fun to build. I do a CSS3 transition/animation and for unsupported browsers I do JS implementation. Just a nice fallback. I did a CSS3 page with animations for a company promo, and I have the code still, I want to host it on my site to show it off.

    http://craig.is/killing/mice Easy to use keyboard library. If you want to go a step above regular jQuery and not have to get key codes for everything.

    http://daneden.me/animate/ Examples of CSS3 transitions.


  8. #8
    Join Date
    Sep 2007
    Location
    Australia, NSW
    Posts
    934
    Mentioned
    6 Post(s)
    Quoted
    145 Post(s)

    Default

    Quote Originally Posted by Kyle Undefined View Post
    - Mouseovers: Can be done with CSS Sprites, and the best way to do it honestly. No load time compared to doing it with JS. CSS Sprites are supported by all browsers and all versions of IE minus 6 and below (You can get them to work, just a REAL PITA).

    - Keyboard Input: With jQuery (Or simple JS) you can trap key presses up/down. Very easy to do, and it appears he utilized this jQuery plugin, http://demos.flesler.com/jquery/scrollTo/. Didn't take a look at the code though, but it operates just like that for the most part. I would still allow people to scroll, and still take key input, but that's just me.

    - Transitions and Animations: This can be done with CSS3 for the most part. Not all browsers support it, but it's really easy and fun to build. I do a CSS3 transition/animation and for unsupported browsers I do JS implementation. Just a nice fallback. I did a CSS3 page with animations for a company promo, and I have the code still, I want to host it on my site to show it off.
    Thanks! Put it up on your site; I want to see

    Quote Originally Posted by Bobarkinator View Post
    http://craig.is/killing/mice Easy to use keyboard library. If you want to go a step above regular jQuery and not have to get key codes for everything.

    http://daneden.me/animate/ Examples of CSS3 transitions.
    Thanks for this! I'm going to re-learn all of HTML and CSS first, because I'm really nooby, and I can't even figure out how to make picture animated ahaha :$

    So far, as a test, I've got:
    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    <link rel="stylesheet" type="text/css" href="animate.css">
    </head>
    
    <body>
    
    <img src="http://img585.imageshack.us/img585/3771/pressplayavatar.png" class="animated" alt="Press Play">
    
    </body>
    
    </html>
    Good start, I guess...

    AHAHAHAHAHAHAA, time to learn :)

    INACTIVE
    How-to: Make S.M.A.R.T. less laggy

    Sell me your Maple Shieldbows (u)! Up to 95gp ea!

    My Scripts:
    Ivy Chopper Ultra [RS3] | Fantastic Fletcher [RS3]
    99 x78 | 99 x10 | 99 x2 | 99 x12


    Use the REPORT tags when posting progress reports to make life easier (:
    [REPORT]Put progress report in here![/REPORT]

    Super Savvy Smither V1.06Cool Classy Cooker V1.02 [EoC]

  9. #9
    Join Date
    Oct 2008
    Location
    C:\Simba\Includes\
    Posts
    7,566
    Mentioned
    19 Post(s)
    Quoted
    180 Post(s)

    Default

    Quote Originally Posted by Press Play View Post
    Thanks! Put it up on your site; I want to see


    Thanks for this! I'm going to re-learn all of HTML and CSS first, because I'm really nooby, and I can't even figure out how to make picture animated ahaha :$

    So far, as a test, I've got:
    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    <link rel="stylesheet" type="text/css" href="animate.css">
    </head>
    
    <body>
    
    <img src="http://img585.imageshack.us/img585/3771/pressplayavatar.png" class="animated" alt="Press Play">
    
    </body>
    
    </html>
    Good start, I guess...

    AHAHAHAHAHAHAA, time to learn :)
    I'll put it up when I have the time.

    If you need anything, you know how to reach me. I can't promise a quick response, though.
    Away for awhile, life is keeping me busy. | Want to get my attention in a thread? @Kyle Undefined; me.
    { MSI Phoenix || SRL Stats Sigs || Paste || Scripts || Quotes || Graphics }

    When posting a bug, please post debug! Help us, help you!

    I would love to change the world, but they won't give me the source code. || To be the best, you've got to beat the rest. || Logic never changes, just the syntax.
    If you PM me with a stupid question or one listed in FAQ, or about a script that is not mine, I will NOT respond.


    SRL is a Library of routines made by the SRL community written for the Program Simba. We produce Scripts for the game Runescape.


  10. #10
    Join Date
    May 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Quoted
    2 Post(s)

    Default

    Who can teach better than w3schools. It's the best website to learn such technologies.

  11. #11
    Join Date
    Oct 2008
    Location
    C:\Simba\Includes\
    Posts
    7,566
    Mentioned
    19 Post(s)
    Quoted
    180 Post(s)

    Default

    W3schools is a joke.
    Away for awhile, life is keeping me busy. | Want to get my attention in a thread? @Kyle Undefined; me.
    { MSI Phoenix || SRL Stats Sigs || Paste || Scripts || Quotes || Graphics }

    When posting a bug, please post debug! Help us, help you!

    I would love to change the world, but they won't give me the source code. || To be the best, you've got to beat the rest. || Logic never changes, just the syntax.
    If you PM me with a stupid question or one listed in FAQ, or about a script that is not mine, I will NOT respond.


    SRL is a Library of routines made by the SRL community written for the Program Simba. We produce Scripts for the game Runescape.


  12. #12
    Join Date
    May 2013
    Posts
    15
    Mentioned
    0 Post(s)
    Quoted
    4 Post(s)

    Default

    Quote Originally Posted by Himanshus View Post
    Who can teach better than w3schools. It's the best website to learn such technologies.
    You're joking, right?

    http://w3fools.com/

  13. #13
    Join Date
    Oct 2006
    Location
    UK
    Posts
    78
    Mentioned
    0 Post(s)
    Quoted
    0 Post(s)

    Default

    I recently just took an interactive web programming module at university. This is the modules webpage:

    http://bit.ly/aber_iwp

    You might find some of the lectures handy.
    Aidan
    BSc Computer Science

  14. #14
    Join Date
    Oct 2011
    Location
    Chicago
    Posts
    3,352
    Mentioned
    21 Post(s)
    Quoted
    437 Post(s)

    Default

    Quote Originally Posted by heron_ View Post
    You're joking, right?

    http://w3fools.com/
    I feel shame, all the web design competitions I have been apart of the judge was one of the higher ups at W3Schools fml.




    Anti-Leech Movement Prevent Leeching Spread the word
    Insanity 60 Days (Killer workout)
    XoL Blog (Workouts/RS/Misc)

  15. #15
    Join Date
    Feb 2007
    Location
    Colorado, USA
    Posts
    3,716
    Mentioned
    51 Post(s)
    Quoted
    624 Post(s)

    Default

    Example of it being a joke:

    this forum software uses a wrong & bad doctype.. that being said, majority of sites do

    there are also tons of useless things defined that shouldn't be / don't need to be
    stuff that hasn't needed to be done in 5-10 and more years..

    w3 and w3schools is cool if you know exactly what you're doing, and need a quick reference

    but honestly, you should install bluefish for these types of things:
    http://bluefish.openoffice.nl/index.html



    not only does it do this, and tell you everything for all the functions (or most of) php.. but it'll do this and help with all of css/html/html5/css3 and other programming languages (that I don't use)
    The only true authority stems from knowledge, not from position.

    You can contact me via matrix protocol: @grats:grats.win or you can email me at the same domain, any user/email address.

  16. #16
    Join Date
    May 2013
    Posts
    205
    Mentioned
    1 Post(s)
    Quoted
    85 Post(s)

    Default

    whats a good editor that you guys use for writing HTML5 or CSS3. Is there an actual IDE for it? Visual Studio? I used Notepad++ before

  17. #17
    Join Date
    Mar 2013
    Posts
    14
    Mentioned
    3 Post(s)
    Quoted
    6 Post(s)

    Default

    TheNewBoston and W3shools is a great place for learning HTML and CSS. That's were I learned it!

  18. #18
    Join Date
    Jun 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Quoted
    0 Post(s)

    Default

    go to w3school.com this could help you i think

  19. #19
    Join Date
    Jul 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Quoted
    0 Post(s)

    Default

    People are still referring to the older W3Schools when it comes to it. I would never recommend learning an entire language from them, but for referencing now and again it really isn't that bad (coming from someone who's been a website developer for 6 years now). I'm in no way trying to defend them, but they definitely aren't as bad as what everyone is making them out to be anymore.

    Towards the OP, it's all down to the way in which you learn. If you learn from interaction, I suggest you start with some very basic HTML5 items such as structural tags, then start moving further and further in. Then start on CSS3. When I started to look at it I wish I had started on HTML5, it would've made life easier. Canvas is your best friend when these kind of sites and apps come around, make sure you understand it and use it to it's full ability as it truly is a great tag to use in interactive situations. I would also never suggest learning anything from these sites, pick up a book and read it. The information in books to information on web pages is far more superior and trustworthy. If you encounter anything you don't understand then feel free to PM me, I'll usually be around.

    Towards the guy asking about editors, I prefer to use vanilla ST2 (or ST3) very lightweight and probably the best editor and syntax highlighter available for linux in my opinion.
    Last edited by Ruby; 07-22-2013 at 01:45 AM.

  20. #20
    Join Date
    Nov 2006
    Posts
    449
    Mentioned
    84 Post(s)
    Quoted
    145 Post(s)

    Default

    I can't believe no one here has pointed to developer.mozilla.org yet.
    This is the best resource out there currently, as far as references go.
    I can't speak to the quality of all of the tutorials since many are just aggregated, but I looked over a few and they seem fine.

    Last edited by core; 07-22-2013 at 05:23 AM.

    First they ignore you, then they laugh at you, then they fight you, then you win.
    Stance on Leechers

  21. #21
    Join Date
    Feb 2012
    Location
    DON'T PM ME ASKING FOR STUFF
    Posts
    2,170
    Mentioned
    38 Post(s)
    Quoted
    423 Post(s)

    Default

    Quote Originally Posted by core View Post
    I can't believe no one here has pointed to developer.mozilla.org yet.
    This is the best resource out there currently, as far as references go.
    I can't speak to the quality of all of the tutorials since many are just aggregated, but I looked over a few and they seem fine.


    I'm pretty sure someone did o.o, it did come to mind ...

  22. #22
    Join Date
    Jan 2014
    Posts
    3
    Mentioned
    0 Post(s)
    Quoted
    1 Post(s)

    Default

    Quote Originally Posted by xtrapsp View Post
    codecademy is a GREAT place to learn various web languages

    Kyle does know A lot of these web based languages.
    yes i agree with you...

  23. #23
    Join Date
    Feb 2012
    Location
    Norway
    Posts
    995
    Mentioned
    145 Post(s)
    Quoted
    596 Post(s)

    Default

    Both sites you find interesting is mostly relying on JavaScript to make am interactive. Using JavaScript you can make anything from small "like"-buttons (no browser refresh).. to media-players, games.. etc.
    !No priv. messages please

  24. #24
    Join Date
    Mar 2019
    Posts
    6
    Mentioned
    0 Post(s)
    Quoted
    0 Post(s)

    Default

    Thanks for this information.
    Dot Net Programming

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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