Buzz
Now that you're comfortable with HTML and CSS, it's time to put that knowledge into action. In this guide, we'll walk you through the steps to build a website from beginning to end.
This tutorial assumes you're already familiar with creating a site layout in Photoshop (or another similar tool). If you're not, don't worry—we've covered that aspect already, so feel free to catch up.
Building a website goes beyond coding. You'll need some basic design skills, know how to prepare graphics for web use, and understand a bit about web servers to deploy your site. We've broken everything down into four key tasks to guide you through the whole process.
By the way, if you'd like to experiment with the source code of our demo website, you can download it here.
Designing Your Website
We're not diving deep into the technical or artistic aspects of website design here. (We've already covered that in previous lessons.) By now, your site design should be mostly settled. However, there are still a few key points we need to address before you start turning your design into code.
First, it's crucial to understand that your font options are somewhat limited on the web. Although you can use the @font-face rule in CSS to load external fonts, older browsers may not support it. You may also need permission to use specific typefaces with this method. That said, @font-face can certainly help you bypass the issue of limited web fonts. If you're not ready to dive into that just yet, you can either use a web font service like WebType (which may be free depending on your usage) or stick to web-safe fonts. Common web-safe fonts include Times New Roman, Arial, Tahoma, Verdana, Lucida Grande, Gill Sans, Trebuchet MS, Courier New, and Georgia. If you want more options, simply search for web-safe fonts.
Next, you need to decide which elements will be images and which won’t. Today, HTML and CSS can handle many tasks that used to require images, so you only really need images for complex graphics and photos. For example, menus can be easily created with an unordered list in CSS. Generally, you don't need to turn text into an image, but there are times when this might be necessary—such as when the text is part of a graphic.
Finally, you'll need to determine which images will be used as actual images and which will serve as backgrounds for a DIV. How do you figure that out? If you plan to place text on top of an image (e.g., for a menu), then your image will need to be a background. This distinction is important because it means the image must be exported without any text, graphics, or other elements you intend to add later in your code. Once you've sorted that out, move on to the next section ('Preparation') where we cover how to prepare your layout for coding and export any necessary images.
Getting Ready to Code
The first step is to measure your design. This is something you should ideally do before starting your layout, but it’s essential to know these measurements now so you can begin coding. You don’t need every tiny detail, but you must be clear about the dimensions of your main layout sections. For example, if your page has a left and right section, know the width (and height, if applicable) of each. You should also be aware of the space between them and the overall combined width. If your design follows a grid structure, the header width will likely match that of the main layout. In short, you need to know the dimensions of all the key elements, even if you don't need to measure the smaller ones just yet.
Once you have your measurements in place, it's time to start exporting your images. In most cases, you won’t need to export many images because you can recreate most elements with HTML, CSS, and JavaScript (if you want to take it further). For the few images you do need, you'll have to decide between JPEG and PNG formats. JPEG is usually best for complex images like photographs or illustrations with a wide color range and many details, as it typically results in smaller file sizes. For simpler images or those requiring transparency, you'll want to use 24-bit PNG files.
When saving a 24-bit PNG in Photoshop, remember to hide the background layer before selecting 'Save for Web' in the File menu. This ensures that Photoshop doesn’t include the background when exporting the image.
When saving your images, think about where you're going to store them. Since you'll also be creating other files during development, it's important to start organizing your site now. For a more complex project, I’d recommend using the Model View Controller (MVC) architecture. However, for a simpler site like this, I suggest creating the following folders within your site's root directory:
CSS
Images
Scripts
To clarify, the 'images' directory is where your image files should be stored, and your '' folder will contain all your CSS files. For your JavaScript files or any other scripts you may require for your website, place them inside the 'scripts' directory.
Within your root directory, you will also need to create an 'index.html' file as part of your development setup. So, what is 'index.html'? If, for instance, you only had one HTML file named 'mydoc.html' and uploaded it to your server, visitors to your site at 'mywebsite.com' would either see a file listing or nothing at all. By naming it 'index.html', you tell the web server that this is the page to show when users access that directory. Placing an 'index.html' file in the 'images' folder would display that file when someone visits 'http://mywebsite.com/images'. In essence, the 'index.html' serves as the default page for any directory you want to highlight.
Development
At this stage, you're ready to start building your website using the HTML and CSS techniques you've learned so far, along with the additional skills you'll gain in future lessons. While we've covered the basics of HTML and CSS, there's not much more to add here. Instead of revisiting the earlier lessons, we'll dive into a few more essential things you should know before getting into full-scale web development. We'll also share the source code for the demo website we built for this lesson.
DocType
In lesson one, when we were setting up your HTML document, we covered the fundamentals of its structure, but we didn’t go into some of the best practices. One essential element to include right at the top of your HTML is the DocType. You can dive deeper into the concept of DocType on Wikipedia, but essentially, it is a declaration that defines 'these are the rules I'm using for this HTML document.' This is crucial for validating your code (to check for errors), as different DocTypes have different validation rules. Additionally, it helps the browser understand which HTML elements and structure to expect when rendering your page. Ignoring the DocType can lead to issues, so it's worth investigating further. For now, here’s a brief example of what a DocType declaration looks like:
Check Out the Source Code
In the video, you saw us apply various interesting CSS effects such as drop shadows and rounded corners. If you'd like to learn more about these techniques, you can download the source code of the demo site and explore the CSS yourself. Once you're comfortable with the basics of HTML and CSS, examining the source code of other websites is one of the best ways to advance your skills. While you can't view server-side code created using languages like PHP, you can easily check out the HTML source code by visiting any web page and selecting 'View Source' from the browser’s 'View' menu (or sometimes another menu, but it’s usually under 'View'). Large websites like Mytour aren't always the best examples to study, as much of the HTML is dynamically generated by server-side code. Instead, smaller websites often provide a clearer picture because their code tends to be static and more manageable.
Once you're finished developing your website, the next step is to deploy it.
Deployment
After you've completed your website, it’s time to deploy it. This usually just means uploading your site to your web server. You can do this easily using FTP or SFTP, so you'll need an app that supports this. In the video, we're using Transmit, but Cyberduck is a great free option that works on both Mac and Windows. Simply connect to your web server using your chosen file transfer application via FTP, then transfer your files over. Once this is done, your website should be live and accessible immediately.
Of course, you'll need a web hosting provider to make this happen, but don’t worry, we’ll guide you through that tomorrow night. Stay tuned!
