BlueCats Guide to making a forum from scratch [part1]

BlueCats Guide to making a forum from scratch [part1] - Printable Version

+- Sinisterly (https://sinister.ly)
+-- Forum: Design (https://sinister.ly/Forum-Design)
+--- Forum: Web Design (https://sinister.ly/Forum-Web-Design)
+--- Thread: BlueCats Guide to making a forum from scratch [part1] (/Thread-BlueCats-Guide-to-making-a-forum-from-scratch-part1)

BlueCats Guide to making a forum from scratch [part1] - BlueCat - 06-15-2014

I am going to attempt to guide you guys on your way to creating your own forum. I ask that you have basic knowledge on html, css, and php.

Firstly, You are wanting to get hold of Wamp. You can get that here: www.wampserver.com/en/. Once that is set up. Locate to your wamo directory, WWW and inside of that folder create a folder, You may call it whatever you like. Once everything is going smooth and want you to open your best text editor. For me, I am going to be using Sublime text editor 2.(Best text editor ever I know right).

Once you've done that. Start of by coding the basic html structure.

Code:
<html>
<head>
<title>Welcome to BlueCats Guide</title>
</head>
<body>
</body>
</html>

If you have done that go along to file >>> save as and save is as Index.php in the folder. you created earlier on.

Let's move on from this part. and let's actually create some styles. let's start with the header of the page. Now in-between the body></body> tags you are going to want to place this code in there.

Code:
<div id="head">

</div>

If you are confused on how it's suppose to be I will show you in a full document.

Code:
<html>
<head>
<title>Welcome to BlueCats Guide</title>
</head>
<body>
<div id="head">

</div>
</body>
</html>

Save it. Now in the folder you created before I want you to create a css folder. Once that is done, Go back to editor and make a new file and save it as header.css. Once everything is running smooth trace back to your index.php document. Underneath the title tag place this piece of code.

Code:
<link rel="stylesheet" type="text/css" href="css/Header.css">

what this basically does is that it links you to your stylesheet, Easy right? Confused

mile: Moving on. Trace over to your header.css Now to define the div, We need to find out what type it is. If its a class you would use .head, But if it's an ID you would use #head to define it.

The good thing about Classes is that you can use them so many times on a page But with the ID you are limited and can only use it once. Therefore it is best to use to use the ID if your wanting to cover up a big part of page as there will only be one mains ection, instead of using so many classes.

Code:
#head {}

All code related to the #head will go in between the curly brackets how about we add, How about we add a background color and a height of 30px. This would be following code to do so.

Code:
#head {
background-color: #424242;
height: 30px;
}

Don't like the color? Go here for more color codes. http://html-color-codes.info/

This will be the outcome of the css.

[Image: 6ed9d0df878cdcf192259189a6ec05b7.png]

[Image: 6ed9d0df878cdcf192259189a6ec05b7.png]

You will notice that all around it are gaps of white. To get rid of that, You are going to want to use the body tag in css. How about we add a background color also. Copy the following into your css.

Code:
body {
margin: 0px;
background-color: black;
}

This is what it will look like in your browser.
[Image: 37638fbeeb64bd3f19a77231915fb160.png]

well better than the first picture.

Now, the header is looking a little dull. Let's add some links to it. go back to your html document and in between the div id="head"> tag add the following for link.

*not I like to put links inside of buttons as it make it easier for styling.*

Code:
<div id="head">
<button><a href="#">Login</a></button>
<button><a href="#">Register</a></button>
</div>

In the whole document this is how it looks this.

Code:
<html>
<head>
<title>Bluecat</title>
<link rel="stylesheet" type="text/css" href="css/Header.css">
</head>
<body>
<div id="Head">
	<button><a href="#">Login</a></button>
<button><a href="#">Register</a></button>
</div>



</body>
</html>

This is how the buttons look in the browser.

[Image: a3d2f508dbae67b4c3694f9562b3ffc4.png]

Let's get styling.

Same as before, use the #head in css but following it by all the other elements that are included in. So, let's get rid of the text decoration and add the color white to the links.

Code:
#head a {
text-decoration: none;
color: white;
}

Now lets style the button and make it appear in the top right of the header, Give it height, make it font bold and give is a margin-right, as we don't want it so close to the corner.

Code:
#head button {
background-color: red;
border: 1px solid red;
float: right;
height: 30px;
margin-right: 50px;
font-weight: bold;
}

Here is what it looks like now.

[Image: 33ea10ac86229a84bd5f7ef2496b2ddf.png]

Right, That's it for part 1. In part 2 we will be finished off some styling and will be building the login forms and connecting it to the database! keep updated.

For those who want the full source. Here you go.

index.php

Code:
<html>
<head>
<title>BlueCat</title>
<link rel="stylesheet" type="text/css" href="css/Header.css">
</head>
<body>
<div id="Head">
	<button><a href="#">Login</a></button>
<button><a href="#">Register</a></button>
</div>



</body>
</html>

header.css

Code:
#head {
	background-color: #424242;
	height: 30px;
}
#head a {
text-decoration: none;
color: white;
}
#head button {
background-color: red;
border: 1px solid red;
float: right;
height: 30px;
margin-right: 50px;
font-weight: bold;
}
body {
	margin: 0px;
	background-color: black;
}

RE: BlueCats Guide to making a forum from scratch [part1] - bluedog.tar.gz - 06-15-2014

If I were you i'd go deeper in particular stuff. For example, the difference between div ID and CLASS usage.
You are jumping straight ahead in building something.

+1 for the effort though.

Just feedback.

RE: BlueCats Guide to making a forum from scratch [part1] - BlueCat - 06-15-2014

(06-15-2014, 10:48 PM)bluedog.tar.gz Wrote: If I were you i'd go deeper in particular stuff. For example, the difference between div ID and CLASS usage.
You are jumping straight ahead in building something.

+1 for the effort though.

Just feedback.

Thanks, when I get the chance, I will edit it.

RE: BlueCats Guide to making a forum from scratch [part1] - RaccoonCity_mybb_import13707 - 06-16-2014

Very nice tutorial. It's really easy to read and such.

Great job @BlueCat ! Smile

RE: BlueCats Guide to making a forum from scratch [part1] - BlueCat - 06-16-2014

@bluedog.tar.gz Added a little bit more info regarding the ID and CLASSES.

RE: BlueCats Guide to making a forum from scratch [part1] - BlueCat - 06-16-2014

(06-16-2014, 01:36 PM)RaccoonCity Wrote: Very nice tutorial. It's really easy to read and such.

Great job @BlueCat !

Thanks man, if I have time later, I will get writing part 2 out. Confused

mile: