Web Design & Development for Business

Please note: while I originally intended on updating this page regularly, the reality is that I have not. This was last updated on 5/15/2011. While much of the information may still be relevant, please keep that in consideration when reading.

Binary World

Intro

I get a lot of comments and questions about my programming.  It’s not that I’m a great programmer (I’m not), but I think that it’s that people see how my partners and I use my programming to grow our business and create a competitive advantage.  People want to know how I learned, what I learned, why I learned what I learned, and – most importantly – how they can then get started on building the skill set.  The reasons why you want to learn how to design and develop websites is clear: it’s a skill that gives you power.  Creative power to turn your ideas into reality.  Financial power to use the skill to create better opportunities for yourself.  As a bootstrapping entrepreneur, it’s a major expense that you don’t have to worry about.  Ask anyone who has hired a programmer how expensive and time consuming it is, and how hard the communication is, and you’ll begin to realize how valuable of a skill it can be.

My story is outlined in quite a bit of detail in this post from a while back so I’m not going to delve into that.  If you want to read about some specific examples of my programming and how it’s helped our bottom line, check out the programming category.

This essay is intended to be as succinct as possible while still being resourceful.  It’s intentionally opinionated.  Like most complex skills, there are a million different approaches you can take.  This is my approach.  I think it’s a good approach.  Based on what I’ve written here, you should be able to start from scratch and learn how to develop real live functional websites.  I’ll be updating this over time as the technology changes, my skills grow, and I receive helpful feedback.

Table of Contents

Who Should Read This?

This is written for anyone interested in developing their own web ventures.  There are however, a few key pre-requisites:

  1. You have a desire to learn.  Like anything else, programming takes practice to improve.
  2. You’re a savvy web user (i.e. you are experienced at shopping online, using social networks, emailing, etc).
  3. You’re willing to spend a few hundred dollars.  I’ll almost always present a free alternative, but in some cases you’re eventually going to have to fork up a few dollars.  Trust me, it’s worth it.  The few hundred dollars I’ve spent have taught me more useful skills than I learned from the $120k that my college education cost.

One More Thing Before You Get Started…

Let’s take a step back for a second. Since I initially wrote this essay there has been a major improvement in the hosted website platforms out there that enable you to build elegant, modern, well-coded, customizable, flexible, search-engine-friendly, and well, awesome websites without knowing anything about programming or needing to worry about web hosting or any of the problems that can arise from building something on your own.

The two most prominent examples are Squarespace for sites and blogs, and Shopify for e-commerce. I highly recommend looking into both to see if they can solve your problems prior to delving into learning to program from scratch. They aren’t free, but they can save you incalculable amounts of time, effort, and stress, and allow you to focus on building a great business and making money, which is probably why you’re reading this in the first place. Increasingly over the past few years I’ve begun to recommend these sites to people as a way to build a great site without being a developer.

That said, if you’re looking to build a more complex site/app, if you’re looking to have your web technology be one of your competitive advantages, then you’ll probably need to learn some web development. If that’s the case, read on!

Getting Started – Just a Little Theory

One of the tough things about web development is that there are a lot of different programming languages working together to deliver a functional web page.  It makes sense once someone explains it, but it can be hard to find a simple explanation.  Before we get to defining those different languages, we have to first talk a little bit about how the web works.

Web pages are delivered to your screen from a computer referred to as a web server.  The computer  is specially configured to maximize performance in serving web pages, as opposed to the many other things we use our computers for on a day to day basis.  When you’re just getting started, it makes the most sense to just rent space on someone elses server and let them do the maintenance.

You view the web pages in a web browser such as Internet Explorer, Mozilla Firefox, Safari, Google Chrome, or Opera, just to name a few.  The web browser interprets the code sent from the web server and displays it accordingly on your screen.  One of the most frustrating things about web development is all of the inconsistencies between how each version of each browser displays the exact same code.  We’ll talk about how to deal with that later on.

The programming languages that help piece together web pages fall into one of two categories: client side or server side.  Client side scripting occurs when the browser itself interprets and executes the code sent from the server. You can see the client side source code that the browser is interpreting by hitting Ctrl + U on any web page in Firefox, Chrome, or Opera, or by going to Page -> View Source in Internet Explorer or Safari.  Server side scripting occurs prior to the server sending the page to the web browser. It is used to dynamically change the client side code that the web browser interprets.  You cannot view the server side code since it is processed on the server.  The browser never sees what, if any, server side code was executed prior to getting the client side code.

Which Languages Should I Learn?

