HTML & CSS Basics: An Introduction

What is this series?

This series of tutorials aims to teach basic HTML and CSS—the building blocks of the internet. No prior experience in code is necessary, we’re starting at the absolute beginning, and by the time this series is done, you’ll know everything you need to code your own basic site and put it online for the world to see.

Note that I revise these tutorials from time to time as the internet evolves and “best-practices” change. Fall 2013 represents a complete re-write of these tutorials to better reflect HTML5 and CSS3. The underlying concepts stay the same, but some of the syntax and explanations may change slightly.

Who is this for?

Anyone is welcome to follow along with this, and anyone might benefit from it, regardless of your background, age, profession, major in school, etc. The web was built around being open and accessible, and the underlying code is too.

That said, I happen to teach interactive design and web development in the Art+Design department at Northeastern University, so my tutorials here (and classes there) are geared towards design students. You don’t have to know anything about design to follow these, in fact, many of my freshmen don’t (sorry guys, just being honest). I mention this because these tutorials aren’t meant for students with a background in code, or really even an interest in it. “Front-end” code, or web “markup” (HTML and CSS) isn’t really the purview of computer science schools. This stuff is relatively easy, and anyone can learn it.

I tell my students—many designers and artists who never thought they’d have to learn a line of code in college—that this stuff is really just another tool in your box, like a paint brush, camera, pencil, or PhotoShop. These days, the biggest outlet for content and design is the internet, and anyone can learn how to make it.

How does this series work?

Starting here, every post in the series follows sequentially. You’ll see code in the posts show up like this example below:

<p>This is an example of some really basic code</p>

Anything in those code sections you can copy and paste into your own code using a special program called a code (or text) editor, explained below. If you follow all of the tutorials in sequence, by the time you reach the end of the series, I will have given you all of the code snippets you’ll need to build your own portfolio website.

Along the way hopefully you’ll learn how and why this code works while actually making a website you can use for yourself. Sound good? Great. You just need a few things to get started…

What you need to make a website

You don’t need fancy, expensive software to make websites. In fact, you can find everything you’ll need for free online. To follow these tutorials and get your website online, you’ll need just three things:

1. A browser!

This is easy—you’re looking at your browser now. You may be using something like Chrome, Firefox, Safari or Internet Explorer. They’re all fine to review your code in, but as you delve deeper into this, you’ll learn that not all browsers are created equally. I highly recommend having both Google Chrome and Mozilla Firefox installed on your computer, because they come with some extra tools that we’ll be using to troubleshoot our code when get a little further down the road. Plus, it’s a good idea to start testing your code in multiple browsers from the beginning to see how they display things a little differently.

2. A code editor

This is where you’ll actually be writing your code. There are a few free or cheap options out there if you haven’t settled on one yet. Sublime Text (Mac and PC), TextWrangler (Mac), and Notepad++ (PC) are all popular options. For the purpose of this basic series they all do pretty much the same thing and you don’t have to worry about any fancy features.

(Please note that I use Adobe Dreamweaver in my university courses simply because that is the software installed on the classroom computers. Because of this, some screenshots in subsequent tutorials may feature this program. That doesn’t matter—as long as the code is the same, it should work in any editor.)

3. An FTP client

FTP stands for File Transfer Protocol—you’ll use this to transfer the files from your personal computer to your server (hosting account) so that the rest of the world can see your website! I’ll explain all about servers and hosting in another tutorial. For now, just grab an FTP client. I like Cyberduck, for both Mac and PC.

Other Resources

You can always check out the resources page in the navigation bar on the top of this “Learn” section of the website. It has links to different websites, software, tutorials and tools that may be helpful as you delve into the world of web development.

Ready to begin?

Before we write our first code, let’s learn a little bit of a background about how websites and the internet work. Have you ever wondered how you type in a domain name like “www.google.com” and the right web page magically appears? Check out the next post in this series to learn more: How does the internet work? Servers, hosting and domain names explained.