Of course, how long it takes depends on many factors - your past experience, how much time you have, what other things you have going on in your life, etc.
Or, that's my opinion at least.
People have different approaches to learning.
- Some like to experiment - dive in, try things out, and see what happens.
- Others prefer a little guidance and like to follow some instruction - at least in the beginning.
If the first description sounds like you, then you'll want to dive in and just start making stuff.
If you prefer to learn by experimentation, then just start.
Seriously. Right now. (well OK, you can finish reading this post first).
Don't worry about what the "right" thing to make is. Just begin!
Here are some ideas:
- Make the text "Hello World" appear on the page with JS
- Make that blue box turn red when you click it.
- Make it turn back to blue if you click it again!
- Make a sidebar menu that slides out when you click a button
- Detect the user's mouse coordinates, and print them to the console
- Make an HTML element move to a random place when you click it
...or, just think of something cool you liked about a website you saw... or a feature you wish it had. And try to make it. If it's too hard for your current level, no problem - just work on something easier, and maybe come back to it later.
Anything you work on will help you. You might wonder, what's the point of making a box appear, or changing its colour? When would that ever be useful?
This is bread-and-butter web dev stuff that will come in handy almost every day.
This never stops. Whether you're writing your first line of code, or you're earning $250k at a huge tech company, you'll be using Google and Stack Overflow daily.
This might sound weird. I mean, imagine if you went to the doctor, described your symptoms, and they said "Hold on, let me just Google that." You'd probably see that as a sign of incompetence, right?
But development is not like other jobs. This video by Colt Steele is quite illuminating - he asked a developer with 7 years experience to share his Google search history for a week.
On one day, the dev made over 100 coding-related searches. And remember, he'd have read several pages from each search page. So we're talking hundreds of Stack Overflow questions, GitHub issues, and blog posts read. In one day. By a highly-skilled dev.
So if you're Googling how to write a
Step by step, bit by bit, you'll get there.
This is important, and something that many beginner books either gloss over or ignore completely. As Kent Beck said, when you're making software, you should "make it work, make it right, make it fast" - in that order.
Many beginner books and courses just teach the first part - make it work. But making it right is important too.
This means things like:
- Writing code in a way that's easy for other people to read
- Making your code extensible
- Writing small functions that do only one thing
- Using consistent naming for your variables, classes, and functions
Just remember to actually use what you learn in the books. Don't expect to get better by only reading. As the great Bruce Lee once said...
Secrets teaches more advanced topics like timing, asynchronous code, and cross-browser strategies, and strategies to improve performance.
And You Don't Know JS is not a single book, but a series of them. These books go VERY deep into specific areas of JS. For example, there's one 98-page book just on scope and closures!
Why? Simply because you can copy and paste code from the book.
Now, these days pretty much all print books will put their code up on GitHub, so you'll be able to clone these repos or get them from the GitHub website. But having the PDF right there on your screen just saves you a step.
Digital versions also tend to be cheaper, and since coding books are often bigger than your average paperback and run into the 600+ page mark, physical versions are pretty cumbersome.
That said, if you personally prefer a physical book on your desk, then do it your way.
Get Other People to Read Your Code
A way to really supercharge your learning is to get other people to read your code and provide feedback.
The reason code review is so useful is that it's specific to the code you're writing. If you read some new principles, concepts, or patterns in a book, that's great and will help you write better code. But you might not have a full grasp of when to use them, or why.
Good code review can fill those gaps for you. It will tell you, in this part of your code, this approach is better, and this is why.
Reading Other People's Code
It's also incredibly useful to read other people's code - as long as it was written to a high standard.
Although, your mileage may vary on this approach as the code might be minified (white space removed to make the file size smaller - it's basically unreadable, but there are tools online that will try to unminify it for you) and/or obfuscated (variable and function names are replaced with generic labels like
c, etc. to make it harder for people to read and copy).
Final Note on Vanilla JS Vs. Frameworks and Libraries
The reasoning was that using a framework is a bit like buying a painting to hang up on your wall instead of painting one yourself. Either way, you end up with a painting on the wall. And by buying one, you'll probably end up with a better painting. But you wouldn't have improved your painting skills.
For example, if you use jQuery to make an ajax request, you're not actually learning how to make an ajax request with JS. You're using someone else's code to do it for you - and be honest, you haven't looked at the jQuery source code to see how they do it, have you? (don't feel bad, I haven't either).
However, now I think I went too far with that philosophy. If I could go back, I'd tell my past self to start learning frameworks a little earlier.
For one thing, it'd help me actually start building things faster.
But another reason is that, like it or not, integrating frameworks and libraries is simply a key part of modern front-end development.
But, which framework should you experiment with?
With fullPage.js you'll quickly be building highly-polished sites that are up there with the top brands, quality-wise. I mean that literally - fullPage is used by companies including EA, Sony, and ebay!
If you're already using React or Vue, fullPage integrates perfectly with them so no worries there. It also works seamlessly with WordPress, (including Gutenberg or Elementor, if you use those for some reason). It's really cool! Check out some examples of what it can do here: fullPage.js examples.
- How to Create a Sticky Navbar with CSS & JS
- HTML5 Canvas - A Beginner's Tutorial
- How Not To Suck At Asking Coding Questions
- Top 11 Skills Required To Become a Web Developer 
Join 2,000+ readers and learn something new every month!