Contents

• Part 1: Hardware
• Part 2: Server
• Part 3: Networking
• Part 4: Web design (DIY)
• Part 5: Web design (geek/hacker)

---

Rambling introduction. Sorry.

In the last post in this series, I looked at some options for creating a website with relative ease. Perhaps the word “easily” should not be present in the title of this, the last episode.

If you’re a budding geek/hacker, sooner or later running WordPress blogs is going to get old. You could spend a lifetime learning how to bend WordPress to your will (which would be like dancing on shifting sand – it’s constantly changing underneath you and you’ll die from exhaustion) or you could set your mind to doing the thing from scratch. Or near enough from scratch.

I first got into programming (at the age of 11 or so) when the “hacker” community demographic genuinely consisted of bearded recluses. Social skills were an inconvenience. If you couldn’t say it with ones and zeroes, it wasn’t worth saying. Later on, when I took Computer Science at university (along with Law), little had changed. Less than three percent of the people in my year for CompSci were women. Less than three percent had discovered personal hygiene products. It wasn’t the same three percent, by the way.

I say this by way of apology. My path to web development was long and winding. I had experience with many different programming languages before my eyes were opened to the wonders of web-centric coding. This gave me quite an advantage. Diving into this material can be intimidating, if you’ve little or no experience of code. Let me just reassure you: all you need to do is assimilate a little bit of knowledge at a time. Eventually it will all start to hang together. With the tools I’ll show you, you’ll be hammering out awesome code before you can say Xyzzy.

Disclaimer: proceeding down this path may not turn you into a geek. Or cause you to grow a beard. Please try to contain your disappointment, if so.

The building blocks

Many (but by no means all) web sites are built using a combination of:

• HTML: the language which describes the components of a web page. It has much more to do with layout/structure than with how things actually look. HTML is probably the easiest bit to learn. In your browser, you can right-click on most web pages and select “view source”. What you’ll be looking at is largely HTML code. Start learning HTML at W3Schools. Whenever I need a quick reference for HTML, I go here.
• CSS: Cascading Style Sheets describe how a web page should look. Colour, positioning, borders, etc. Reference here. Tutorials here. Learn how to do fancy things with CSS at CSS Play and goggle at others’ CSS prowess in the CSS Zen Garden.
• JavaScript: There seems to be an increasing trend to use “CamelCase” when writing “JavaScript”, these days. When I started learning, it was simply “javascript” – not to be confused with Java. JavaScript is a true programming language, which runs in your browser. It is loaded along with the HTML and CSS and actions are performed on the basis of the JavaScript code instructions. Reference here. Tutorials here.
• PHP: A hugely popular server-side (so-called because it runs at the web server end, not in the browser) programming language. PHP is by no means the only – nor necessarily the best – web programming language out there. Ruby, Python, Java and ASP.NET all have a strong presence in modern web sites. PHP is the one with which I and many other far superior web developers are familiar. It’s idiosyncratic and inconsistent at times, but I have found it to be easy to learn and for the most part well documented. The official PHP site is an excellent reference tool. If you learn PHP, you’ll be using this site’s function search box regularly. The W3Schools tutorials don’t cut the grade for me here. Start learning PHP at the home of PHP.
• MySQL: one of the most popular database management systems on the planet. If you need to store a lot of data (or even a little), you’ll benefit from a database engine powering your web site. Learn about using MySQL within PHP here. The official reference is here.

Gasp. That’s a lot to get hold of, isn’t it? Don’t worry – you’ll see that a lot of this learning dovetails together. For example, once you’ve learnt some JavaScript, picking up PHP will be that bit easier, because they have much in common.

Frameworks

You can get by, just knowing the building blocks. But if you want to create efficient, reusable code, without continually reinventing the wheel, you’d do well to make use of some frameworks. Each language has many frameworks and you could spend a lifetime trying them all out. I will steer you in the direction of a small few, but by all means try out as many as you have time for. Each is different from the other, which can be bewildering, but it also means you’re likely to find frameworks which fit or even enhance your style of working.

• Twitter’s Bootstrap: built by the mighty Twitter, Bootstrap gives you consistent CSS styles, which (amongst other things) help to ensure your web sites look very similar in different browsers. Sooner or later you’ll be stung by cross-browser differences. Making use of a CSS framework such as Bootstrap will reduce the impact of this pain. Bootstrap is more than just a CSS framework, it also has JavaScript plugins. There’s much to explore here and unless you’re already a CSS/design guru, it will make your web sites look better.
• jQuery: a phenomenal JavaScript library – it enables you to do phenomenal things on the browser side, with very little coding, which would otherwise take you hours of work. jQuery is not the only such library, but it is one of the best. It is further enhanced visually by the excellent jQuery UI.
• CodeIgniter: I have built many web sites with this PHP development platform. It was my first introduction to the MVC (Model, View, Controller) paradigm, where you split out your database work (Models) from your presentation/pages (Views) and your application/business logic (Controllers). CodeIgniter has some flaws, including the suggestion (a view shared by many) that it would benefit from a ground-up rewrite. But it is well-built, fast, solid and will help you to concentrate on the unique features of your web site, without having to reinvent the wheel all the time. Your resulting code will be easier to understand and maintain.

Special mention

There’s a rapidly up-and-coming PHP framework that deserves some attention at this point, Laravel. I have not personally had chance to experiment with it yet, but I intend to use it for my next web application. I understand it addresses many of the shortcomings of other PHP frameworks and apparently CodeIgniter developers are flocking to it in droves.

Graphics

As I’m sure you can tell, graphic design is not my strong suit. I am amongst other things a web developer, not a web designer. It’s rare to find someone who’s good at both. Nevertheless, even if you’re not graphically inclined, there are still a lot of things you can do to give yourself a “leg up”. Here are my top graphics tips:

1. Don’t be afraid to copy. There are very few genuine innovators out there. Most fashion is a rehash of other fashion. It’s fine not to be original. See what works, figure out why it works, and put your own spin on it.
2. Get a good graphics package. Don’t be put off by its name; download GIMP. It’s like Adobe Photoshop at the great price of free. If you’re not short of cash, I can also recommend Adobe Fireworks, which is an excellent but expensive web-focussed design package.
3. Follow the GIMP tutorials. Really. Do it.
4. Use an online colour scheme generator.
5. Soak up some design inspiration from Designpiration or Web Creme.

---

That’s me done. Now go forth and conquer the interwebs.

Photo of bearded gents copyright © Igal Koshevoy, licensed under Creative Commons. Used with permission.