How To Make A Website Part III: Site From Start To Finish

Now that you’ve got the basics of HTML and CSS down, we’re going to take a look at how to actually use that knowledge to make a real website. Today, we’ll take you through the process of creating a site from start to finish.

This lesson presumes you know how to put together a site layout in Photoshop (or some other application). If you don’t, fortunately we’ve covered that already so you can catch up.

Creating a website isn’t just about coding. You (or someone else) needs to have some basic design skills. You need to know how to prepare graphics for the web. You also need to know a few basic things about web servers to deploy your finished site. We’ve broken it all up into the four big tasks and take you through the entire process.

By the way, if you want to play around with the source code for our demo website, you can download it here.

Design

We’re not going to get into how to design a website, technically or artistically. (We’ve sort of done that already.) You should have your site design figured out already, but there are a few things we do need to talk about before you start figuring out how to translate it into code.

First, the most important thing to know is that your font choices are sort of restricted online. While you can use the @font-face rule in CSS to externally load fonts, this isn’t supported by older browsers. You also may need rights to use certain typefaces with this tag. That said, you can use @font-face to solve the problem of limited font choices on the web, but if you’re not ready to jump into that world quite yet you should either use a web fonts service like WebType (which can be free depending on your use) or limit yourself to web-safe fonts. Which fonts are web-safe? Times New Roman and Arial are the most common options, but most operating systems come with several other built-in fonts that are considered web-safe. These include fonts like Tahoma, Verdana, Lucida Grande, Gill Sans, Trebuchet MS, Courier New and Georgia. Do a search for web-safe fonts if you’re looking for additional options.

Second, you need to consider what is going to be an image and what isn’t. Nowadays you don’t really need to use images for much more than complex graphics and photos as HTML and CSS can handle many of the complex things that we used to do with images. Menus, for example, can be created very easily in CSS with an unordered list. Generally you do not need text to be rendered as an image, but there may be some circumstances where you will need to do that (e.g. if the text is combined with a graphic).

Finally, you need to consider which images are going to be displayed as actual images or as backgrounds for one of your DIVs. How do you determine this? If you have text that’s going to go on top of an image (e.g. with a menu), then you have your answer: your image will be a background. The reason this is important to know is because you need to export it unadorned with any text, images or anything you’re going to add later in the code. Once you’ve got that figured out, head on to the next step (“Preparation”) where we discuss preparing your layout for coding and exporting any necessary images.

Preparation

First, you want to measure your design. This is something you generally want to do before you begin your layout, but you need those specific measurements to start coding so you definitely need to know them now. You don’t need to know every little measurement, but you need to know the measurements of your main layout structure. For example, if you have a left side of the page and a right side of the page, you should know the width (and height, if it doesn’t vary) of each. You should also know the width of the spacing between them and the total width of everything combined. If your design is very much based on a grid and lines up with everything nicely, chances are your site’s header will be this width as well. Basically, you need to know the dimensions of every major element on the site. You’ll need to know the minor ones, too, but that’s not really information you need to get started.

Once you’ve got your measurements we can start exporting images. In many cases you will not need to export very many images because you can recreate most of your design with HTML and CSS (and JavaScript, if you want to go there). For the few images you do need to export, however, you’re going to need to choose between JPEG and PNG. When your images are complex — like photos, or illustrations with many colours and a wide tonal range — you’re generally going to be better off with JPEG from a file size standpoint. If you have simple images, or require that your images have a transparent background, you’re going to need to save them as 24-bit PNG files.

If you’re saving a 24-bit PNG from Photoshop, you’ll need to hide the background layer before choosing “Save for Web” from the File menu so Photoshop knows to ignore it.

When you save your images you’re going to need somewhere to put them. For this reason, and because you’re going to have a bunch of other files once you start developing, you should start organising your site now. If you were making a more complex site, I’d recommend structuring everything using the Model View Controller (MVC) architecture, but since we’re just dealing with a simple site I’d recommend creating the following directories in your site’s root directory:

• css
• images
• scripts

If it isn’t obvious, you’ll save your images in to the images directory and your CSS stylesheets in the css directory. The scripts directory is where you can store JavaScript files and other scripts you may end up using when developing your site.

In the root directory, you’ll also want to make an index.html file in preparation for development. What is index.html? Let’s say you only had one HTML file and it was called mydoc.html. If you uploaded that to your web server, which was hosting your site mywebsite.com, anytime someone visited mywebsite.com they would either get a directory listing of the files you’ve uploaded or possibly nothing at all. Using index.html as a file name tells the web server that it should display that file if someone goes to that specific directory. If you put an index.html file in your images directory, anytime somebody visited http://mywebsite.com/images they’d see a rendering of the HTML contained in that index.html. Basically, an index.html file is the default HTML to display so you’re always going to need one.

Development

Now you develop your site using the skills you learned in the past two lessons and the additional HTML and CSS skills you’ll acquire as you continue to learn web development. Since we’ve pretty much covered the basics of HTML and CSS, there isn’t much else to say here. Rather than rehash the first two lessons, we’re going to go over a couple of extra things you should know before you start developing your site for real and also provide you with the source code for the demo site we created for this lesson.

DocType
When creating your HTML document in lesson one, we focused on the basics of HTML structure but not some of the best practices. One thing you want to want to add to the very top of your HTML document is its DocType. You can learn a lot more about DocType on Wikipedia, but it basically is a document type declaration that says “these are the rules I’m following in my HTML document”. This is important if you need to validate your code (to see if you made any mistakes), as the rules are a bit different for each DocType, but it also tells the browser what elements and structure to look for when rendering your HTML page. If you don’t adhere to the DocType, it can cause problems, so this is something you’ll want to explore further. For now, here’s a quick look at what a DocType declaration looks like:

Check Out the Source Code
As you can see in the video, we used a lot of fun CSS techniques like drop shadows and rounder corners. If you want to explore these techniques further, download the demo site’s source code and look around in the CSS. Once you have a grasp on the basics of HTML and CSS, the best way to learn new things is to look at the source code of other web sites. While you can’t look at server-side code that was created in a server-side programming language like PHP, you can view HTML source code simply by browsing to a web page and choosing “View Source” from your browser’s “View” menu (unless it’s in another menu, but it’s generally in “View”). Big sites that have lots of content, such as Lifehacker, are not necessarily good models to look at. Much of the HTML code you see here is generated by server-side PHP code. Generally you’ll learn more by looking at smaller sites, as the code is often static and/or the site is small enough that the amount of source code isn’t horribly overwhelming.

Once you’re done developing your site, it’s time to deploy it.

Deployment

Once your website is finished, you need to deploy it. This often doesn’t involve much more than uploading it to your web server. You’ll generally accomplish this with FTP or SFTP, so you’re going to need an application to do that. We’re using Transmit in the video, but Cyberduck is a free file transfer app that runs on both Mac and Windows. All you need to do is use your file transfer application of choice to connect to your web server via FTP. From there, you just copy the files over to the web server and they should be immediately viewable on your web site.

Of course you’re going to need a web host to do this, but we’ll help you with that tomorrow. Stay tuned!