Skip to content

Instantly share code, notes, and snippets.

@laurihy
Last active December 14, 2015 23:29
  • Star 2 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save laurihy/563ca0d263f56ee199b7 to your computer and use it in GitHub Desktop.

Building websites with HTML+CSS

What

In this tutorial, we'll start from the scratch with building websites with HTML and CSS, the bricks and paint of the web. All websites use HTML to define it's content and then CSS to make it look pretty. It will be very hands on, and after this short introduction, we'll start actually building a website for you, as it definitely is the best way to learn. At the end, we'll also cover some other practical things, such as setting up Google Analytics and purchasing a domain name.

Why

Even if you're not a developer, knowing HTML and CSS will help you tremendeously and in a very concrete way. For example, as a business person you might end up writing stuff for an email newsletter or to some Content Management System, where with just some basic HTML you can make the content look just the way you want without always asking the developers. As a (web) designer, you'll have more control over your designs.

Good references / other tutorials

There's a whole bunch of other good HTML and CSS tutorials and guides out there. When in doubt, be sure to refer to those as well.

Setup

To kickstart your first(?) web page, setup a template on Backlift:

Get Started

This will create a folder to your Dropbox (something like /Apps/Backlift/myapp/) with a barebones website, an index.html-file. The site is also already live, just click "view app" on Backlift-site to see it yourself.

What does site being "live" mean? The website can either be just on your own computer, meaning that you can open and view the pages, but they'll be accessible only for you. Live site means, that it has a valid web address (an URL) and that anyone can access it.

What is Backlift, are there alternatives? Backlift makes it easy to push our website live directly from your Dropbox. Normally you would have to buy separate web hosting and then have some way to transfer the files there. With Backlift, you can focus on writing HTML, while always having the site live. Some good alternative places to host your site are Github, Heroku, Webfaction and Amazon. However, for a static site like ours, Backlift is probably the easiest to get started with.

Alright, let's see what websites are made of!

Hello HTML

Open the index.html-file on your Dropbox with some text editor (notepad, Sublime Text 2, others) and you'll see something like this:

<!doctype html>
<html>
	<head>
		<title>
			My Website
		</title>
	</head>
	<body>
		Hey there!	
	</body>
</html>

Now, that text is called HTML. Edit the text Hey there! into Hello world!, save the file and reload the website you opened from Backlift ("view app"). In a few seconds, the site should get updated and you've just made your first website, that greets the world. How awesome is that!

What kind of text editor should I use? It doesn't really matter, as long as you can save files as plain text. Some editors, for example...

What's with all the <'s and >'s?

HTML consists of tags, which are specific names written inside < and > characters, like <tag>. Most of the tags have a matching closing tag, which has the same name and is otherwise similiar to the opening tag, except that it has / after the first <, like </tag>. In the HTML above, for example <html> is one tag and it's closing tag is </html>. Together, opening and closing tags create an element, which contains everything written between them. <title>My Website</title> is one element. The text inside an element is it's content, so for example "My Website" is title's content.

Tags tell the web browser what the website should be like. Altogether there are some 200 tags, but usually you'll end up using a few dozen. Here's one good reference, although you should worry too much about these: http://www.htmldog.com/reference/htmltags/

As you can see, we can write tags and elements inside other elements. For example, we have:

<head>
	<title>
		My website
	</title>
</head>

We say "title is inside head" and that "head contains title". This is important, as that's how we define the structure of our page, what belongs to where etc.

Sometimes, when you have many many nested elements, it's difficult to see or count which closing tag belongs to which opening one. That's why it's good idea to intend, ie. put extra spaces to the beginning of each line, to make the hierarchy more visual.

ABC of HTML

Now as we know what tags are, let's go through the ones in our example and then move on to add some content of our own there.

In the very first line, there's a tag <!doctype html>, which just tells the browser what language ("doctype") we're using. Every HTML-document should include this. It's also special kind of tag in a sense, that it doesn't have a closing counterpart. As we'll see in a moment, there are some others like this, too.

In the second line, we have <html>, which starts our webpage. All other elements are inside html and that we end our website with a closing </html>.

Inside <html>, there are two elements: <head>and <body>. Inside <head></head>, we'll have all kinds of information about the site, that the browser doesn't show to the user. Later on, we'll introduce more of them, but for now there's <title>. Content of the title will be used by for example search engines like Google and in the tab of the browser.

On the other hand, <body></body> contains everything visible on the browser. Currently there's not much to see, but let's change that by adding some text!

Structuring text with HTML

Let's introduce first set of new tags, namely <h1>, <p> and <ul>. Edit the index.html to be following, save the file and refresh the browser to see changes.

index.html:

<!doctype html>
<html>
	<head>
		<title>
			My Website
		</title>
	</head>
	<body>
		<h1>Hello world!</h1>
		<p>This is a block (paragraph) of text. It's inside a p-tag.</p>
		<p>This is another block of text. Usually these have something beginning with Lorem ipsum.</p>
		<ul>
			<li>This is a list item</li>
			<li>This is another list item</li>
		</ul>
	</body>
</html>

Plenty of new stuff in here. Let's go through each new tag one by one.

<h1> and </h1> add a new heading to our page, which in essence is just a text with bigger font. Soon, we'll learn how to adjust font size of any text, but you should still use <h1> for titles. Also, if you have sub heading, you could use <h2>, which is a bit smaller than <h1> but bigger than regular text. Actually, you can use any number between 1 and 6, so <h1>, <h2> and so on until <h6> are all valid. Why not try it out and add some sub headings to the text?

<p> adds a paragraph of text to our website. Paragraphs are blocks of text, that have some space between them. Later on, we'll learn to modify that and other aspects ourself.

Lastly, <ul> means a bullet point list (unordered list), where every <li> is an item inside that list. Similarly, you could change <ul> to <ol> (and a closing tag). <ol> is an ordered list, which has numbers instead of bullet points prepended to every item in that list.

Links are what makes HTML special

Originally, what made HTML special was ability to add links to other documents. Actually, HTML stands for HyperText Markup Language and hypertext just refers to the links. So, let's add a link or two to our HTML document.

Add this piece of HTML after </ul> in the index.html:

<p>This paragraph <a href="http://www.example.com">has a link</a></p>

Inside the paragraph, we have added an <a>-tag. Few new things here. First of all, the link (<a>-tag, stands for anchor) affects to it's content, which is part of the text inside paragraph.

Secondly, the link has an attribute href. Generally, attributes modify the way that particular tag works, but aren't visible for the visitor of the website. Attributes are appended to the opening tag, and there can be multiple different attributes for each tag, like this <tag attribute1="value1" attribute2="value2">Some content</tag>. In the closing tag, you don't have to add attributes, but the tag's name is enough.

Attribute href defines where the link should take the user and stands for hyperreference. Note, that the link's address should include http:// in front of it, or otherwise it doesn't work. Try to add some other links to the page?

Adding more pages to your website

Having only one page on your website can be quite boring and limiting, so lets use links to add another page. First, copy index.html and rename the copy to about.html. So your folder should look like this:

folder/
|- index.html
|- about.html

Modify the content of about.html to be like this:

<!doctype html>
<html>
	<head>
		<title>About me</title>
	</head>
	<body>
		<h1>About me</h1>
		<p>Nothing here yet</p>
	</body>
</html>

View the page by going to https://yourappname-id.backliftapp.com/about.html (change yourappname and id to the ones you have in the address for the main page). The page is there!

After that, we can connect that page to our main page by modifying the link in index.html:

	<p>This paragraph <a href="about.html">has a link to another page</a></p>

Notice how we left out everything except the filename of the page we want to link to. This is because the address is relative to the file we link from. As about.html is right next to index.html, all we have to link to is the file name. On the other hand, if the folder structure would look like this:

folder/
|- index.html
|- pages/
	| - about.html