Now on to the programming languages themselves:

  • HTML (Hyper Text Markup Language, client side) – this is the foundation of any web page.  It is used to control the basic format of the page – the title, the headings, the paragraphs, the links, the images, the forms, and more.  Other client side languages can be embedded within HTML pages or linked to externally (or both).  XHTML (Extensible HTML) is a stricter, cleaner version of HTML.  All of the HTML you write should be XHTML.
  • CSS (Cascading Style Sheets, client side) – this is used to apply styles to your web page.  Let’s say you want to make all of your links orange.  Or change the font of all of your headings to Arial.  Or put a border around every image.  CSS enables you to simple change all (or some) of a specific type of element without having to do them one by one using HTML.
  • Javascript (client side) – this is used to add dynamic elements to the web page.  For example, you could use Javascript to make a countdown timer, cycle through a set of pictures, or change the contents of a page based upon something a user selects.
  • PHP (PHP: Hypertext Preprocessor, server side) – this is used to create dynamic client side code to customize user experience and simplify web development.  PHP can be used to develop one commonly used page (like a product page or a blog post) and then automatically adjust the content based upon what the user requests.  Instead of creating a hundred different files for each product in your store, you create one dynamically changing file that has the capability of appearing like a hundred different unique pages.
  • MySQL (My Structured Query Language, server side) – this is a database language used to store all of your data for your dynamic PHP application.  If you are building product pages for example, you’ll need to store the unique product title, description, photo, etc for each product.  Then when the user requests a specific product page, you’ll use PHP to retrieve the data and create the page to send to the web browser.
  • AJAX (sometimes referred to as Asynchronous Javascript and XML) – this ties all of the above to give you the ability to build powerful web applications that blur the line between web browser and software by performing page manipulation and database queries without requiring a page refresh.  Gmail is an example of how an email client performs closer to an offline email client than a static web page.

Wait…Why PHP & MySQL?

Anyone who has a bit of experience with the web will notice that I just made a few decisions for you.  HTML, CSS, Javascript, and to some extent XML are languages that are common across all developers.  But when it comes to the server side stuff, there are a plethora of choices.  I use PHP and MySQL.  Other popular choices include Cold Fusion, ASP.net, and Ruby on Rails. Why PHP/MySQL?  The answer is really simple:  because that’s what everyone else uses.  It’s also free, which helps, but mostly because LAMP development (Linux Operating System + Apache Server Software + MySQL Databases + PHP Scripting) is the most popular development platform.

When you use the most popular platform, everything begins to stack in your favor:

  • You have more hosting choices, which results in the most powerful servers for the money.
  • There are more developers to chose from when you’re hiring or outsourcing.
  • The majority of  popular open source software is developed for PHP and MySQL.  This blog is hosted on WordPress.  If you Google “PHP MySQL” + any type of platform (shopping cart, blog, forum, Digg clone, ad server, etc) you’ll almost always find plenty of options.

How Much Should I Learn?

OK, so now that we’ve got the theory out of the way, you can start learning.  But how far should you take it?  I think that depends on your situation:

  • If you plan on developing basic, aesthetically pleasing sites: learn HTML, CSS, and one tiny bit of PHP called includes to manage your sites (well worth 15 minutes to learn, you’ll thank me later). This is most suited for the graphic designer who wants to take their work to the web and develop simple web sites for themselves or for clients.  Once you get that stuff down, it would be a good idea to learn some Javascript to expand your repertoire.
  • If you plan on developing database-driven web applications: learn it all, in the order I present below.  It seems like a lot, but you can get a great web site up and running with just some HTML and CSS.  Then as you learn the rest of the skills you can enhance your site and take on more and more challenging projects.

How Long Will It Take?

Everyone learns at different paces, but below are some general guidelines for how long it will take to become moderately proficient in one of these skills.  By “moderately proficient” I mean being able to use it to build a solid website for yourself, which is what you should be doing a few times before attempting to build anything that attempts to make money.  Like anything worth doing, it’ll take longer to become good at, and since this field is always changing, striving for mastery is elusive and possibly unrealistic.  I strive to constantly be learning how to solve more problems.  If you do that, one by one you’ll acquire a pretty strong set of skills.

  • Getting set up (reading this guide, deciding what you want to learn, installing the right software, picking out a domain, getting hosting set up): one weekend
  • HTML & CSS: two weekends
  • Javascript: one weekend (for most practical applications)
  • PHP & MySQL: a few months of programming on the weekends to build basic web applications.   Another six months to a year of consistent programming to be able to tackle the majority of common problems.  If you’re a college student, you could probably cram this into a summer if you picked up a few of the PHP books I list out below and follow them from cover to cover.
  • AJAX: Unless you’re really ambitious, I wouldn’t attempt AJAX until you’ve had some success with PHP & MySQL.  You really have to be comfortable with all of the above, which you can only accelerate so quickly.  I’d say wait a year and then pick up an AJAX book.  It’ll make a lot more sense.  Once you actually get to learning it, it shouldn’t take more than a few weekends to get down.

What You Need To Get Started

Software

Before you get going, there is some software that is essential for any web developer (I’m assuming you’re using a Windows OS. If not, there are Linux and Mac alternatives, but you still should have the ability to boot to Windows for some testing):

  • Web browsers – download them all.  Internet Explorer (I like to use IETester to test older versions of Internet Explorer), Firefox, Chrome, Opera, and Safari.  Have the latest versions installed on your computers at all times and get used to checking every single change you make in all of them.  Real quickly you’ll learn that all browsers never show things quite the same.  I prioritize based upon market share.  Once you have some web analytics on your site, you should switch to prioritizing based on your unique user base, which will often be different than the global market share.
  • Firefox Add-ons – Firefox is hands down the best tool for web developers because of all of the extensions available.  I develop in Firefox and then check the other browsers after I’ve completed a change.  I have the following extensions installed:
    • Firebug – enables you to modify HTML, CSS, and Javascript in your browser and see the changes immediately. This saves a ton of time – you can try 10 things to see what looks best before actually making a change to your code.
    • HTML Validator – helps ensure you write W3C compliant code (I’ll get into this in a bit).
    • MeasureIt – a virtual ruler that you can draw over any web object.  Great for quickly figuring out how big an image is or how wide a page is.
    • Screengrab – allows you to take a screenshot of an entire web page (not just the visible portion).
    • ColorZilla – allows you to get the RGB and hexadecimal color value of any part of a web page. Especially helpful for designers.
    • Remove Cookie(s) for Site – allows you to remove all of the cookies associated with a current site in your browser. Any time I am testing a site that relies on cookies I use this regularly.
    • User Agent Switcher – allows you to switch browser user agents right in Firefox to mimic any browser. I use this primarily to test device detection (serving a different site to mobile users or iPad users).
    • Web Developer – this has a ton of functionality, but I mostly use it for the “View Cookie Information” feature. It allows you to view the active cookies for any site in a separate tab. Helpful for testing exactly when a cookie is added or deleted.
  • Image Editor – even if you’re not a designer, you’ll still need to be able to make some basic graphics.  Graphic designers will likely want to fork up the money for Adobe Photoshop (clearly best in class), but I switched to the free Paint.net a few years ago and never looked back.  GIMP is also a very popular free image editor.  Any of the three will do for most web design.
  • Text Editor – this is the piece of software where you actually write and edit your code.  You don’t need anything fancy – you just need syntax highlighting, the ability to FTP upload files to your web server, and a few other basic features.
    • Notepad++ – the simplest solution, Notepad++ is a basic text editor with powerful syntax highlighting, auto-complete, and other useful features.  It can be used for just about any programming language. Many programmers swear by Notepad++ because of it’s minimalistic interface. You’ll have to use a separate FTP client, as Notepad++ does not include one.
    • Netbeans – my current favorite development platform, Netbeans is a full fledged IDE (integrated development environment).  It’s free, open-source, available on any operating system, and is extremely powerful whether you’re a sole developer or a team working on a large scale web application.  While it also can be used for any programming language, you’ll just need the PHP version on the download page.  The PHP tutorials are fantastic.  After perusing through them for a little while I had no problem hitting the ground running.
    • Adobe Dreamweaver – I don’t recommend learning on Dreamweaver.  Although I myself learned on Dreamweaver, it can lead to bad habits by encouraging you to use it’s WYSIWYG design tools instead of actually writing code. It’s a powerful editor even if you don’t use all of their built in tools, but for a solo developer I don’t see the need to spend the money for it when you have Netbeans out there for free. There are a few exceptions to the rule – if you plan on doing Adobe development (Flash, Flex, Air) or like the simple check-in-check-out file management, it might be worth your money.
    • phpanywhere – a new browser-based PHP editor with some pretty advanced features. I have yet to test it out, but I’m following it closely and think it has a bright future. It’s worth considering especially if you’re using a lot of different machines (desktop, netbook, laptop, at home, work, etc) and particularly if you’re using a lot of different operating systems and want some consistency without having to install software on every computer you work on.

Hosting and Domains

You’ll need a place to develop and test your web sites.  If you plan on actually launching a website, I suggest buying hosting space before you get started.  This way you learn in a real live environment, which I think accelerates the learning process.  When just getting started you’ll only need shared hosting (web hosts host your web site and other web sites on the same server).  Shared hosting is very very affordable.

