Big questions that’s often asked on a variety of forums. “What can I do to become a developer?” The question has puzzled many and often yields a list of books (that no one other than the poster has/will read), list of websites (that are WAY too advanced), and a battle over languages and definitions. Very pointless.

I’ll relay to you my journey and what I’ve learned.

What is a Web Developer?

Okay, to summarize this one we will drop “back-end”, “front-end”, “middleware” and other fragmenting titles. A Web Developer is a programmer that specializes in producing software and products for the web. This can include:

  • blogs
  • websites
  • web applications
  • User Interface programming
  • programming to talk with a server

and so on. It’s a broad category and yes, I know, it means something else in everyone’s mind. And that’s fine. So to narrow this down for a beginner, I will provide you with a step-by-step process to learn:

  • html – the markup language of the internet. Without it, no website would exist. It’s what separates text from images, what separates a heading from a bolded word
  • css – the styling of the internet. Without it, everything would look like crap ;) CSS defines how your site looks. If a link is blue or black, if your menu sticks to the top or bottom
  • javascript – the programming language of the internet. This is the language which allows you to submit forms without refreshing your site, for pictures to pop up on facebook, and so on.
  • PHP – the most common low-entry but powerful language which interacts with a server. This language allows you to check if users are logged in, communicate with a database, and generally make your site “better” in terms of management.
  • MySQL – the most common database paired with PHP. It will store passwords, user names, posts for your blog, and everything else :) even settings!

I won’t be giving you a tutorial that teaches you each one of these topics -> that’s several books worth of material right there. But rather, I will teach you what to tackle first and where to go from there. Usually, the job of a web developer would not span from front-end (html/css/js) to backend (php/mysql) and design but some jobs may require you to glide between the distinctions. Keep that in mind.

Please be advised that I’m not saying you’ll be able to enter the competitive web development field under 3 months. But you’ll be able to start seeing results, grasp some basics concepts and decide for yourself if you’d like to continue this path. Also, note that these were the times for me, and I had some minimal tech background.

The static!

html5 logo

HTML

HTML is the “HyperText Markup Language” and basically defines elements on your site. If you right click on a page and pick “view source” or a similar option, you’ll see a bunch of text and a lot of these: < >. This is HTML with maybe some javascript and css mixed in. But those less than and greater than signs are HTML.

So is this the first thing you should learn? Absolutely. Without it, you can’t really progress any further. Without HTML, CSS doesn’t make sense, Javascript works without a context, and PHP&MySQL will be useless to you (unless you’re going for pure back-end programming but even then you should know basic HTML).

So where to go:

  • w3schools – I’ll get beaten down for this however, w3schools is a great resource for a bird’s eye view of HTML. It’ll teach you the basics. This may sound weird but W3Schools ISN’T the most accurate resource ever but they do strive to be and I rarely ever find a mistake in their materials. So try that out :)
  • Mozilla’s “Learn HTML” – a fairly new resource. Mozilla (the company behind Firefox) created a slew of tutorials that will help you along the way. Use this resource to get the specifics down.
  • Good Tutorials – Probably my favorite place for tutorials, Good Tutorials provides you with up-to-date tutorials on just about everything. Look around and try some of these. I recommend doing a couple a day to really drill down HTML :)
  • Tuts+ Premium Course – NetTuts+ created a free premium course to learn HTML and CSS. I’ve never tried this but TutsPlus has never failed me so give it a shot and report back!
  • CodeAcademy - I’ve personally not tried their html/css course but their other courses are superb. It should be just as great for html/css.

time to learn: spend a week or two on it and no more. Chances are you know some basics without even realizing it. HTML is pretty damn easy to pin down and get a hang of :) If you can’t remember all the tags, that’s fine, you can always google it!

css-stack

CSS

HTML is great by itself but with CSS, you can make a site look like SOMETHING. CSS is short for “Cascading Style Sheets” and they basically dictate how things look. Remember learning about id’s and classes in html? This is what they’re used for, to identify specific elements that will then have styles. CSS is pretty easy to get into and with a few tricks that every pro knows, you’ll be on your way to creating pretty snazzy sites. A few years down the road, you’ll be creating animations (for one reason or another). So here’s where you can do for a quick start on CSS:

  • Good-Tutorials – time and time again, Good tutorials has proven to be an awesome resource
  • CSS Basics - again, another step by step, property by property tutorial set
  • 20 Sites that help - here’s a list of 20 more sites that teach.
  • Don’t forget the Tuts+ Premium mentioned in the previous section!

time to learn: try spending a couple of weeks just on CSS.

HTML/CSS Putting It Together

Before we jump to PHP and MySQL, you should start putting html/css together to make sample sites, testing your skills. My personal opinion? If you have a site of your own, create a “labs” subdirectory and throw those in there. It’s a great way to measure progress. Here are some people that have done the same:

And other sites. It’s great to have these handy for code snippets and other stuff. I keep mine synced via Github, but you’re welcome to keep a local or server copy of your files. However you want it. Need ideas for first projects? Alright!

  • create a sample 2 column layout with a top navigation. That’s the basic layout for most sites
  • code a navigation with a 3 level drop down.
  • code a landing page like the one basecamp uses.
  • create a nice looking form
  • put together a mock business/blogging page

time to learn: whilst learning CSS, you should have been doing some basic HTML stuff too. Spend another week or so doing some easy projects for practice.

The Server Stuff!

php logo

PHP

Before you kick me in the butt for skipping Javascript, consider this. Javascript is not 100% essential. I lived without it for a year as a freelancer. It’s also being replaced (somewhat) by new html tags and css properties. Is it completely? No. Well, let’s move onto PHP.

PHP is a great “server-side” language. What does that mean? It computes stuff and spits it out to html. As a basic example, you can use PHP to tell your site what the day is and put it in your html like so:

<span class="date"><?php echo date('Y-m-d');?></span>

PHP is very nifty and pretty simple to learn. It took me a week to get the basics down. PHP will allow you to create blogs and actual applications. It will also allow you to interact with a database and retrieve information. For this you’ll need a server that RUNS php.

Okay, getting a bit complicated. Read about it from a better authority on the language:

time to learn: Two weeks. Don’t expect to be a master afterward!

sql

MySQL

MySQL is a specific database type that’s EXTREMELY popular and runs WordPress and many first-time sites. SQL is a language that tells MySQL what to do such as pulling all data for a user named “ant”, or counting how many posts I’ve posted since last year and so on.

MySQL is pretty easy to learn to deal with, especially if you forego learning how to install it ;D (which you SHOULD do, in my opinion, at least at first). MySQL gets bundled with PHP on servers and elsewhere too. They’re known for their tight integration.

A lot of the MySQL stuff will get covered in the tutorials on PHP. That’s honestly all you’ll need until you take the next step.

time to learn: spend another additional week on SQL and database interactions. Pagination alone will give you a serious headache!

Putting it together

PHP and MySQL are like bread and butter. Where butter can sometimes be substituted for jelly (like PgSQL) and peanut butter (other types of databases)…Anyways, enough about food. There are several great projects you can dive into with MINIMAL php/mysql knowledge and they’re very fun:

  • making a blog (included in the PHP tutorials).
  • creating an emailing script
  • creating useful PHP functions
  • creating a quote engine (eg. write quotes, submit them to a database, and allow random retrieval…for fun! :) ).

One More Language

Well, and now onto the last one. And I’ll explain why last:

Javascript

Javascript is the client-side programming language that manipulates HTML, CSS, and can do loads of cool stuff. It can fetch pages and server-side info via AJAX, it can reorganize everything on the page, and so on. I saved Javascript for last because its real power, AJAX, requires server-side programming. So here’s where to learn it:

  • Code Academy
  • previously mentioned sites like tutsplus and goodtutorials.

time to learn: phew, so this one took me a while to learn. I’d take up to 30 days to really get the hang of it. Once you know how to make AJAX requests, you’re good to move on ;)

Design

Oh boy, this one is the most difficult to classify here. Design is inherent to web development especially for self-starters. Without design, development would leave us with poor looking sites, terrible UI, and a terrible headache of an internet. I can’t really point you in the right places for design but do keep in mind that it’s important that your sites look well and are usable. This does not mean you need to slave over photoshop for days and days or that you need to learn how to create digital paintings for extraordinary site backgrounds but it means that you need to see use your own discretion while developing the user interface for your site so that people can actually use your site comfortably.

Note that in professional settings, and for many paid gigs, you will be provided a design because that’s the job of the web designer and not the web developer. However, again, if you are a self-starter, working for a small startup that does not inherently deal with web development, or contracting with small businesses, your bosses/business owners will assume you know how to design. It’s a bad assumption and makes you clump two different professions together but it’s a very common one.

Other Resources

The last three are paid tutorial sites (with TutsPlus having a free version) and they are very well worth it. I personally used Lynda.com to learn a TON of stuff. They have great PHP/MySQL video tutorials.

Where To Next?

There are lots of places but I personally recommend learning:

Always keep in mind that all of the above languages can take YEARS to master and learn the kinks of but it’s okay to start out small and keep going from there.