The link would be <a href="pages/about.html">link text</a>.

Excercise: Try to add link from about.html back to index.html?

Other cool tags

Here are some other tags you might want to include

Images can be added by using <img />-tag like this: <img src="myimage.png" />. src-attribute should point to the image in question. Also you should note, that in web images should be either .png, .jpg or .gif. <img> tag is a weirdo in a sense, that it does not need a closing tag, but it's self-closing. Self-closing tags have the / right before the opening tags last >, is the <img />-tag in these examples.

italicization can be done by using <em>-tag, like <em>this is italicized</em>. "Em" stands for emphasis.

bold text on the other hand is defined like this <strong>This is bold</strong>

span is used to change the looks of individual words inside a block of text, like paragraph or a title. We'll learn how to do it in a minute, but now you can just try doing <p>This is not <span>different</span></p> and notice, that it doesn't really do anything fun.

Make things look (much) nicer

This far we've relied on the browser to provide the fonts, color and other styles for our texts and let's be honest, they're not too pretty. By using style attribute we can have much more control over the looks of our site.

Add this to index.html:

`<p style="color: red">This text is red</p>`

Refresh the page and see what happens!

With styles, we always have a property and a value. In this case, color is the property, which has a value red. There's always a colon between a property and a value. Here are some properties:

Font type. font-family defines the font type of the content of that tag. Generally, you can use only websafe fonts, so good values for font-family are for example Helvetica, Verdana, Garamond, Arial and Comic Sans MS. For font-family, we can actually define multiple values, separated by commas. Like this: <p style="font-family: Helvetica, Arial">Some text</p>. If the first one doesn't work, the browser will try the second one and so on. As last resort, you can use serif and sans-serif.

Font size. font-size defines size of the font, like this: <h1 style="font-size: 30px">Title</h1>. With font-size, you can choose from different units for the value, basically it can be either em or px. Read more about units below.

Color. color sets the color of the text, like <p style="color: blue">Blue text</p>. You can define colors either with their english names, or by using an RGB (Red, Green, Blue) value like #0000FF. Read more about colors below.

Units of size

There can be many units used in CSS, such as pixels (written as px), ems and percentages (written as %). Pixels are (nearly) always standard size, whereas em and percentages are relative to some other values. Usually especially for fonts it's good idea to use em, which is relative to the default font size. font-size: 2em means that that particular font is twice as big, whereas 0.5em means it's half of the default size. Usually default size for fonts is around 16px.

Understanding colors

As said, colors can be expressed either with their english names or by '#' and then explicitly providing values for Red, Green and Blue. Those values are all between 0 and 255, and if all are 0's, then the color is black, while if all are 255, then the color is white. In the example above (and in CSS), we write numbers using letters, like #0000ff. This weird way of expressing numbers is called hexadecimal, which means that in addition to regular digits that go from 0 to 9, we'll use also alphabets from a to f. Read more about hexadecimals from here: http://en.wikipedia.org/wiki/Web_colors

Multiple styles

It would be quite limiting if we could have only one style property for each tag. Luckily, that's not the case. You can add multiple properties inside one style-attribute by using semicolon between them, like this: <h2 style="font-size: 1.5em; color: grey">Grey text</h2>. More generally, style="property1: value1; property2: value2;"

Separate styling from content

Lets take the styling a little bit further and introduce a CSS-file (Cascading Stylesheet). In practice, we want to all style-attributes away from HTML and put those into a separate file. This way we end up repeating ourselves less (imagine multiple paragraphs, which should all be red) and it becomes easier to change styles as needed.

Create a styles.css-file inside css-folder, so the file structure looks like this:

folder/
|- index.html
|- about.html
|- css/
	|- styles.css

And modify index.html's <head> like this:

<head>
	<title>My website</title>
	<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>

Remember, that head includes all kinds of meta information about the site. Here, we add a link to our separate styles.css-file, so that all styles we define in it will be included in the HTML-file. rel and type attributes tell the browser what kind of link this is, and href points to the file.

