That's roughly the same fallacy as to say: It's easy to write a great novel, since it is just words and grammar.
The simple reason: It is hard.
I'll outline my very opinonate version of what skills you need for mastery of front-end programming. The list doesn't include the skills to figure out what to program, just how. So here it goes:
- The standard today is HTML5. So ignore any screams "But it must run in IE6" and see what HTML5 can do. There's a handy list of compatible elements you can check for reference
- If you don't like Bootstrap, there are other options, but you have been warned
- The other HTML structure to look at is the Ionic framework. Again it has more than HTML only
CSSMost frameworks include CSS, so when you picked one above, you are pretty much covered. However understanding it well takes a while, so you can modify the template you started with. My still favourite place to get a feel for the power of CSS is CSS Zengarden. The W3C provides a collection of links to tutorials to deepen your knowledge. My strong advice to the developers: don't touch it initially. Use a template. Once your application is functional, then revisit the CSS (or let a designer do that).
- The most popular core library is jQuery, so get to know it. The
$operator is quite convenient and powerful
- To build MVC style single page applications I recommend to use AngularJS. It has a huge body of knowledge, a nice form module and an active community. Version 2.0 will have a huge boost in performance too. Make sure you know John Papa's style guide and follow it
- And again: have a look at Ionic and Cordova (used in Ionic) for mobile development. It uses AngularJS under the hood
TemplatesWith all the complexity around, you don't have to start from scratch. There are plenty of templates around, that, free or a little fee, give you a head start. Be very clear: they are an incredible resource when you know how all is working together, but they don't relieve you from learning the skill. Here are my favourites
- Angular Admin fuses a Bootstrap based structure with AngularJS behaviour
- A commercial version with additional features
- Ionic Starter App with lots of sample screens
- Material Design for Ionic
Tools and resourcesNotepad is not a development tool. There are quite some you need if you want to be productive
- You need a capable editor, luckily you have plenty of choices or you opt for one or the other IDE
- Bower: a dependency manager for browser files like CSS, JS with their various frameworks. You add a depencency (e.g. Bootstrap) to the
bower.jsonfile and Bower will find the right version for you
- Grunt: a task runner application, used for assembly of web sites/applications (or any other stuff). Configured using a
Gruntfile.js: it can do all sorts of steps like: copy files, combine and minify, check code quality, run tests etc.
- Yeoman: A application scaffolding tool. It puts all the tools and needed configurations together. It uses generators to blueprint different applications from classic web, to reveal application to mobile hybrid apps. The site lists hundreds of generators and you are invited to modify them or roll your own. I like generator-angularand mcfly
- GIT: the version control system. Use it from the command line, your IDE or a version control client
- Watch NPM for new development