Learning Web Development

I want to learn Front-End Web Development – where should I start?

Before we get started, let me emphasize what I feel will be the most important takeaway from this article about web development. The thing that will help a fledgeling web developer most is a voracious hunger to learn. You will never, ever reach a point where you have mastered everything because, more than any field that I’ve experienced until now, change is constant and very aggressive. Constant self-education is the only thing that can keep your skill-set fresh. If a lifetime of teaching yourself new skills sounds terrible, you might want to look for a different career.

You have to start somewhere, though, so where should that be?  Start with the fundamentals (HTML, CSS, and Javascript) and go as deep as you can. Early on, you’ll find that you have to constantly look things up and debug why something isn’t working as you might expect them to. It will be very frustrating. The dirty secret is that everything you learn will have this gnarly burn-in period. Make your foundations strong enough and you won’t have to worry with them as much when you’re building on top of that knowledge.

As you’re learning the newest hot shit, if you have to keep stopping that process to debug some HTML or CSS in your layout in addition to whatever new skill you’re trying to take on, it’s going to make forward progress a much larger challenge than it needs to be.

So, not only should you learn to walk before you run, make sure that you’re learning to walk really well and running will be much easier.

HTML

HTML (“Hypertext Markup Language”) is the basic structure of your content. In the early days of the web, people learned to make HTML do things that it was never designed for in order to throw a layer of design on top of everything but, as sites grew in complexity, we needed a more robust solution. We had the content layer in place, so it was time for a design layer.

CSS

CSS (“Cascading Style Sheets”) fills this design need. It enables web developers to separate content from the presentation of that content and significantly opens up a wide array of options. Pay close attention to some of the newest elements like Flexbox, because they will really help you out in some very basic, but powerful, ways (like vertical centering, for instance).

So we’ve got content and presentation, but how do we get some fancy interactions or business logic into the mix?

Javascript

Javascript was created to add this interactive layer to websites. You can use it for simplistic user interactions like having something (non-standard) happen when a user clicks on something, but also for very complex tasks like building robust application-like experiences. Some powerful new javascript frameworks like EmberJS, AngularJS, and React provide the scaffolding for you to create intricate, powerful, and responsive experiences – all inside a user’s browser.

Only 3 Things? That’ll be EASY

Don’t underestimate how deep you can go in even just one of these fields. I’ve found that the only way to really learn is to jump in and just start building shit. You’ll run into many roadblocks along the way but, if you’ve got the stamina and drive to keep going, those will become less and less frequent. The cliché “practice makes perfect” is apt, though I’d probably change it to something more like “practice makes better.” There will never be a “perfect” when it comes to the web because even if something is set up ideally today, I guarantee that it will become an embarrassing joke shockingly quick.

Read Patrick’s series on web development fundamentals, starting with this piece on viewport size.

Do your users know to scroll?