Taking Blog Down for Rewrite

Between the fact that it’s taking forever to fit in that last article for the series, and that I’ve realized I’ve been going at these articles a bit wrong, I’m going to take down the site for a little while. I’m going to rewrite the articles from scratch, and maybe tweak the design a bit, but it’s mostly the content I’m not happy with. So the articles you see here will be gone soon, and slowly replaced by hopefully better written and organized ones.

How to Build a Website Part 5: Basic CMS

Last week, I went over how to use PHP includes to better manage the various parts of a web site. Needless to say, this is just the fly on the tip of the iceberg as far as what PHP can do. A good way to learn more about working with PHP is by also learning MySQL. We’ll be using the two together to create a very basic but enlightening content management system.

Just a warning: even though this about building a very basic CMS, it’s still a rather lengthy article (10 pages!). Thankfully, much of it is just large blocks of code for you to copy & paste, so just bear with me.

Keep reading >

How to Build a Website Part 4: PHP

Sorry about the delay in writing this article, a mix of other projects and simple procrastination got the best of me.

Now that that’s out of the way, we can finally move onto the next half of the tutorial series. In the first 3 parts, we built the actual site using HTML for content, CSS for design, and JavaScript for functionality. I find that all good sites should follow this approach; keeping each aspect of the site separate, as it makes for better maintenance. But there’s a lot more we can do, and that’s what parts 4 and 5 will cover. Oh, and we’ll finally make that contact form functional with an email PHP script. Keep reading >

How to Build a Website Part 3: JavaScript

To recap, we finally finished the CSS on our site, which included the the sprite menu and print stylesheet. Now that we’ve taken care of the looks, we can start adding some extra functionality to the site. The best – come to think of it, only – way to do this is with JavaScript. In this tutorial, I’ll introduce you to the gist of JavaScript, add lightbox to the gallery page, and write a form validator for the contact page in jQuery.

Keep reading >

How to Build a Website Part 2.3: CSS, Sprite Menu

One problem you’ve no doubt seen with our site so far is the navigation menu. It’s incredibly dull, cheap, and doesn’t match our photoshop version, which has nice, big, stylized text for the links. In this final chapter of the CSS stage, we’re going to create and implement a sprite menu; a single image used for multiple elements.

Keep reading >

How to Build a Website Part 2.2: CSS, Resume & Print

Continuing our previous article, we’re going to create a few more style sheets. In this tutorial, I’ll show you how to code a print style sheet, and let’s not forget the styling for our resume. Thankfully, this one won’t be as long, since most of it will be dedicated to laying out the resume.

Keep reading >

How to Build a Website Part 2.1: CSS, Main Layout

In our previous tutorial, I showed you the gist of coding a website, and coded a pure HTML version of the portfolio site. It’s got all the information we need, but it honestly looks like crap. Well, that’s what all websites look like under the hood, just look at this site without any dressing. In this tutorial, I’ll show you how to code CSS for laying out the web page; creating style sheets for both the screen and the printer.

Keep reading >

How to Build a Website Part 1: HTML

Coding a website often isn’t all that difficult, it just tends to be tedious and time consuming. It can often be a lot easier when you have a well thought out layout in mind; you’ll spend less time experimenting and more time implementing. In this segment, I’ll be showing you how to code the HTML backbone of the site.

Keep reading >

How to Build a Website Part 0: Planning

Before we can ever begin coding a website, we need to work out an idea of what on earth we’re going to code. You need to figure out why you even want a website; what would it be for, who will visit it, and what will be in it. Sometimes this is the hardest part, because the answers affect how you write and design the website. This article will cover some key things to think about when planning and designing your site. I’ll also be providing a photoshop layout for download to give you an idea of what the photoshop draft of a page can look like.

Keep reading >

How to Build a Website (Intro)

There are plenty of tutorials out there that tell you how to build a website, some actually pretty damn good.

So, what’s gonna be so special about mine? Well, it’s nothing groundbreaking, but…

  • I’ll be covering an insightful portion of the concept/design process and virtually the entire coding process of a website.
  • I’ll be explaining a lot of how and why something works or needs to be done, not just giving you instructions.
  • The structure will allow you to skip a part you already know or don’t care to understand (though I’m hoping it’ll be the former).
  • Finally, the site is designed so the articles are a little more interactive, with navigation, collapsible sections for techno-babble, and some other nice features.

Keep reading >