You’ll want your host to have phpMyAdmin installed (software for interacting with your MySQL databases), as well as the ability to run cron jobs, set up email accounts, modify the .htaccess file, and change file and folder permissions.  The good news is that almost all PHP and MySQL hosts these days have that and much much more.  I prefer to use hosts with cPanel installed to manage everything, mostly because I’m familiar with it and because it’s the most common interface for managing your hosting.

We host our sites on a dedicated server with LiquidWeb, but I’ve also used Hostgator and iPower.  There are literally thousands of options.  The shared hosting plan on Hostgator is more than enough to get started for under $10/month.  That’s my recommendation.

If you just want to learn for the time being, you can install Apache, PHP, and MySQL on your Windows computer using WampServer.

Your web host will likely include a domain (or several domains) with your purchase.  A word of advice – keep your domain names separate from your hosting.  You should keep control of your domain names.  When your host registers it for you, they make it difficult to transfer.  I’ve spent countless hours doing this for myself and for clients.  You’ll likely transfer hosts several times as your site grows, so this simple step now will make your life a lot easier down the road.  We buy all of our domains on GoDaddy.  When buying a new domain name I only register it for one year.  I say “no” to every single upgrade they offer.  It ends up costing about $10 and you can transfer it to someone else or change hosts at will.

This is probably worthy of  an article or post  in and of itself, but I’ve found Domainr to be incredibly helpful when brainstorming domains.

The Programming Languages

Finally, it’s time to learn how to program!  For each language I link to some web tutorials on W3Schools, link to some recommended books, and then list out some important tips/resources that tutorials and books seem to skip over.  I’ll finish up with some sample “projects” that you can do to test your skills.  In all cases, buying the books are better than the web tutorials.  The web tutorials are great for getting your feet wet and deciding if you want to continue, but once you become serious I’d advise making the small investment in the books.  If you know you’re serious from the start, I say skip to the books right away.  I personally prefer to get multiple books on each topic.  It might be overkill, but I like to see how different people approach the same problems.  Sometimes one way just clicks in my brain better than another.

For the web tutorials on W3Schools, click “Next Chapter” in the upper-right to progress to the next page.  The table of contents is on the left-hand side.  For some reason, this isn’t completely intuitive to me so I figured it worth a mention.

For the books, you’ll notice I recommend books from the same publishers in almost every category.  I haven’t read every single book, but I have read at least one great book from each publisher, which has lead me to believe that the rest of their content is of the same high quality.

HTML, XHTML, & CSS

Web Tutorials

Books

Tips

  • Always wireframe any site you build.  Wireframing involves drawing a basic structure for the layout of your pages and how they’ll link together.  SitePoint has a great article about wireframing.  It’s a few years old but still very relevant.  I wireframe with pencil and paper, but have recently discovered Mockingbird and will be trying that for our next site.
  • The W3C (World Wide Web Consortium) is a community that develops web standards. Writing W3C compliant XHTML might not sound sexy, but it will help with debugging, help cross-browser performance, and help search engines better understand your content.  We only write W3C compliant code now.  Use the HTML Validator FireFox extension to check any page for errors.
  • Consistent cross-browser CSS is almost impossible.  The Yahoo Developer Network provides a Reset CSS file that neutralizes many of the inconsistencies that occur between the various browsers.  Include it in your projects and you’ll save yourself a ton of time.
  • Get in the habit of always controlling your styles with external CSS styesheets.  You’ll want to do the same with Javascript files too.
  • The hardest part about CSS is understanding how to use it to lay out the basic design framework of your site. The YUI CSS Grid Builder helps you build simple, cross-browser compatible layouts with just a few clicks. It’s a good starting point for your first few sites until you become comfortable doing a layout from scratch.
  • Dreamstime is a great place to start for royalty free stock images (they have a free section), but you can also use Flickr or Google Images…just be careful not to swipe images that you aren’t allowed to use.  Shutterstock has the best images, but they are pricey.

Projects

  • Build a W3C compliant personal site with a few pages (Home, About, Resume, Contact, etc).  Use a single external CSS stylesheet to control all of the styles on the page.   Make sure to use all of the common HTML tags – at least links, paragraphs, headings, images, and lists.

Javascript

Web Tutorials

Books

Tips

  • In many cases, you can accomplish all of the Javascript you need by using the Javascript effects framework script.aculo.us.  It’s worth a little time to learn because of how much time it saves in the long run.  We use it in all of our projects. (jQuery is the new “standard” and is more powerful, but I haven’t used it yet in a commercial project)
  • Lightbox is a very simple script that you can use to create elegant photo galleries.  We use this on Detailed Image for our product images.
  • Javascript is my weakest area.  This is intentional – the other languages are much more critical to a business.  I know enough to do everything we need.  If that changes, I’ll learn more.

