1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

HTML, CSS and JavaScript Guidance

Discussion in 'HTML & Website Design' started by SynologyHosting, Jul 1, 2015.

  1. #1
    Hi,

    Would anyone here be willing to help me out, I have recently started to learn HTML, CSS and JavaScript. (Not much JavaScript yet) I would like to get into the habit of best practices from the start, currently I am learning from Udemy's course "The Complete Web Developer Course - Build 14 Websites". And so far I am really enjoying it and have learned a lot in a short space of time.

    Are there any other tutorials that you guys would recommend?

    Are there any sites / blogs I should read discussing best practices?

    What websites are good examples of HTML and CSS? (I know that some of the bigger sites aren't necessarily better)


    Basically I am looking to advance my knowledge and get into the practice of producing good HTML, CSS and JavaScript. So am looking for advice on where I should look for more information, websites that I should try and replicate things like this.

    Thanks.
     
    SynologyHosting, Jul 1, 2015 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,499
    Likes Received:
    377
    Best Answers:
    29
    Trophy Points:
    335
    #2
    To learn best practice, I recommend HTMLDog. The tutorials are arranged to match html with corresponding levels of css. I haven't looked at the javascript tutes, but the syllabus looks interesting and fairly complete.

    cheers,

    gary
     
    Last edited: Jul 1, 2015
    kk5st, Jul 1, 2015 IP
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #3
    You can have a look at CodeAcademy - it's fairly basic tutorials, but their content is up-to-date and usually covers best-practice use.
     
    PoPSiCLe, Jul 1, 2015 IP
  4. Jufcy8200

    Jufcy8200 Banned

    Messages:
    286
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    78
    #4
    Watch youtube tutorials, Visit w3schools and codeacademy for some examples and techniques. There are lot of tutorials you can learn
     
    Jufcy8200, Jul 1, 2015 IP
  5. malky66

    malky66 Acclaimed Member

    Messages:
    3,997
    Likes Received:
    2,248
    Best Answers:
    88
    Trophy Points:
    515
    #5
    Whatever you do DON'T visit w3schools.com, all you will learn there is outdated practices and the best way to learn how NOT to build a website.
     
    malky66, Jul 1, 2015 IP
  6. SynologyHosting

    SynologyHosting Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #6
    Thanks for the recommendation to HTMLDog I will be checking them out soon.

    Have already done most of what CodeAcademy have to offer, will pay them another visit and see if I learn anything new (If they have updated some stuff)

    Tried using Youtube generally I felt they were not using good practice although I don't deny that it is probably a good way to learn.

    Yeah I was never going to use w3scools.com, I understand their outdated and should only really be used as a reference.

    Overall I can create websites using HTML, CSS and some basic JavaScript. But I always feel that my pages are poorly constructed and could have been done with far less work.

    At current I am trying to avoid using JQuery, Bootstrap and other stuff like this, as I feel it makes web developers sloppy (Just my opinion), I will start to try these out in the future but for now they aren't my main goal.
     
    SynologyHosting, Jul 2, 2015 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,499
    Likes Received:
    377
    Best Answers:
    29
    Trophy Points:
    335
    #7
    Use the w3c.org as your reference, not w3schools. For html5, you'll be buried in technological crap that web developers don't need. there's a developer's oriented version from whatwg that leaves out the stuff useful only to UA vendors, see
    A technical specification for Web developers. For css3, see Introduction to CSS3. You will need this to help you find the actual module. The module idea is cool, but the css2.1 specs are a lot easier to grok.

    Not a bad opinion. Once you know enough about html and css to write good stuff, you'll realize just how silly that junk is. Now, I'm a fan of code re-use through libraries. jQuery is trying to be a generic library and ends up a bloated mess unless you know enough javascript to pare it down and fix the various functions to fit your needs.

    cheers,

    gary
     
    kk5st, Jul 2, 2015 IP
  8. richardm55

    richardm55 Active Member

    Messages:
    762
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    65
    #8
    In my opinion the best way to learn to search for good youtube tutorials (they are plenty of them and you must select good ones) and after watching start practice using any html editors (notepad++, kED, netbeans, or Dreamweaver if youre able to get it). Practice makes you perfect and you master it very quickly! With todays CSS3 and jQuery you make any effect you want. They are really amazing.
     
    richardm55, Jul 19, 2015 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,666
    Likes Received:
    1,983
    Best Answers:
    250
    Trophy Points:
    515
    #9
    If you've got a decent handle on the "grammar" and syntax of HTML and CSS, you might find my recent post helpful in developing your workflow:
    https://forums.digitalpoint.com/threads/progressive-enhancement-design-from-the-inside-out.2759516/

    On the subject of scripting, TRY to avoid using it if you don't have to... and be it HTML, CSS or JS try to avoid "frameworks" -- much like WYSIWYG editors, the only thing you can learn from frameworks is how NOT to build a website. Be it bloated scripttardery like jQuery, or outright asshattery like bootcrap.

    99% of what people do with jQuery or other scripting frameworks falls into three categories:

    1) Stuff that would be less scripting without the library (not counting the library in that total!)

    2) Stuff that shouldn't even be done in JS since CSS or HTML can already provide that or should be handled server-side not client side.

    3) Stuff that has no damned business on websites in the first place thanks to compromising accessibility or making things so painfully slow nobody is going to wait for the page to finish loading before they bounce. (laughably said bounces often NOT registering if you rely on scripted tracking!)

    ... and those latter two categories? 90%+ of what people use JS for on websites still falls into those even if a framework is not used.

    Remember, good JavaScript should ENHANCE functionality, not provide it much less supplant it. Remember at all times the unwritten rule of JavaScript, "If you can't make a fully functional page without scripting FIRST, you likely have no business adding scripting to it!"

    Which is just part of graceful degradation, maintaining usability should ANY fancy bits like JS or CSS go missing, blocked, or simply not apply to the needs of the USER... Which is pretty much what my "progressive enhancement" post is trying to drive home.

    I'm not a fan of a lot of modern HTML references, particularly since HTML 5 has some real bloated redundant nonsense in it and seems to be trying to drag development practices back to the worst of the 1990's undoing EVERY concept that HTML 4 STRICT was about. That's why I still use this old OLD reference:

    http://htmlhelp.com/reference/html40/

    As it's one of the best "plain english" explanations of HTML I've ever found.

    As HTML/CSS is programming (despite some programmers getting offended at daring to call it that) and you may find yourself using languages like JavaScript or PHP, some articles about normal code development can also help get one in the right mindset. For example when it comes to naming classes and ID's, good verbose names saying WHY things MIGHT get style because of WHAT the content it's wrapping is can mean less need for comments. There's an article on IBM's Linux Developer site I've been pointing people at for years on the topic:

    http://www.ibm.com/developerworks/library/l-clear-code/

    I'm particularly fond of his "Oh now we're done" comment.

    Another thing I highly suggest is learning a bit about usability and interface design. One of the BEST places to do that is NNGROUP's articles:

    http://www.nngroup.com/articles/

    Since Jakob Nielsen is pretty much the go-to on the subject. There are other concepts like "false simplicity" you should be aware of too:

    http://baymard.com/blog/false-simplicity
    http://www.jnd.org/dn.mss/simplicity_is_not_th.html

    Though in a lot of cases the woes created by false simplicity AND pointless scripttardery comes down to people asking "Can we do it?" while failing to ask "SHOULD we do it?"

    Above all though, and it's a point you'll come across me repeating again, again, and AGAIN, is that if you are designing and developing websites your #1 job is delivering content to users. EVERYTHING else is window dressing. LOOK at the big success stories of the Internet -- even when they're poorly coded scripttard train-wrecks, look closely at the likes of E-bay, Amazon, Facebook, Twitter, Slashdot, Google, CraigsList ... do ANY of those sites look like they have someone spanking it on the display in Photoshop behind their designs? They deliver content, the THING PEOPLE VISIT WEBSITES FOR.

    We make fun of Ballmer for it in regards to developers, but honestly...

    CONTENT, CONTENT, CONTENT, CONTENT, CONTENT, CONTENT, CONTENT, CONTENT, CONTENT, CONTENT, CoNtEnT, content...

    Which is why the current artsy fartsy trend of sucking down 80%+ of a 1920x1080 screen with whitespace is little more than the road to failure, no matter how much the PSD jockeys think it's "pretty".
     
    deathshadow, Jul 19, 2015 IP
  10. Atome

    Atome Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #10
    Hi,

    If you want know how to create website from A to Z (HTML/CSS), I can suggest you :https://openclassrooms.com/courses/build-your-website-with-html5-and-css3
    It's french website who offer multiple courses for free and clearly explained.
    The French version of this website propose tons of course compared to english version but if you have the courage to traduce them you will learn more things for sur.

    When you've learned the basics the best way to train : you will take a web online video game site who are generally known for their very beautiful and very technical aspects.
    I advise you dofus.com ( it was my first training , nostalgia ... ).

    I think that's all , I hope you will come to reach your goal!

    Good luck !
     
    Atome, Jul 19, 2015 IP