Courses/single-page-portfolio - Revision history

Arjensuijker at 11:38, 1 September 2015

2015-09-01T11:38:15Z

← Older revision		Revision as of 11:38, 1 September 2015
Line 1:		Line 1:
	For this course, we're going to build a very basic website that looks a little like [http://arrivabusandcoach.co.uk/buses-the-weird-and-wonderful?utm_source=onepagelove&utm_medium=outreach&utm_campaign=april ~~this~~].		For this course, we're going to build a very basic website that looks a little like these: [http://arrivabusandcoach.co.uk/buses-the-weird-and-wonderful?utm_source=onepagelove&utm_medium=outreach&utm_campaign=april 1],[http://epic.net/newsletters/2015-epic/ 2],[http://melaniedaveid.com/].

	== Getting a headstart ==		== Getting a headstart ==

Arjensuijker at 07:36, 25 June 2015

2015-06-25T07:36:32Z

← Older revision		Revision as of 07:36, 25 June 2015
Line 6:		Line 6:

	== Preparing your folder and our files ==		== Preparing your 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.		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 Sublime Text, 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 should '''create a folder''' in which you'll be keeping all of your files. Call it whatever you like. After this, you open Sublime Text. '''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 ===		=== 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.		Open your index.html again in Sublime Text. 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">

Arjensuijker at 10:27, 24 June 2015

2015-06-24T10:27:41Z

← Older revision		Revision as of 10:27, 24 June 2015
Line 110:		Line 110:
	Of course you replace "bestandsnaam.jpg" with the name and extension of the file that you just saved to your folder. Refresh your browser to check if it works.		Of course you replace "bestandsnaam.jpg" with the name and extension of the file that you just saved to your folder. Refresh your browser to check if it works.

	=== ~~Styling~~ the text and images ===		=== Placing the text and images ===
	First we give the outer div a width of 800 pixels and place it in the center of the screen using "margin:auto 0;", which somehow works. We give the image and the text div a width of 48% and ~~a margin~~ of 1%.		First we give the outer div a width of 800 pixels and place it in the center of the screen using "margin:auto 0;", which somehow works. We give the image and the text div a width of 48% and an absolute position. This already places both elements in the top left corner of the .center, so now we place the image on the right side.

	<source lang="css">		<source lang="css">
	~~div~~.center{		.center{
	width:800px;		width:800px;
	margin:0 auto;		margin:0 auto;
	}		}
	~~div~~.~~text~~, img{		.center .description, .center img{
			position:absolute;
			top:0;
	width:48%;		width:48%;
	~~margin~~:1%;		}
			.center img{
			left:50%;
	}		}
	</source>		</source>

			=== Etcetera ===
			- fixed menu
			- background image
			- transform on hover
			- multiple absolutely positioned images

Arjensuijker at 15:00, 19 June 2015

2015-06-19T15:00:01Z

← Older revision		Revision as of 15:00, 19 June 2015
Line 116:		Line 116:
	div.center{		div.center{
	width:800px;		width:800px;
	margin:auto 0;		margin:0 auto;
	}		}
	div.text, img{		div.text, img{

Arjensuijker at 14:58, 19 June 2015

2015-06-19T14:58:33Z

← Older revision		Revision as of 14:58, 19 June 2015
Line 111:		Line 111:

	=== Styling the text and images ===		=== Styling the text and images ===
	First we give the outer div a width and place it in the center of the screen using "margin:auto 0;", which somehow works.		First we give the outer div a width of 800 pixels and place it in the center of the screen using "margin:auto 0;", which somehow works. We give the image and the text div a width of 48% and a margin of 1%.

	<source lang="css">		<source lang="css">
			div.center{
			width:800px;
			margin:auto 0;
			}
			div.text, img{
			width:48%;
			margin:1%;
			}
	</source>		</source>

Arjensuijker at 14:48, 19 June 2015

2015-06-19T14:48:13Z

← Older revision		Revision as of 14:48, 19 June 2015
Line 95:		Line 95:

	=== Adding text and images ===		=== Adding text and images ===
	Now that the sections are ready, we can fill them with some content. To add an image, you first have to find one. Find a random image on the internet and save it to the folder you are working in. After this we place the text. To keep everything together, we'll put all the text in a div. A div is basically an invisible box that you can use to keep elements together. In this div we'll place a header and two paragraphs. Now we wrap the whole thing in a ~~div~~, you can use this later to place it in the center. You place this code inside your first section:		Now that the sections are ready, we can fill them with some content. To add an image, you first have to find one. Find a random image on the internet and save it to the folder you are working in. After this we place the text. To keep everything together, we'll put all the text in a div with a class. A div is basically an invisible box that you can use to keep elements together. In this div we'll place a header and two paragraphs. Now we wrap the whole thing in another div with a class, you can use this later to place it in the center. You place this code inside your first section:

	<source lang="html5">		<source lang="html5">
	<div>		<div class="center">
	<img src="bestandsnaam.jpg">		<img src="bestandsnaam.jpg">
	<div>		<div class="description">
	<h3>This is a header!</h3>		<h3>This is a header!</h3>
	<p>This is a paragraph with some text.</p>		<p>This is a paragraph with some text.</p>
Line 111:		Line 111:

	=== Styling the text and images ===		=== Styling the text and images ===
			First we give the outer div a width and place it in the center of the screen using "margin:auto 0;", which somehow works.

	<source lang="css">		<source lang="css">

	</source>		</source>

Arjensuijker at 14:18, 19 June 2015

2015-06-19T14:18:28Z

← Older revision		Revision as of 14:18, 19 June 2015
Line 108:		Line 108:
	</source>		</source>

			Of course you replace "bestandsnaam.jpg" with the name and extension of the file that you just saved to your folder. Refresh your browser to check if it works.

			=== Styling the text and images ===


			<source lang="css">

	~~<source lang="html5">~~
	</source>		</source>
	~~Of course you replace "bestandsnaam.jpg" with the name and extension of the file that you just saved to your folder. Refresh your browser to check if it works.~~

Arjensuijker at 14:06, 19 June 2015

2015-06-19T14:06:24Z

← Older revision		Revision as of 14:06, 19 June 2015
Line 95:		Line 95:

	=== Adding text and images ===		=== Adding text and images ===
	Now that the sections are ready, we can fill them with some content.		Now that the sections are ready, we can fill them with some content. To add an image, you first have to find one. Find a random image on the internet and save it to the folder you are working in. After this we place the text. To keep everything together, we'll put all the text in a div. A div is basically an invisible box that you can use to keep elements together. In this div we'll place a header and two paragraphs. Now we wrap the whole thing in a div, you can use this later to place it in the center. You place this code inside your first section:

			<source lang="html5">
			<div>
			<img src="bestandsnaam.jpg">
			<div>
			<h3>This is a header!</h3>
			<p>This is a paragraph with some text.</p>
			<p>This is another paragraph with some text.</p>
			</div>
			</div>
			</source>


			<source lang="html5">
			</source>
			Of course you replace "bestandsnaam.jpg" with the name and extension of the file that you just saved to your folder. Refresh your browser to check if it works.

Arjensuijker at 12:43, 19 June 2015

2015-06-19T12:43:24Z

← Older revision		Revision as of 12:43, 19 June 2015
Line 93:		Line 93:
	}		}
	</source>		</source>

			=== Adding text and images ===
			Now that the sections are ready, we can fill them with some content.

Arjensuijker at 12:36, 19 June 2015

2015-06-19T12:36:37Z

@@ Line 50: / Line 50: @@
 == Adding your content ==
-=== Adding sections ===
+=== Adding the sections ===
 Your page will consist of several sections, so let's start by adding three of these to your body. Because we want to give them all a different background, we need a way to identify them. To do this, we'll be giving them classes. To test, we'll also be adding a little content to the sections.
@@ Line 59: / Line 59: @@
 </source>
-=== styling the sections ===
+=== Styling the sections ===
 Open your CSS file in TextWrangler and delete the contents. First we are going to give all sections a '''relative position'''. This means that they will be placed in their natural order in the document. We're also giving them a '''width and height of 100%''', so that they fill the screen.
@@ Line 67: / Line 67: @@
    height: 100%;
    width:100%;
+}
 </source>