I have few product ideas that I want to try. My problem is that I don't know front-end development at all. Where should I try building products? Should I spend time learning front-end development or should I just outsource it?
Can you please provide some suggestions?
For a solid foundation in ES5 (still worth learning well IMO), I would recommend:
Secrets of the JavaScript Ninja Javascript the good parts
Cozy up to MDN documentation, and get familiar w/ jQuery after learning the basics of DOM manipulation using the browser API.
Lots of people will tell you to learn ES6/ES7/webpack/babel/npm/angular/ember/react/redux/etc (FML just typing this list) but at the end of the day, you will get plenty far with ES5 and Bootstrap taking care of the CSS. More than enough to earn some serious bucks (if your product isn't terrible). jQuery and plugins will take you far.
Once making serious cash, hire/outsource if you feel you need for something more advanced and polished.
That's basically what I did / am doing. I know bugger all about front-end development, but I've done all of the work on https://www.neuralobjects.com by myself. Basically I used Bootstrap and just enough jQuery to add in some interactivity using Ajax (like toggling the state of the progress bars as the provisioning process changes state, etc).
Dive in, learn as you go. You'll get there.
Use flexbox (with scss and autoprefixer to keep it neat).
Pick a small, uncomplicated JS data-binding framework - vue is very popular right now, svelte looks like a good bet for the future.
Firstly, my CSS or design skills aren't as good as Bootstrap, so the results definitely aren't poorer. My sites are a lot better when I use a framework.
Secondly, unless you happen to test in several versions of about 20 different browsers across a dozen platforms, your code isn't as good as Bootstrap either. It's easy to say you can write better code if you're only targeting the latest versions of Chrome, Firefox and Edge, but if you want exceptional support on niche browsers (or you want something that works on old browsers in the case of Bootstrap 3) then you have little choice but to use a framework. There's simply too much work involved in writing code that works everywhere to do it any other way.
If you do opt to write your own code, on any moderately complex app you'll end up writing something that looks a lot like a framework eventually anyway, except it won't be as well thought out and no one else will be able to contribute to it. I fully understand why people don't like them but they really are a good idea for most apps.
I've never worked as a developer and learned how to make apps for my side projects, so from the start I had to learn a bit of both. Obviously not as deep as someone who calls themselves exclusively a front or back end developer.
Does just knowing one side signal that you only do development for a job?
When I developed my first app, my knowledge of css and javascript as very basic. I could identify working code and worked by cut/paste.
I was overwhelmed by the number of options available compared to backend dev, which is pretty much stable. I posted on HN and the consensus of the majority was to use bootstrap as it was widely used.
For a beginner learning on your own, you need to have lots of support when you run into walls. Because of the large community, Bootstrap has a wide userbase and most usecases are covered by some tutorial or a question on stackoverflow. JQuery is well seasoned library, so less bugs and more support.
Also, your need is to release your SAAS app as soon as possible. A framework or library that does not throw you any surprises and has a good coverage of components is your best bet.
My javascript interactions were not too detailed, so I stuck with JQuery. Your mileage may vary.
Now I have had some validation for my product, and I realized that legacy browsers form a very small part of the visitors but a reasonable portion of them were on mobile, I have set down the path of making the app mobile friendly.
Armed with the knowledge gained from bootstrap and jquery, I have a general plan of what layout and interactions I need, and also how to go about achieving them. Currently I am reimplementing them in sass with a few libraries and vanilla js. The page size has come down from 312Kb to 35Kb. But if I had attempted pure js/css at the start I believe, the project would have been mired in unnecessary complexities.
It's a beautifully minimal approach.
Speaking of minimal, slim is amazing.
With these two you'll be typing much less:)
Honesty it has forced me to partner with front end folks, and this has been a net positive. Having someone else there is not only motivating but the second pair of eyes has helped me to avoid a lot of silly mistakes.
You can go quite far just using this tool, Zapier and Blockspring (https://www.blockspring.com/) together.