Projects

  • Add a few things to spice up your personal site – links or buttons to change the font-size, the colors, and which text is visible.

PHP & MySQL

Web Tutorials

Books

Tips

  • I rely heavily on the documentation on PHP.net.  Every time I think “I wonder if you can do X with PHP?” I search PHP.net and usually find a function that does what I want.
  • I can’t stress how important security is. Any time you have data in a URL or in a form that is querying the database you need to take extra precautions to protect against SQL Injection:
  • Before creating your first database, you absolutely need to learn database normalization.
  • It takes work to learn, but using functions and classes to write object oriented PHP your code will make it more re-usable and more scalable.  It might not make sense to build your first site like this, but once you advance to larger scale projects it’s a necessity.
  • Properly using your .htaccess file can save you a ton of time and effort.  The most common tasks: re-writing pages and redirecting files to new locations.
  • cPanel makes it easy to do most common tasks: create email accounts (including forwarders and catch-all accounts), create databases and database users, and browse files (which I use to change file permissions).  Their documentation Wiki explains these and much more.
  • Running automated PHP scripts (aka cron jobs) in cPanel is also pretty easy.  Follow the Advanced Interface steps in their Wiki to set up the times, and then use the following text for the command: php /home/[username]/[path to script]/[script name].php where the username is the user name of your account, the path is the path of folders to the file, and the script name is the name of the file.  This works for most cPanel set ups I’ve worked with.  If not, you might have to contact your host to figure out your file structure.
  • Many developers find that PHP frameworks help increase their development time.  If I was just starting out, I probably would develop on a framework to save time.  For better or worse, I’ve sort of developed my own “framework” that I can rapidly build upon and therefore have never quite been able to justify the jump to a framework.  Here’s a list of 16 popular frameworks that are probably worth looking in to.
  • The aforementioned WampServer can be used as a testing server. After you’ve successfully tested your changes locally, you can then deploy them to your website.
  • If your site grows fast (to the point where you are outgrowing your hosting), you’ll want to consider implementing a caching system to minimize database queries.  From my experience, an overload of database queries is the number one cause of a site crashing as it gets a wave of traffic.  WordPress has a popular plugin called WP Super Cache that does this for your blog. 
  • Eventually you’ll probably want to implement version control for your projects.  This automatically backs up your files every change you make so that you have a copy of each “version” of each file.  NetBeans makes version control pretty simple.

Projects

  • Install a WordPress blog on your site.  This is a great first project after reading about PHP & MySQL for a few hours.  All of the code is written, but you still have to install it, which requires creating a database, changing permissions, working with a .htaccess file, and more.  They have fantastic documentation to guide you every step of the way. All key that you’ll need to learn eventually.  Once your blog is installed, install a few plugins and themes.  Pick your favorite theme and customize some of the CSS for practice.
  • Build a few of the projects in one of the recommended books.  They generally have you build content management systems, blogs, forums, or email programs from scratch to teach you a wide array of skills.

AJAX

Web Tutorials

Books

Tips

  • Only use AJAX when it actually improves the user experience.  In many cases, the user experience is better by having a page refresh.  Anything that might be bookmarked is a good example.  Try not to go “AJAX crazy” on your sites.

Projects

  • If you’ve gotten this far, I’m sure you can come up with a project to test your skills!

Your First Commercial Site

At any stage in the process you can start a commercial site.  Even after a few weeks of just HTML and CSS.  For example, if you’ve got a photography business like Jakob, you just need a simple site and some Google AdWords to get rolling.  Just don’t over-extend yourself.  If you’re at that stage in your development, you should develop business ideas that your skills can handle.  Don’t try to build an interactive web app quite yet.  There are plenty of opportunities for every skill level.  A good way to get started is to learn HTML, CSS, and a little PHP and then install a WordPress blog.  Use that platform to start your first business.  Their are plugins for almost anything you can think of.  Then learn and apply the rest concurrently as your site grows.  You’ll probably be better off taking this approach as opposed to trying to learn everything all at once.

What’s Next?

This is just the tip of the iceberg.  Once you launch a site, you have to market it.  To market it effectively, it has to be SEO friendly.  Luckily, I wrote an essay about just that: SEO & Web Marketing For New Web Ventures

Feedback

I want this to be a helpful resource.  I hope to continuously improve this essay based on your feedback.  Please email me at adam [at] adam-mcfarland [dot] net if you notice a mistake or if there’s something you’d like me to add.