Help! For beginner Web developers

, Alexander Goedde
Tags: html5 frontend

Helpful information sources for the beginning Web developer.

Hockey stick learning curve

The basics of Web development are relatively simple. Any experienced programmer can probably pick up enough HTML, CSS and JavaScript in a couple of days to hack a Web page into something with basic functionality.

Once you go beyond these basics, things can turn out to become unwieldly.

Grown complexity

Over the years, browsers have gained an wide range of functionality on top of the initial basic rendering of HTML. CSS, which first added styling, is expanding and now enables manipulations such as animating content. JavaScript has developed way beyond the simple scripting it was designed for, and keeps adding features.

The browser is the most prevalent runtime on the planet, but different browsers and browser versions also make it one of the most heavily fragmented. Testing compatibility is possible only within limits. The network introduces aspects entirely outside of your control, such as bandwidth constraints and latencies.

This means that to give the maximum amout of users a good user experience for your site or Web app, you have to consider things like browser support of features, fallback solutions when this is lacking, page load times, device sizes - and as many other factors as you're ready to attack at any given moment.

TMI (Too Much Information)

Since there are so many other people developing for the Web, there are countless blog posts, forums, frameworks, libraries and tools out there - one of which might just help you with the challenge you're facing at any given moment.

Add to that the fact that the Web is changing at such a rapid pace, and a solution that was the established norm a year ago may no longer be the way to go, and an article preaching the gospel truth from two years ago may now be today's heresy.

It can all be more than a bit overwhelming - for anybody. Unlike in other, more settled fields, here everybody's scrambling to stay up to date.

It also means that a Google search about a problem you're having will often lead you to about as much outdated and wrong information as current and valid help.

It's good to know some sources which you can rely on, so that you don't waste precious time implementing what may have been an authoritative answer in the Bronze age of the Web a few years ago.

Ancient wisdom: recommending use of the center tag.
Beware of Ancient Wisdom!

Reference Sources

Two high-quality sources are:

  • Mozilla Developer Network. This provides what comes closest to an official documentation for HTML, CSS and especially JavaScript. Just adding "mdn" to the query for any question which you think can be resolved by a reference documentation is usally the fastes way to go. 1

  • WebPlatform.org - run by the W3C (the World Wide Web Consortium - still the guys who have most say about Web standards), this collects a ton of tutorials and reference documentations. Useful to anybody from beginner to seasoned pro, but not necessarily always the most current.

Answers to Specific Questions

References can go a long way, but they never cover all aspects of a technology. They also don't concern themselves with what happens in the complex combinations of parts that real-world projects consist of. In short, they'll often have no information about your particular problem.

Again it's amazing what a general Google search can turn up, but your first stop should really be StackOverflow. They are the questions and answers site for programming on the Web.

They have good tagging which helps a lot with finding what you are looking for. Everything is also time-stamped, helping you find whether something is more likely to still be relavant.2 Popular questions usually have several answers, often allowing you to pick an option that best fits your case.

And finally, the vote system for answers usually does a good job of weeding out incorrect answers, the comments help to clarify details, and the reputation system for users serves as a rough indicator for who to trust.

Modern advice: text-align: center and display: inline-block to center a div
An answer you can trust
Modern advice: text-align: center and display: inline-block to center a div
... and a comment that may save you some head-scratching until you figure out the obvious

Another plus: for HTML/CSS/JavaScript questions, there is a lot of use of JSFiddle, which provides working examples of questions and answers. This gives you more context than an isolated couple of lines of code, and something to experiment with to better understand a proposed solution.

Staying up to date

Web technologies and Web development are changing at an extreme pace. You need current information to update you about changes to what you are already using, and to introduce you to new developments.

Unfortunately, a lot of the best content is spread across countless personal blogs. A CSS reader helps here, but then you're quickly in danger of information overload. As always, it's useful to have somebody with more time than yourself take care of the filtering.

When looking for Web development periodicals online, most sites seem to fall into the "10 ways to X" and "55 tools to improve your Website" SEO-hell category. The signal-to-noise ratio is quite low here - and you don't really want to get swamped by dozens of articles every day anyway, no matter the information density.

A few sources which really do contain quality information and won't overload you:

  • JavaScript Weekly / HTML5 Weekly: Both come from the same editor, so there's a certain overlap. They are collections of links to articles, videos, tutorials and demos across the Web covering a broad range of topics from the general to the very specific. This means you'll usually find a few items that interest you. While they are primarily intended as email newsletters, they also have a browsable archive.

  • A List Apart - Articles for the general Web developer population, from technical topics to philosophical musings. Always well-founded, and they have published some seminal stuff.

  • Smashing Magazine - Mostly good quality, tending towards practical tutorials and tips & tricks.

Can I use it?

With browsers developing at the pace they do, you'll inevitably come across cool answers to your question which simplify things by using some new JavaScript feature, or articles that explain a design made possible by an addition to CSS.

In Web development, the big question then always is: Can I use it for my current project? There is no one answer - it all depends on a lot of factors, most importantly which browsers you need to support, and how far support needs to go.

An invaluable resource for getting a quick overview of where browser support for a feature currently stands is the aptly titled caniuse.com.

This presents a graphical overview of past, present and even (announced) future support, nicely color-coded.

Little steps

Initially, things may be overwhelming. The thing to keep in mind is that you're not alone - there are legions of web developers out there. For any basic, and most advanced questions, the answer is out there - if you know how to find it. With the sources above, you should be well equipped to start your search.

Footnotes:

1. It also keeps you from ending up on the pages of W3schools.com, which ranks surprisingly high on Google despite offering often sub-par, outdated or incomplete information.

2. It's surprising how often I come across blog posts which do not give me any indication as to when they were written. Not providing this information should be considered a cardinal sin!

Start experimenting and prototyping for IoT applications with Crossbar.io and Raspberry Pi!

Loaded with all the software you need to make the board part of WAMP applications!



Learn more

Recent posts

Atom Feed

Search this Site

Stay Informed

Sign up for our newsletter to stay informed of new product releases and features:
Community Chat