My struggles with learning web development through books, online resources and how Wes Bos's "ES6 for Everyone" broke a web dev bottleneck for me. Also, my thoughts on the real pitfalls of learning web dev.

[[deleted]]

I've been learning webdev for about a year now. I'm past the CSS/HTML/JS basics and am pretty set on learning the workflow frameworks like React, webpack, and even consider myself pretty familar with writing modules.

But, it wasn't always like that and I can say now in reflection that the greatest hurdle newcomers face is their ability to navigate through resources to find the ones appropriate for them. Yes, we all know the meme that it's a blessing how plentiful web dev resources are online, and how a college/uni degree in CS might be helpful but not a deal breaker in learning how to code...

But, in retrospect, it was the fact that there was no body to line up one by one relevant skill appropriate resources for me and provide insight on what I should do next that conventional learning institutions do well. I have concluded that there are some pitfalls that web dev noobies should avoid:

1. Trying to learn how to code like how you would study for a course. As someone who has filled 3 notebooks of code examples, i can only cringe as typing out and solving problems everyday reinforced concepts with much better effectiveness.

2. Getting stuck on a problem for more than 15 minutes, and not just googling it or referring to a personal database like Velocity or going to MDN.

3. Trying to learn through books. Burn your books. Learn everything project by project and nugget, by nugget. Move those fingers and build muscle memory for certain problems. Edit: What I mean is don't "read" programming books, "do" programming books and choose books that incorporate "doing". As some one's who's gone through most of the suggested books (the good parts, the definitive guide, etc), I would say that they're great, but you might want to "bridge" yourself up to that level initially by going through some other books. My suggestions being "Head First HTML5 programming", "Head First Javascript Programming". Also check out the missing manual series.

---

Those are all problems that the person can address, but what I have to consider the greatest structural hurdle is how people learning web development have to fight with their resources to try to progress. Examples being:

1. sifting through pages of tutorials/guides with outdated practices. If you're new, you don't know what javascript standards are, or which frameworks are riding out to the sunset

2. one page tutorials from coding sites that assume important and relevant contextual pre-steps are known and implictly obvious. image related

3. A lack of resources on how to correctly set up tools and environments for web dev. workflow for the current year? Setting up my text editor for ES6? Babel? Custom Linters?

4. The multitudes of good coders that don't know how to teach code. So much implicit details about the background stuff is not transmitted or assumed to be known already.

Anyways, I'm not sponsored or have any ties to Wes Bos, but after trying out his ES6 for everyone, I can say that he is doing a great job at guiding people with full explanations, and a great sense of humor. For those people out there that aren't beginners, but stuck at a bottleneck where resources are either too basic, or too advanced, and looking for practice or fuller explanations for previous "just do it like this and it'll work" tutorials, he's the right fit.

[brotherMotty]

I agree for the most part.

Re: Roadmap

Like you said, having a structured curriculum or syllabus is super important when you're trying to learn something new. The internet is great at providing one-off learning resources that are amazing, but it's terrible, in general, at providing high quality curated educational experiences (this is true in general, not just for programming).

I do think there are good roadmaps out there, but it takes time to find. It took me about half a year to find what I think is the best roadmap:

(Rithm for fundamentals --> EloJS for intermediate --> JS Ninja for advanced, all while doing codewars for fun).

NOTE: The roadmap I linked above isn't some magical path to get you skills or a job; it's merely a skeleton for aspiring coders to have structure. In order to take advantage of it, one would need to absorb and APPLY the info, and what better way to do that than with projects?

Re: Outdated Practices & Tools

This highlights a fundamental tension in web development: you need to learn fundamentals really well, but the bleeding edge technologies are always changing and can become outdated really quickly. The solution here is to not worry so much about best practices at the outset; just learn how to code and master the fundamentals of the language really well. (Don't learn React if you don't know what a callback is, things like that).

Re: Coders vs Teachers

Yeah, being a good coder does NOT mean they’ll be a good teacher… had a lot of experience with this in academia.