For us to be able to see the effect of the CSS, remove also all style-attributes from index.html. Current index.html should look like this.

index.html:

<!doctype html>
<html>
	<head>
		<title>My website</title>
		<link rel="stylesheet" type="text/css" href="css/styles.css" />
	</head>
	<body>
		<h1>Title</h1>
		<p>Paragraph, paragraph.</p>
		<p>Another paragraph, another paragraph.</p>
	</body>
</html>

Add this to styles.css:

h1 {
	font-size: 5em;
	color: blue;
	font-family: Arial;
}


p {
	font-family: Arial;
	color: red;
} 

In addition to properties and values, we have also selectors (h1 and p), which bind the styles to elements in our HTML. Generally, after a selector there comes a pair of curly braces ("{}"), and between those comes any number of property: value -pairs. Each property: value -pair ends with a semicolon (";").

For example a selector p, binds those styles to all <p>-tags in our HTML-file.

More generalized:

selector {
	property1: value1;
	property2: value2;
}  

What does Cascading mean? Usually CSS-styles we apply to an element, is also applied to other elements inside it. For example, if there's a paragraph (<p>) with font-size 1.5em and a link (<a>) inside, the link will inherit font-size from its parent. However, we can override the font-size of the link by specifying font-size for selector a:

p {
	font-size: 1.5em;
}

a {
	font-size: 0.9em;
}

More specific: classes and ID's

This far, our selectors have targeted to all tags with a specific name, such as <p>. In reality though, we'll want to have some of our paragraphs look different than the others. We do this by introducing new attribute in HTML and extending our selectors in CSS.

Body of index.html:

<body>
	<h1>My website</h1>
	<p class="introtext">This is a paragraph, but a bit bigger font</p>
	<p>This is just a regular paragraph</p>
</body>

Here, the second paragraph has an attribute class with value introtext.

styles.css:

p {
	color: grey;
}

p.introtext {
	font-size: 1.3em;
}

In styles.css, we first target all paragraphs with selector p and then specifically those paragraphs with a class introtext. We can target elements with specific class-attribute by putting a dot (.) after a tag name followed by the class name. Note, that the class name can be anything you wish, and there's no specific rules for those. Still, it usually makes sense to keep the names as descriptive as possible, so that after a while you still remember what each of them means. introtextand sidetext are much better than just asd and cvxb.

Another way of targeting specific elements is to use id-attribute, like this: <h1 id="maintitle">. Then, in CSS you have to replace the dot with an '#', like h1#maintitle.

What's the difference between class and ID? A good question. The biggest difference is, that in an HTML-document all id's should be unique, whereas you can use the same class for multiple elements.

Not ok:

<h2 id="title">Title1</h2>
<p>Paragraph</p>
<h2 id="title">Title2</h2>

OK:

<h2 class="title">Title1</h2>
<p>Paragraph</p>
<h2 class="title">Title2</h2>

More neat CSS-tricks

We aren't going to cover all of the things you can do with CSS, because that's a lot. This far we've went through formatting text (which already takes you far), and in the next section we'll focus on how to add for example sidebars to a website. In the meanwhile, here are some cool CSS-selectors and properties for you to try out.

:hover. Add :hover after any selector, like a:hover or h1.title:hover to apply styles to an element only when user has a mouse on it.

background. background-property adds a background to an element. Try out for example:

body {
	background: grey;
}

If you want to have a background image, do background: url('path/to/image.png'). Remember, that images should be either .png, .jpg or .gif.

margin. margin adds space to sides outside of paragraphs and titles. For example:

p {
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}

You can also shorten that a little bit. margin: 10px would apply 10px space to all sides. Writing margin: 10px 10px 10px 10px is also equivalent. The four values in one line are top, right, bottom and left.

border. border property adds border around elements, like border: 2px solid red. The first value is the thickness of border, second style and third color. For the style, try out for example dashed, dotted and solid. You can also for example do border-top (or -left, -right, -bottom) to add border only to one side of the element.

padding. padding property works otherwise similarly to margin, but it adds space inside the element. To understand this better, experiment with different paddings, margins and borders. Read more about the so called box-model from here: http://learn.shayhowe.com/html-css/box-model

Adding layout, sidebars and other cool stuff

Now as we have a good understanding of basic HTML and CSS, let's go a bit further. Almost all web pages have some sort of sidebars and other layout elements to arrange different types of text and content.

Download Template

Index.html:

<!doctype html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css" />
		<title>My Website</title>
	</head>
	<body>
		<div class="wrapper">
			<h1>This is centered in
		</div>
	</body>
</html>

style.css:

body {
	background: #eeeeee;
	color: #222222;
}

h1 {
	font-size: 3em;
}

h2 {
	font-size: 2em;
}

div.wrapper {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}

Div-tag

Here we've introduced a completely new tag <div>. <div>s (stands for division) are pretty important, as most of the layout elements like navigations, sidebars and so on are placed on the screen by using those. In essence, with divs you can define some section to the website, and then place content (or other divs) inside it.

Center stuff in a page

For now we've had the text fill the entire page, and those long lines aren't very readable. Often you'll want to position the main content of your website into the center of the browser window. To do this we use divs!

Let's see what's happening in the previous template:

From index.html:

<div class="wrapper">
	Some content
</div>

From style.css:

div.wrapper {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}

In index.html, we have all of our text inside a <div> with a class wrapper. In style.css, we add some style-properties for it. First of all, we use width to explicitly set some fixed width for the element. By default, if we don't have any width or other styles, divs fill the entire width of the page. Then we use a special behaviour of margin-property, by setting both left and right to be auto. With that, the browser automatically adjusts the margin on both sides so, that the element becomes centered. For this to work we must have some specific width for the element, because otherwise it would fill the entire page, and the automatic margin would be 0.

Just as a sidenote, centering using margin: auto works only sideways. Centering vertically is quite challenging and usually not a good practice in most websites.

Float and width with CSS

Our website is already looking pretty good, but what if we want to have columns or for example a sidebar? This far every element we've had has just stacked on below each other, but lets change that.

We can change the default behaviour of how elements take space and stack on the website by adding a new style property float. Float's value can be either left, right or none.

By default, elements are put on the page after each other, but floatchanges that. If element is floating to left, then they line up on the left side of each other as long as there's room, and only after that they fall to the second line. Same applies for floating elements to the right. Also, applying float to an element means, that instead of always taking full width, elements are only as wide as they have to be. If you specify element to float left and explicitly have 100% width, nothing can fit to it's sides, so it behaves quite similarly as a non-floating element.

Modify this to your index.html:

<div class="wrapper">
	<div class="sidebar">
		<h2>Sidebar</h2>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Last item</li>
		</ul>
	</div>
	<div class="main">
		<h1>Big title</h1>
		<p>Content goes here</p>
	</div>
</div>

Above, we add two divs inside wrapper with classes sidebar and main. If you refresh page now, they'll still stack vertically. So, we must add selectors to CSS, targeting our new divs.

Add to styles.css:

div.sidebar {
	width: 30%;
	float: left;
}

div.main {
	width: 70%;
	float: left;
}

Refresh, and both divs should be next to each other!

Excercice: Instead of having sidebar and main text, have just three equally wide divs next to each other?

Try out Element Inspector

One amazing tool for better undestanding the float and positioning of CSS elements is Inspect Element-tool on Google Chrome, or Firebug-plugin on Firefox. To use Inspect Element, right-click on any website, and choose Inspect Element.

On Element Inspector you can browse through the HTML and CSS of any website. If you put your mouse over an HTML element in the code, the browser will highlight it on the screen. This will help you understand why your layout might be broken, by for example making it visually clear that elements with 70% width and 50% width can't fit next to each other when floating. Also, Inspect Element is a great way to learn from other websites, since you can browse through their HTML and see how the layout is structured.

Another handy feature in Inspect Element is the ability to modify each element's style-properties on the fly. If you click an element in the code, it's styles will be visible on the right side panel. In there, you can freely modify styles and the changes will be shown immediately. For example, if you're not sure about the best looking color for a title, you can quickly try out several ones, without the need to always modify the actual file, save changes and wait for the updated view to appear in browser.

Excercise: Use Element Inspector to see what's happening in this page? How are the different text blocks aligned using floating and width of the elements.

One more template

Here's one more Backlift template for you to work on.

[Download Template](https://www.backlift.com/backlift/dropbox/create?title=PortfolioTemplate&description=More advanced template&template=github.com%2Flaurihy%2Fbacklift-railsgirls&appname=portfolio)

There's quite a bunch of new stuff in it, and we won't go through all in here. Don't be scared of all new files, the main things is still good old index.html.

config.yml is specific thing related to Backlift's platform, where you can setup some additional things stuff for your website, but there's really no need to worry about it right now. Similarly, in index.html there are those two weird {{$ scripts}} and {{$ styles}}. They are related to Backlift, and basically create the <link>-tags for your CSS-files for you.

In index.html there are so called comments, that are written between <!-- and -->. Anything between those will get ignored by browser, and are used by developers to add all kinds of comments to their code. Comments can be very helpful, when it's important that others can easily understand why or how something was done, or even for the original author to remember later on. There are comments in CSS as well, but there we use /* and */ to mark comments.

Otherwise, I'd just like to leave you on your own with this one. As an excercise, try to use Element Inspector to figure out how things work. When you find a tag, property or value you don't understand, just copy that to Google. It's surprisingly helpful!

Final touches to the website

This was it for the HTML and CSS. However, there are still two things we want to cover before summing up: analytics and domain names.

Setting up Google Analytics

Nowadays everyone is super focused on analytics, and there's no reason why you shouldn't. Here's a brief guide into setting up a Google Analytics for your website. With that, you can track the amount of visitors you're getting, where they come from and so on.

  1. Head to http://www.google.com/analytics

  2. Sign in or create an account

  3. Fill in the details for the Web Site -form

  4. Toggle "subdomains" on.

  5. Copy the given tracking code right before closing </body>-tag, something like:

     	<script type="text/javascript">
     		var _gaq = _gaq || [];
     		_gaq.push(['_setAccount', 'UA-39321341-1']);
     		_gaq.push(['_setDomainName', 'backlift.com']);
     		_gaq.push(['_trackPageview']);
    
     		(function() {
     		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
     		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
     		})();
     	</script>
     </body>
    
  6. It'll take a while, before Google will activate your account. When that happens, you can see the daily visitors in the frontpage of your Google Analytics.

A good place to learn more is http://www.google.com/analytics/learn/index.html

Purchasing a domain

For now we've had the website live in an address ending with .backlift.com. As a one more thing, let's buy you cooler, unique domain name, like yourname.com or mynickname.net. It'll cost some 10USD a year, but it's definitely worth it. Here we use www.name.com, but for example www.godaddy.com> or www.namecheap.com are good alternatives as well.

  1. Open http://www.name.com
  2. Find a domain name you like and that's still available. Good ideas might be for example something based on your name or nickname?
  3. Register yourself to the site, complete the purchase
  4. Next, open the settings of your new address and setup URL forwarding
  5. For URL forwarding, add www to the domain-field, your backlift-adress to URL and choose type masked
  6. Click "Add Forwarding"
  7. Repeat two previous steps, but leave domain-field blank. This way both www.yourdomain.com and just yourcomain.com will work.

It'll take a few minutes, before the forwarding starts working, so don't panic even if the effect is not immediate.

Conclusion

Woops, during this tutorial we've learned a ton of HTML, CSS and some tricks about the web. Even though there's still much to learn, you'll certainly be able to build a website of your own and to teach yourself even more tools of the trade. When in doubt, Google is your best friend and by searching for solutions, you'll be able to find lots of good examples and advice.

Enjoy!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment