I’ve recently gotten a few questions from friends about how to build a website, so I thought I’d do a post with an overview of the basics behind building websites. I am by no means an expert on this subject myself, but when I first started coding the summer before my freshman year of college, I had no prior programming experience and spent a fair amount of time just hunting around for good guides to learn from before I built up a basic working knowledge of the various components of a website. I hope this overview will provide a foundation from which I can delve more deeply into specific topics in future entries.
1) Client-Server Architecture
When you type in the url of a website and hit enter, you are sending a request from your device (laptop, desktop, mobile, etc.,) through your browser (Firefox, Safari, Chrome, etc.,) to a remote server asking for the server to load the page of the website for you. The web server receives the HTTP request and then processes it as a static file (html) or as a dynamic file (PHP, Python, Ruby, etc.,). If the file is dynamic, it may require interaction with a database. If this is the case, then as the server is running the script on the file, it will query a database (such as MySQL) and return important data back to the server. The server then serves up the page and sends it back to you through your browser. What you then view is the front end of the website. All of this generally happens in under a second. Below is a diagram of the process:
Let’s unpack these interactions a little more.
2) The Front End
The front end of a website refers to what you see when you view a page. You may see text, figures, color, layout, etc., The front end of a site is generally divided into two categories: content and design. The content refers to the actual words, images and other features on the page. Content is coded using the hyper-text markup language or HTML for short. The design, layout (color, alignment, text size, etc.,) is all coded using cascading style sheets or CSS for short. CSS and HTML work together to make the front end of the site visually appealing. Front end designers often add in things like javascript, flash and AJAX to make the site more visually appealing, but the fundamentals behind the front end are HTML and CSS.
3) Going Dynamic -> Programming Languages
If you want to create something that goes beyond a static page and actually allows user to interact with the site and with each other, you will probably need to use a programming language to create functions and to filter and place content provided by users into data stored in a database. This will require a programming language such as PHP, Python, ASP.NET, Ruby, Perl, etc., If you are just starting out, I highly recommend the PHP framework as the support, documentation and resources out there on PHP are incredible. There’s a reason why many of the heavy hitters out there like facebook, wikipedia and wordpress use PHP. It is an incredibly robust language and easy to scale if you plan well.
4) Building in a Back End
Most major websites and startups these days work with data provided to them by users. For example right at sign up, facebook collects data in the form of: first name, last name, email, password, gender and birthday (and that’s just barely the tip of the iceberg in terms of data they collect and store on users). In order to store and retrieve data, you need a database to house all that data. There are a number of databases that are known to do this well, but MySQL is a database that has long been at the forefront of data storage. In order to place, retrieve and manipulate data, you will need to know the Structured Query Language or SQL.
If you’re new to the coding scene, this may seem like quite a bit to digest at first glance, but luckily the Internet has a tremendous amount of resources on each of these topics. I’d highly recommend Codeacademy – it’s a great way to visually learn how to write code. I also recommend the W3C markup validator to make sure your code is bug free. Finally be sure to test your code across browsers (Firefox, IE7, Safari, Chrome, etc.,) as minor differences is display across browsers can occasionally be a nuisance for users. Good luck and happy hacking.
Allen Miller 