Difference between revisions of "Courses/single-page-portfolio"
Arjensuijker (talk | contribs) |
Arjensuijker (talk | contribs) |
||
| Line 4: | Line 4: | ||
== Preparing our folder and our files == | == Preparing our folder and our files == | ||
The first thing you have to understand is that | The first thing you have to understand is that everything that we'll be writing is basically plain text. This means that your entire website basically consists of text files that are written in a specific way. You could even use a very basic text editor like textedit or notepad. However, programs that are specifically made for writing code often have handy features. Therefore, it's better to use a program like textwranglet, that gives you a few handy code editing features. | ||
First, you should '''create a folder''' in which you'll be keeping all of your files. Call it whatever you like. After this, you open TextWrangler. '''Write''' anything you like and then '''save it as index.html''' in the folder you just created. Now find this file in finder and '''open it with a browser''', preferable Chrome. You just created a website! But to give it structure and make it look good, we'll need to write some html. Erase your previous text and proceed with the next step: creating the basic html structure. | |||
First you | |||
=== Doctype, html, head and body === | === Doctype, html, head and body === | ||
Start by declaring the doctype on the first line. This tells the browser that the document will be written in HTML. After this, it's always smart to immediately write all the necessary tags you always need for an HTML document. This includes the html tag, but also the head and the body. In the head you will include information for the browser, like the document title and links to stylesheets and javascript files. In the body you place the html that people will really see. | Open your index.html again in TextWrangler. Start by declaring the doctype on the first line. This tells the browser that the document will be written in HTML. After this, it's always smart to immediately write all the necessary tags you always need for an HTML document. This includes the html tag, but also the head and the body. In the head you will include information for the browser, like the document title and links to stylesheets and javascript files. In the body you place the html that people will really see. | ||
<source lang="html5"> | <source lang="html5"> | ||
| Line 29: | Line 27: | ||
=== Adding a CSS file === | |||
Now we want to style our content. To do this, we first have to add a link to a stylesheet in the head of index.html like so: | |||
<source lang="html5"> | |||
<head> | |||
<title>My title</title> | |||
<link rel="stylesheet" type="text/css" href="style.css"> | |||
</head> | |||
</source> | |||
You can see that we are linking to "style.css", so this is the file we will have to create. Open a new file in TextWrangler and add the following text: | |||
<source lang="css3"> | |||
body{ | |||
background: red; | |||
} | |||
</source> | |||
This makes the background of our site red, just to see if it works. Save this file as "style.css" and save it in your folder. | |||
Revision as of 09:53, 19 June 2015
Getting a headstart
To get a headstart and leave everybody in the dust, follow the HTML & CSS courses on Codecademy [1] first.
Preparing our folder and our files
The first thing you have to understand is that everything that we'll be writing is basically plain text. This means that your entire website basically consists of text files that are written in a specific way. You could even use a very basic text editor like textedit or notepad. However, programs that are specifically made for writing code often have handy features. Therefore, it's better to use a program like textwranglet, that gives you a few handy code editing features.
First, you should create a folder in which you'll be keeping all of your files. Call it whatever you like. After this, you open TextWrangler. Write anything you like and then save it as index.html in the folder you just created. Now find this file in finder and open it with a browser, preferable Chrome. You just created a website! But to give it structure and make it look good, we'll need to write some html. Erase your previous text and proceed with the next step: creating the basic html structure.
Doctype, html, head and body
Open your index.html again in TextWrangler. Start by declaring the doctype on the first line. This tells the browser that the document will be written in HTML. After this, it's always smart to immediately write all the necessary tags you always need for an HTML document. This includes the html tag, but also the head and the body. In the head you will include information for the browser, like the document title and links to stylesheets and javascript files. In the body you place the html that people will really see.
<!DOCTYPE html>
<html>
<head>
<title>My title</title>
</head>
<body>
My content
</body>
</html>
Adding a CSS file
Now we want to style our content. To do this, we first have to add a link to a stylesheet in the head of index.html like so:
<head>
<title>My title</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
You can see that we are linking to "style.css", so this is the file we will have to create. Open a new file in TextWrangler and add the following text:
body{
background: red;
}This makes the background of our site red, just to see if it works. Save this file as "style.css" and save it in your folder.
The main content
Let's start adding some content. Your site will consist of several sections, inside every section there is an article that contains an image and a div with some text. The section allows us to change the background color for the whole area, the article keeps everything together and allows us to place it in the center of the screen. Of course, all of this is placed in the body of your HTML file.
