Recently I am helping 2 friends doing their WordPress sites.
To make it easier and fast I used a theme and an amazing plugin called Visual Composer. It basically visualizes the page while you editing it.

CSS code I learnt recently helped with a few changes that the plugin and WordPress don't allow. There are still some limits but it does give me a lot of freedom and saved some time.

(I do feel like cheating somehow using the pre-edited theme and Visual Composer plugin to be honest... But I tell myself, I am just using open source library and make it easier for my friends to manage the site in the future on their own haha)

Anyway, while doing those projects for friends I am learning JavaScript on my own as well.

It deters me a bit stop learning what I'm comfortable/familiar with and jump into something new and strange. How do other developers deal with this when they had to learn new languages?

Blow what I have/am using for learning material:

1. The book for JS beginners: DOM Scripting, Web Design with JavaScript and the Document Object Model.

I read on ZhiHu 知乎this is a good book for beginners to get their foot in the door of JavaScript. (I decided to read the English version at the end).

I would say it is very beginner-friendly. Recommend it to all the beginners want to learn JavaScipt out there!

This is the version I'm reading(Second Edition):

2. The famous CodeCademy:

I have to admit I do not like this site despite I have heard many good words about them previously.

The problems I had with them is I am determined to learn front-end develop on my own with free sources out there on the internet. And CodeCademy sell their courses on their site which is fine but they are overdoing it a bit. I tried the free JavaScript tutorial they offered and found it hard to understand like I have missed some chapters and couldn't follow up what it's talking about quickly in a few chapters. Then, later on, I found out I did miss out a few chapters, unintentionally as those are for "Pro account". What the hell? Not cool.

I will show you a screenshot for a better understanding.

Anyway, I do not recommend its free tutorials. Not sure if their courses are good, they may be.

3. The JavaScript for the Web - SABE:
   I actually came across this site recently on a facebook front-end developer group. Someone recommended it to the group and I bookmarked it. I have only read a few chapters so far but I liked it. Another advantage compared to read a physical JavaScript book is, you can easily test out your code in browser's developer tools by using console log function. And on a wide screen you can have the tutorial on the left side and console log on the same page on the right side which is pretty convenient.

(But I still keep a text-book note while learning as I may refer to it later, I did the same with CSS learning.)

So far those are the tutorials I have been using and if you have a better suggestions, please let me know : )

Cheers,

6 March 18'

Started to self-taught front-end coding almost a month ago.
Pretty much just HTML, CSS so far. I will start to learn JavaScript and meanwhile finish reading the book CSS Mastery by Andy Budd.

(BTW why people use the term 'self-taught'? I mean, you are always learning, it's not like you have already finished the learning journey thus it became past tense... I think we should use the term 'self-learning' lol. Life is long and we are always learnING, never stop until one day you physically couldn't)

So far I built a simple page with CodePen (for my badminton club Majestic and a portfolio page published here on Github.

I will list a few websites I used that provide free tutorials below:

1. freeCodeCamp
   It's great. For beginners. It shows you what is code and how it reacts (simultaneously) and what we can do with it. It gives me confidence. (As one of the biggest problem beginners have is self-doubt)

Through freeCodeCamp I learnt basic HTML and CSS and got to know got to know CocdPen where I built my first 3 projects.

Two things about freeCodeCamp tutorial that I was not happy about:

• I did not know some CSS they taught me was a part of Bootstrap. Until later days when I was building simple webpage myself and some code (bootstrap grid system) doesn't work then I did some research and realized, "darn it, it is part of Bootstrap!"
  If I want to use it, I have to link to them via CDN or install and include in my HTML file.

• Another thing is, they introduce new language too quick. I remember I just got to know some CSS code and they already include some simple JavaScript code in the tutorials. In other words, it doesn't cover a language deeply which is understandable.

In conclusion: freeCodeCamp is good for beginners to get to know code but if you want to learn thoroughly it is not sufficient.

They do have many coders post in their blog section which I highly recommend. It is called Medium.

2. Codepen

I got to know CodePen through freeCodeCamp and built my first 3 web pages. CodePen allows you to write HTML, CSS and Javascript on the same page you don't have to jump between documents. They also have many people sharing their cool tricks which you can 'fork' and study.

But after I picked a better offline text editor Brackets http://brackets.io/ I found myself barely use CodePen to build projects. I may, in the future use them to share some cool tricks (if I got any lol) and graphic design purely based on CSS.

3. W3schools

It seems many people don't like it. But I quite do. It's good for getting to know basic knowledge. I spent maybe 2-3 weeks go through their HTML and CSS tutorials and quizzes. And made some notes along the time. I found myself going back to w3schools quite often to recap some knowledge when problems occur during coding practice. I also use some of their tools often like colour picker and web safe font etc.

In conclusion, w3schools is good for going through HTML and CSS systematically. (I have not started to learn JavaScript from them yet cannot give any insight)

4. CodeCademy

I have not spent too much time with CodeCademy yet. It did not leave me a good first impression when I first come across it, to be honest. I found it difficult to find free tutorials and the online video course they are selling are quite "in-you-face". I understand they need to make profit by selling more courses but it's too much, in my standard anyway.

I did spend one or two nights learning JavaScript with them so far, pretty ordinary. (I will look into how do other people learn JavaScript soon and I probably will choose between w3schools and codecademy if I couldn't find a better choice)