5

Advice on what to get up to speed with in front end dev & design...

3 years ago from , Designer

Im a designer that has spent a lot of time working within identity and print work for the last few years.

I want to get up to speed on great tools & languages in front end dev. I see all these names like SASS, LESS, Flexbox, Ruby, Ajax etc... But what should someone who has had their head out of the game for a few years be concentrating on?

Thanks in advance :D

14 comments

  • Ian WilliamsIan Williams, 3 years ago

    Designing websites will come from experience and making mistakes. As will development, but development sometimes you need a few more pointers.

    The amount of tooling in modern web development has reached an all time high, and I don't see that going away anytime soon. It's important, but I wouldn't focus on learning the tools (SASS, LESS, etc.). That knowledge will come from you wanting to build something. You'll find a thing, say "hey that could help me!" and then you'll have learned that thing.

    You do not need tools to make great websites. That said, they help. They have their place, and you'll learn that along the way.

    Focus on building something you want to build. If that's a blog, build a blog. If that's a simple app to start with, learn what MVC means and try a few things. If you want to build your own portfolio and make some interesting interactions, you might pick up jQuery or an HTML canvas framework. You will pick up the necessary skill sets along the way.

    I think the best way to learn any of these things is to try to do something you don't already know how to do, and then figure it out.

    4 points
  • pjotr .pjotr ., 3 years ago

    Here are my $2c...

    1. Learn the basics of JavaScript the right way first. This isn't something that you'll get done over the weekend or even over of the course of a month. This will take months to get a handle on.

    The best beginning JavaScript course is the one from Javascriptissexy.

    This will give you both an understanding of the language and programming in general.

    2.Learn Ruby the hard way . This will give you a handle on a completely different language. It's also geared towards complete novices so it makes sense even if you're not a seasoned programmer.

    3. Learn HTML/CSS. Going through the two previous courses you will have definitely come across various forms of markup. They may have told you that you need to know HTML/CSS in order todo them but I've found that it's just not true. They give you all the markup you need and you'll be better waiting to learn this stuff.

    So far you've not done anything with visual design. This is the step in which you start to make things on the screen look the way you want. My biggest recommendation is to not take a course, but to go through bootstrap and tear apart everything you see. Notice a button that has round corners? Inspect that element and see the CSS that's making that happen. A good course to take before doing any of step 3 is learning your dev tools from codeschool.

    4. Now that you've learned your dev tools, have torn apart bootstrap and have a handle on how CSS renders things differently on the screen you can start looking into Sass. I would recommend only looking at Sass as Less is pretty much dead. The best way to learn Sass imo is by just reading the docs.

    5. Ok so now what? You've got a handle on JavaScript, a bit of Ruby, HTML/CSS, and Sass. This has taken you maybe 500 hours. You can make basic websites. Perhaps even a sinatra app . This is where you'll understand that everything you just learned is old, outdated and wrong. Web development, especially front-end web development moves at a remarkable (and annoying) speed.

    You'll be told that Sass is old and that you should be using Post CSS instead. You'll start learning Angular and then someone will tell you that you're doing it wrong because MVC is broken and Flux is the best way to build scalable front-end apps. You'll figure out how to deploy and app on Heroku and then someone will point out that running dokku on digital ocean is cheaper.

    So yeah...good luck.

    2 points
    • Clay MacTavishClay MacTavish, 3 years ago (edited 3 years ago )

      Don't be afraid to start learning JavaScript via jQuery. That seems to help a lot of people.

      oh and my two cents on your Ruby comment, learn Python instead. :)

      0 points
  • Zach McKimminsZach McKimmins, 3 years ago

    I used Code Academy to freshen up my skills with HTML & CSS and to also learn Javascript, plus it's free! SASS & LESS are very similar, choose either one to learn. Bootstrap Is a great front-end framework to use and is highly responsive & powerful.

    Some additional free resources to learn Javascript:

    I always enjoy listening to podcasts to keep current with programming news:

    Also if your really serious about learning programming again consider joining a coding bootcamp.

    2 points
  • Csongor BartusCsongor Bartus, 3 years ago

    The front-end scene has three major problems:

    1. Cross browser compatibility
    2. Common way to structure code
    3. The lack of native-like performance on mobile and tablets.

    The first is solved by Gulp/Grunt and PureCSS / Autoprefixer. You should learn them.

    The second by BEM. There are others like Atomic components but BEM becomes the de facto standard.

    The third is unknow yet but Flipboard managed to solve with React.

    If you have spare time learn also Flexbox for modern layouts and SVG for animations.

    Good luck :)

    1 point
    • Clay MacTavishClay MacTavish, 3 years ago (edited 3 years ago )

      I have to respectfully disagree with this. These are terrible starting points in my opinion.

      What good is a developer who knows how to scaffold a project, compile CSS, and setup a Grunt file if that developer doesn't even know how to center a div. Or run an AJAX call? or properly name-space their javascript? Or understand what data-binding is?

      Those are tools to get you up and running quickly, they won't get a project built.

      Basically what I'm saying is learn to build shit first, then optimize your processes.

      3 points
  • Clay MacTavishClay MacTavish, 3 years ago

    JavaScript. Since that is the "language of the web" you should learn it. Start with XMLhttprequest (or AJAX if you are using jQuery) so you can tap into APIs everywhere. That will make you very powerful. Then jump into CSS. Then SASS. Then Gulp. Then maybe an object oriented framework like Angular, Backbone. Some interesting thing going on with React.

    1 point
  • Eric Reaves, 3 years ago

    Testerone XL natural muscle booster supplements is the perfect resolution to get rid of the lean plenty. Fast Testerone XL reviews & quickly and helps to amplify your muscles in three weeks maximum. Now you've got great opportunity to use this supplement that utterly aids to get the strong muscle plenty. Even, when it's about shopping for the Testosterone XL product therefore, this is not on the market in any retain store outside merely you can visit on-line solely to buy this supplement. Shopping for this product from on-line you will get additional edges and from online this supplement is obtainable at cheaper prices and also gets in discounted offers. http://www.searchsupplement.com/testerone-xl/

    0 points
  • Roberts Ozolins, 3 years ago

    I guess it really depends on what your goals are. I would personally recommend to get your head around Sketch. Sketch is arguably the best application for user interface design. I started using it around a year ago and have never looked back. In terms of code, javascript is all you really need. I'm not going to go in too much detail but I would strongly recommend learning Meteor. It's pretty easy to pick up and allows you to build cross platform apps in lights speed since it can run on both, server and client side. You might want to look at React too. It's pretty powerful and loaded with interface components. It basically eliminates all of the hard work. Good luck!

    0 points
    • Stuart T, 3 years ago

      Thanks for the response.

      Sorry I probably wasn't specific enough, I guess I'm looking at taking my knowledge from just your standard HTML & CSS, I can imagine there are lots of new languages that would make my life easier by learning.

      0 points
      • Clay MacTavishClay MacTavish, 3 years ago

        JavaScript.

        Esp if you like being marketable.

        1 point
        • Lee Marshall, 3 years ago

          I second this point, if you can learn Javascript/Jquery then you can progress to more advanced concepts. That being more backend technologies most notably Node.js. I went from building out all client applications in a standard Mamp stacks, read up about Node and have never looked back. The MEAN stack is just a joy to programme in.

          0 points
          • Clay MacTavishClay MacTavish, 3 years ago

            But have you launched anything to production using MEAN?

            1 point
            • Lee Marshall, 3 years ago

              Yes a commercial application management platform, dealing with high traffic and periods of spiked traffic. Works perfectly, and using Git and Heroku makes maintaining and running the app super simple.

              0 points