30

Ask DN: What's the best way to learn Javascript as a designer?

3 years ago from , Creatix Online Marketing

Hi guys, I'm a designer who know html/css/scss and some light jQuery, but I want to learn vanilla JS and ES^ (I was told this is a standard now), and React in the future.

So, where do I start? Whats the best roadmap for me to take?

25 comments

  • Dillon RaphaelDillon Raphael, 3 years ago (edited 3 years ago )

    Learn ES6 first.

    THE best resource. This changed my whole game:

    You Don't Know JS

    Then move into React. Start with this video series. It teaches you React & Redux:

    Learn Redux & React

    Then read this many times over:

    Fullstack React

    I did this in the complete opposite order, and wish I did it the way I'm telling you now.

    I also used this for reference when trying to connect the dots between React & Redux. Simple React & Redux eample

    Follow me on twitter if you got more questions @dillonraphael

    20 points
    • Adam RasheedAdam Rasheed, 3 years ago

      Nice! Definitely following this!

      0 points
    • Rhys MerrittRhys Merritt, 3 years ago

      Thanks for the links. If I were to start here from the beginning.. Do you think you could give me a rough estimate for how long you think it will take me to get through all this? I'm not a fast reader, and I tend to be slightly busy throughout the week..

      0 points
      • Dillon RaphaelDillon Raphael, 3 years ago

        That's a loaded question. Personally I allocate at least an hour a day to studying.

        0 points
        • Rhys MerrittRhys Merritt, 3 years ago

          How is it loaded? I was genuinely curious about the time needed to invest to learn this stuff.. I can't read very fast, and I have a lot of existing responsibilities that I need to take into account.

          Is there a different way to ask this question? Would you prefer that people don't ask questions?...

          0 points
    • Daniel FoscoDaniel Fosco, 3 years ago

      Whoa, thanks for the links!

      0 points
    • Clay MacTavishClay MacTavish, 3 years ago

      Can you explain why you suggest doing ES6 first? I'd recommend learning the core, vanilla, JavaScript before anything else. The reason being that there is a large amount of legacy code out there that developers will need to manage.

      The idea of learning a language then building apps from scratch can be misleading. I'd say most of my development experience has been about 75% maintaining an existing codebase written in php or js.

      Not saying learning ES6 is a bad idea I'm just curious why you'd suggest it without learning the core concepts first.

      Honestly, I'd say people that understand Backbone are the most well rounded developers out there right now.

      0 points
      • Keaton TaylorKeaton Taylor, 3 years ago

        I think the ES6 part is related to the React specific path he's supporting here.

        0 points
      • Dillon RaphaelDillon Raphael, 3 years ago

        You Dont Know JS up and going teaches the foundation of javascript. It has a mix between ES5, 6 and even 3. But the majority of the book teaches for the future which is ES6.

        0 points
    • Dirk HCM van BoxtelDirk HCM van Boxtel, 3 years ago

      Great answer. Only thing I'd make sure to mention is;

      Have a side-project.

      With anything you want to learn; think of a side-project that will make use of whatever it is you want to learn, and have a practical approach. It'll help you leaps and bounds with motivation, but you'll also be producing something and solving real life problems that you'll run in to.

      0 points
  • Mike ChambersMike Chambers, 3 years ago

    I would say, similar to any other language, the best way to learn is to just dive in with a simple project.

    Personally, from a design standpoint, I would play around with something like PaperJS first, just to get used to some JavaScript basics. PaperJS is nice because you can do a bunch of quick, simple projects, that can be pretty rewarding (bonus points in that you can export your work as SVG to use in more traditional design tools).

    Once you have some of the basics of JavaScript down, then I would start to tackle larger projects in the area you want to focus in (i.e. UI elements? web design / interaction, etc...).

    You can find info on PaperJS here: http://paperjs.org/

    4 points
  • Cory GibbonsCory Gibbons, 3 years ago

    I have nothing but good things to say about React for Beginners and ES6 for Everyone by Wes Bos.

    3 points
  • Dana (dmxt)Dana (dmxt), 3 years ago

    How to learn JavaScript properly

    3 points
  • Art VandelayArt Vandelay, 3 years ago (edited 3 years ago )

    A lot of folks are saying to read books about react and the latest and greatest, ES6. Which isn't incorrect but, IMO, there isn't a "one-size-fits-all" correct route out there (and neither is what I'm about to write).

    I personally believe the best way to learn JS as anyone (designer/dev) varies from person to person. You may retain more information by reading or maybe watching videos or maybe both or maybe just by building.

    If you know jQuery, then you're in a good spot. If you wanted to learn straight up JS. I'd say attempt to recreate some of your jQuery code in vanilla JS. Start there and see how that goes.

    If you know basic JS then upgrading to the niceties of ES6 (fat arrow functions for example or implicit/explicit return statements) will be easier to grasp, understand and use.

    YDKJS is a great book series and worth its weight. So is How to Learn JS Properly as well as javascriptbook.com. All are wonderful. IMO there is one fault in some of these (not all but some).

    They teach you how to use the tools, they don't teach you about the tools. IMO, they feel very similar to "teach-how-to-type" jQuery tutorials that would walk through a simple thing but never exposed the philosophy or thinking behind them.

    It may be beneficial to also learn about JS as a whole (the history, the patterns, the environments, the methodologies) which may provide a holistic understanding of the language.

    Javascript Patterns Book is a great one. Object Oriented JS is a great book too.

    May also be worth it to read the source of your most used libraries (jQuery is a great one) and see how they do things. I've found myself surprised more times than not at how simple and straight forward some of the most popular libraries online are written.

    3 points
  • Drew McDonaldDrew McDonald, 3 years ago

    I'd say teamtreehouse.com, I learned from that and Codecademy.

    2 points
  • Ludvig Lundgren, 3 years ago

    Watchandcode is really really good, and free! Created by former google engineer. http://watchandcode.com/p/practical-javascript

    1 point
  • Minhaj M.Minhaj M., 3 years ago

    javascriptbook.com

    1 point
  • Martin BavioMartin Bavio, 3 years ago

    Make sure you don't skip Javascript: The Good Parts, written by Douglas Crockford, who is kind of a legend in the JS ecosystem. Marvelous introductory book to the nuts & bolts of Javascript.

    1 point
  • Hamish TaplinHamish Taplin, 3 years ago

    If you want to play with React then this is the easiest way to get something up-and-running without having to delve in to the world of pain that is Webpack: https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html

    0 points
  • Joshua Crowley, 3 years ago

    Don't get to caught up in Frameworks and Libraries. There are a lot of fundamentals you'll need to have nailed before you can utilize them.

    Start with Framerjs.com so you can start to code a little each day. It doesn't matter that it's Coffeescript, you need to starting thinking like a computer.

    It's a good idea to pick a small project that you can work towards and stay motivated about. Mine has always been browser based games.

    The Meteor framework is super friendly for beginners, and will help you do full stack development.

    Ultimately, learning how to code JS is learning programming. It's going to take some years and you'll need to stay motivated!

    0 points
  • Jade ShyuJade Shyu, 3 years ago (edited 3 years ago )

    My friend is teaching himself JavaScript and recommends trying Eloquent Javascript [http://eloquentjavascript.net]. Its interactive component allows you to see the results of your code within the website.

    0 points