By LocalPCGuy on Web Development

How to learn to develop web sites

First – learn HTML/CSS. You’ll do these in tandem, as you need both to do anything. Don’t pay attention too much the the version #’s like HTML5/CSS3 – just learn the basics and the rest will come with time as you do it.  Avoid W3 Schools website (it’s out of date) and instead use something like Mozilla Developer Network or SitePoint Reference Guides.

Then JavaScript – learn the basics of how to use it as you will need to if you do any web work. After you know the basics, learn how to use a library like jQuery to make your JavaScript easier to write (but learn the basics of how JavaScript is written first.) Free or mostly free JavaScript resources

PHP or Ruby/Rails is a good server language to get the basics of server languages down, plenty of tutorials and probably the most useful if you are looking to get work in the industry. You want to touch on the basics at first, learn how to setup a website with multiple pages, how to structure the files for the website and how to reduce code duplication by using includes and stuff like that. You’ll want to study the basics of databases, probably MySQL for starters.

Then you have to make a decision, are you looking to specialize in front-end (browser-centric) work, or the back end server side coding. Front-end is going to focus more heavily on taking website designs and bringing them to life, and could involve doing design as well if you are talented in that area. You’ll work in multiple browsers and do things that are readily visible to website visitors (both your good and bad.) Server-side code is hardly noticed by visitor’s unless it breaks, but well written code is vital to a good performing website. Server-side code is written against the version and standard of the language, so you don’t really have to worry about it working in multiple environments like the browsers in the front-end.

If you plan to focus on front end work, dive into the cross-browser differences in how they render, and really apply yourself to learning both JavaScript at a much more in-depth level and how you can use your knowledge of JavaScript to improve the use of frameworks like jQuery. Learn how to identify good/bad plugins, and when you should write your own. Start keeping track of resources that help you keep up to date on trends and browsers – the target you are programming against is always changing.

If you are going to focus on server-side, dive deeper into whatever language you choose, and probably branch out and learn at least one other one. Learn the strengths/weaknesses of the different server-side languages so you know which one is the appropriate tool for each website you build. Deep dive into databases and learn how to appropriately structure and access one. Learn more about how to setup servers, DNS and the differences between things like Apache and Nginx for serving a website. Learn more about deploying websites. Learn the MVC (Model/View/Controller) pattern and why you may want to use it.

You can try to be a jack of all trades, but most jobs split the two apart.  A person who tries to do it all may have a hard time being good enough at any one aspect to beat out someone for a job that specializes in one area.  That said, there are plenty of opportunities that don’t include working for someone else.

Tools:

  • Sublime Text 2 – nagware, but it is probably one of the best text editors available right now
  • LAMP/WAMP/MAMP – (Linux/Windows/Mac), Apache, MySql, PHP – you’ll gain good experience setting this up so you can run websites locally, and you should always setup your websites locally for dev work. You can download each of those separately and install them, but the package installers are just fine when you are starting out.
  • Chrome/Firefox/Internet Explorer – yah, you’ll need to test in them all. Chrome/Firefox have very good developer tools built in now, I switch back and forth but am a bit partial to Chrome’s tools at the moment. You should probably also test in mobile devices like iPhone Safari and Android Browser when possible.
  • PhotoShop. If you are serious, you’ll want PhotoShop, and probably the entire CS from Adobe. Don’t go doing automatic-code generation in any of the tools (including Dreamweaver) – it is not good enough for production work and you will learn bad code. GIMP is an acceptable tool to start on if you don’t have the funds for PhotoShop, but you’ll want to have PhotoShop and know it well before you try to apply for work in the field.
  • HTML5 Boilerplate – I don’t necessarily recommend using this as strictly as a template, but it is an excellent source of best practices for front-end developers. The source code is heavily commented with references to why things are done they way they are done.
  • Stack Overflow – great resource for finding specific answers to specific questions