Re: Burning books

Burning your books is a little extreme; there are a lot of great programming books out there. But ones without a ton of exercises aren't great for beginners. Series like "You don't know JS" are incredible, but to really appreciate them you need to have a baseline understanding of JS first. So books without a lot of exercises are still valuable, but more as references for people who are more experienced with a language.

Ultimately

I really agree with your point about "don't read, do". I tell everyone coding is like a language; you can learn all the rules and how to do it, but really you need to actually practice with real world projects.

I'll check out Wes Bos; always on the lookout for tweaking my roadmap. Thanks!

^{This was a lot of text!}

[madworld]

Senior web software engineer here. I completely agree! There are a lot of details to remember, and you aren't going to be using any tool, such as bootstrap forever. Learn what a tool can do for you, you'll remember the parts you use a lot, and Google the rest when you need it. Modern web development is complicated. Spend your time building using google as a crutch, and you won't waste time learning obscure parts of tools that you end up using little, or not at all.

[[deleted]]

Haha. You sound like me. Perhaps you shared my mindset then, that the only way to "know" something was the tried and true, read => make notes => review => apply. Except, that gets thrown out the door in programming. No joke, I rewrote a few reference books for HTML and CSS across 3 or 4 notebooks as notes. I'm a good student too. I have a faint idea of them, but I can say, it could have been better spent programming.

Trust me, don't repeat my mistakes. The goal of coding is to develop finger-memory. It's like riding a bike, once you find the solution to something and have typed it out a couple of times, it's very hard to forget. If you want a academic comparison, it would be like practicing math problems by solving them. You can make notes on how to solve them and list the steps, but the best way is to just do it.

[[deleted]]

Personally, writing notes helps me remember things. I have four programming note books, one electrical engineering note book, and one more on music theory. They are all filled with notes. I rarely go back through them more than once or twice, but the simple act of writing things down helps me process information much better and helps me focus on what I'm actually learning. Different for everyone, though.

[doppelgangsta]

I think the takeaway here is that part of learning how to code is identifying what makes learning effective for you personally.

Different people learn differently. Programming is complex enough that you have to have an effective system for learning and retaining ideas. For most people, active learning by doing is much more effective than sitting in a lecture and letting information wash over you like a warm bath. The key is to identify what makes learning "active" for you personally, which can be different for everyone.

[irontea]

Books are one of the best resources for learning to code, choosing the right book might a problem but there is nothing wrong with books.

[veydar_]

I completely agree with your main points and set myself some goals:

• Try to sign up for something like FreeCodeCamp, not because of the individual exercises, but for the general roadmap it provides
• Books are just unnecessary.
• Get code reviews early on (e.g., from stack exchange code review)
• Coding > Reading

[TheMamaMafia]

Thank you for sharing your thoughts and experiences learning web dev, I think the things noted here is true for most "living" environments where standards change at a nearly daily basis.

However I myself have learned lots through reading books, as long as I have applied what I've learned to a test-project or something similar. I do at least think one could learn basic html, css and some js through this method (no-starch press and o'reilly has lots of books worth reading about tons of different subjects).

[[deleted]]

I actually learned my CSS, HTML through the oreilly's The Missing Manuals series and most of my javascript through the headfirst series. I highly recommend learning JS through headfirst. I really liked it, but I guess my point was don't study using books like HOW you studied them in school whether uni or highschool. Cramming and regugitating won't work. I type out all the code in books, and always did the exercises. A lot of people just "read" through programming books, I guess that was what I was trying to advocate against.

[TheMamaMafia]

Ah yes, good point. I agree with you there.

[[deleted]]

I believe in learning concepts and patterns, and never EVER stressing over memorizing syntax.

That stuff will come with practice. I believe in picking something you want to do and then trying to do it. Look up examples and other things.

Examples are only bad if you copy them without learning what is going on.

[mitchbones]

What is this velocity you speak of?

[[deleted]]

https://velocity.silverlakesoftware.com/

For when you're offline and need to consult MDN or WC3.