Skip to content
Jonathan's Page

Web App Developer Resources

— Comments — code, css, development, html, javascript, learning, links, pointers, programming, random, resources, tech, tips, tutorial, web — 4 min read

A few friends and acquaintances have asked me for some pointers and resources for learning how to become a web app developer.  Since this has started to become a rather frequent request, I thought I'd share some thoughts here. I'll probably update the links as I come across more, or decide I don't like some of the ones I have.  I'm pretty picky about where I send people, so expect changes and/or additions.

Being a Software Developer

There is more to creating Web sites and applications than just drawing them.  The creative vision may, and most likely, not originate from the developer who brings it to life.  It's our job, as developers, to take an idea and build it.  Many times, the vision brought before us is just that: an idea.  We have to take it and architect the structures and logic, to turn the idea into reality.

Under the pretty layer of the final product is a collection of technologies and languages that, when brought together, make some serious awesome.  One cannot compose a fugue without understanding scales and chords.  A poet cannot create a sonnet without knowing syntax. We cannot develop an application or Web site without at least some basic fundamentals.

First and foremost, I think you should have a very good grasp of symbolism.  If you cannot think abstractly, or apply symbolic scenarios then this will be a fairly complicated venture.  Programming is chock full of text that symbolizes structures, instruction and math.  A background in mathematics is highly recommended but it is not required.

I would also recommend knowing how the physical components you intend to interact with work. Such as the processors, memory, storage, and the network stack down to the physical layer.  Not required but makes life easier, in my opinion. Don't let it deter you.

Next, for specifically Web App development, I recommend acquainting yourself with the core technologies of the Web itself: XML(HTML), CSS, and JavaScript.

HTML / CSS / JavaScript

There are three main things to master in web development.  HTML will be the frame for which we build on. CSS is what defines the visual/physical/placement properties of the elements in the Document Object Model (DOM). JavaScript provides the application logic/behavior of the web app we build.

HTML

There are many elements available but most are left unused because for the fact that we use CSS to define meaning and presentation.  Beyond the obligatory doc-type, root, title, meta, link, style, script and body tags, the vast majority of web application user interfaces almost exclusively use: div, span, ol, ul, li, img and a tags.

There are a lot of tutorials over HTML and making static web pages. Making WebApps depends on the foundations of that knowledge, though Web Applications are dynamic and have different design constraints. Keep that in mind and always think for yourself.

Remember: HTML is XML. Treat it as such. Do not mix presentation with data/content. If you are using formatting and presentational HTML tags (such as font, br, p, b, i, s, u, strong etc) you are doing it wrong — or at least making it too hard.  With CSS, any element can look/be anything.

CSS

CSS is what you will use to make it pretty. It's crucial to know and master this. Web App User Interfaces that don't fully utilize this will suffer. There are even some behaviors and interactions that are nothing but CSS rules.

JavaScript

JavaScript is the client side programming language of web apps. Your back-end can be written in anything your heart desires, even JavaScript with node.js, but your code that runs on the client will be JavaScript, one way or another.  You can get really deep into this, but don't be overwhelmed. There are some really good resources that introduce it in a very nice way.

There are other languages available on the client side, but none of them are completely cross-platform or in the case of Native Client it may not be ready for prime time across all platforms.

Note: Most of the information on the w3schools site is correct, but there have been very public errors from time to time. Any resource could have errors.  If you try something and it doesn't work, cross check it.  I personally love Stack Overflow (and all related stack sites) as well as QuirksMode.org - a great cross-browser compatibility resource.

Sep 22 2015: caniuse.com has become my goto resource for cross-browser data.

© 2024 by Jonathan's Page. All rights reserved.
Theme by LekoArts