This collection pulls together the info you'll need to get a basic website up and running: getting your machine ready, designing an amazing site, easing into a logical workflow, and of course, all the thrills and spills of learning the best of the basic web—HTML and CSS.
A text editor is a program that allows users to create and edit plain text files. Plain text files don’t have stylistic formatting; you won’t find code written in Comic Sans or Wingdings, which is one of the ways text editors are different from programs like Microsoft Word. We recommend using
An FTP program transfers computer files from one host to another via the Internet, such as CyberDuck, and FileZilla.
Setting up a work environment might seem like a hassle, but trust us—it will save you headaches down the road. Websites are essentially just a collection of files, so being organized will help prevent errors later on.
We're setting up a dedicated spot on your machine for all the files you'll create: your technical docs, as well as images, videos, or other assets you're going to display.
Putting those files in organized folders enables us to give the browser exact directions to the locations of those files. So, no search or spotlight allowed—know where your files are so you can send the browser down the right path. Broken paths, missing files, or imprecise directions are common reasons things break. Ever seen a 404 message? That’s why!
index.html. You must include the file extension! This is our first signal to the browser about what we'll be doing in here.
If you're ever going to move your files around, make sure to close out of your text editor while you do. Poor Sublime will keep editing the old doc, and will keep saving it in the old place. Once again: close Sublime, move files, reopen to edit in Sublime.
Ah, HTML. You've heard so much, and yet, know so little. Let us help.
HTML is the most widely used coding language on the Internet, so you'll need a strong grasp on it before you go any further.
At least when it comes to building websites. We can’t vouch for that thing with your ex. More than likely, the page is not just acting crazy . It’s acting crazy because you told it to act crazy. So here’s a strategy to help you cut down on the amount of time you spend troubleshooting.
Change, save, refresh, check.
If you make a lot of changes and then notice things are broken, it’s tough to tell what exactly broke, and when. So work in very small bursts . Check the results frequently. Then, when something breaks, you know where things went wrong—it’s what you just did.
Just like we did with HTML, we've got to get our files hooked up and running before we can start to style our pages in earnest. That's right—we're about to finally take the semantically beautiful but ultimately ugly HTML we've written and apply some style to it. First, though, the prep:
We're creating a
CSS is a critical piece of any site—it's the beautiful part. Without this link, our browser would never know that these styles are associated with this site (aka this HTML file). Once we're done, when the browser reads our HTML file, it will see this link, fetch our styles, and apply them to the site. Good browser. Here's a treat.
style.css. Don't forget the extension!
<head>of your HTML document.
It's the moment we've all been waiting for. Time to dress up your HTML and make something people actually want to look at. The enabler here is
Wondering why your site’s looking so ugly? HTML just says what’s what and gives the page structure. CSS is where the real fun starts–it will fix things faster than Fix-it Felix.
Thus far, we've just been building the site on your machine—which nobody can access, with good reason. (Hello, embarrasing search history from that time you got obsessed with you know what.) So to get your site out to the rest of the world, you've got to get a copy of your files onto a server that others can access. This means securing a domain name (your URL) and hosting your files somewhere.
When your site is ready, you’ll upload your files to your hosting server using a File Transfer Protocol (FTP) client. (We like Cyberduck and FileZilla.) Make sure that your files appear on your server the same way that they do in the site folder on your computer, or else your site may not work properly.
A server is a special computer dedicated to holding and serving up web files. Every time you type a URL into your browser, it makes a request—several, actually—for your website's files. The server then sends them along and your browser (aka the client) assembles everything into the visual experience you know the web to be.
Now that your website is live, check it out! Click on all of the links to make sure they’re directing to the right places and that all the images are showing. If you have to fix something, change it on your computer, save, then re-upload the edited file onto your hosting server. Did we say good job yet? No? Good job!