New Posts  All Forums:Forum Nav:

website coding

post #1 of 13
Thread Starter 
i always wanted to design and make my own website.
i finally started learning how to use PhotoShop and now thinkin about making a template. i dont know much about it, but i do know that you have to code your designs am correct? how long would this take. would it be hard to learn?
post #2 of 13
www.w3schools.com

Everything you could ever want to know in the realm of the interwebz.

And I mean everything.
Ender
(8 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 3820 TPOWER X79 GeForce GTX 570 Corsair 16GB 
Hard DriveCoolingOSPower
Crucial M4 128GB SSD Antec Kuhler 620 Win 7 Seasonic M12 600w 
  hide details  
Reply
Ender
(8 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 3820 TPOWER X79 GeForce GTX 570 Corsair 16GB 
Hard DriveCoolingOSPower
Crucial M4 128GB SSD Antec Kuhler 620 Win 7 Seasonic M12 600w 
  hide details  
Reply
post #3 of 13
Yes you do have to code you designs, to my knowledge anyway

The way I go about it is by creating a html / php file and a css file.

Basic format of a html page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title goes here</title>

<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

</head>
<body>

<div id="masthead">

<div id="badge"></div> ---- Exaple of div tags

<div id="logo"></div>

</div>

</body>
</html>

Samle of css file

#container {
margin:0 auto;
width:847px;
}

#masthead {
height:248px;
position:relative;
}

#logo {
background:url(../images/header2.jpg) top left no-repeat;
height:248px;
position:absolute; bottom:0px; left;0px;
width:100%;
}

Not sure how much you know already, just a quick example really
The Shark!!
(13 items)
 
  
CPUMotherboardGraphicsRAM
Q6600 G0 | 3.6 24/7 | Prime Stable Evga 780i FTW Evga 8800 Ultra 700/1655/2320 2GB Crucial Ballistix 1066mhz 
Hard DriveOSMonitorPower
2 x 500GB | Raid 0 Windows Vista Ultimate 64bit Samsung SM-2493HM 24" OCZ 600w 
Case
Thermaltake Shark *Case mods starting soon* 
  hide details  
Reply
The Shark!!
(13 items)
 
  
CPUMotherboardGraphicsRAM
Q6600 G0 | 3.6 24/7 | Prime Stable Evga 780i FTW Evga 8800 Ultra 700/1655/2320 2GB Crucial Ballistix 1066mhz 
Hard DriveOSMonitorPower
2 x 500GB | Raid 0 Windows Vista Ultimate 64bit Samsung SM-2493HM 24" OCZ 600w 
Case
Thermaltake Shark *Case mods starting soon* 
  hide details  
Reply
post #4 of 13
I actually learned almost all the CSS and HTML I know (I'm very fluent ) by looking at the source code of websites.
 
Server
(3 items)
 
 
CPUGraphicsRAMHard Drive
Intel Core i7-3540M Intel HD Graphics 4000 8GB G.SKILL Ripjaws DDR3 1600 Samsung 840 EVO 250GB SSD 
OSMonitorMouseAudio
Windows 10 Pro x64 14" at 1600x900 Logitech Anywhere Mouse MX FiiO E17 USB DAC amp 
CPUOSCase
i3-540 Debian 8 (Jessie) Cooler Master Elite 341 
  hide details  
Reply
 
Server
(3 items)
 
 
CPUGraphicsRAMHard Drive
Intel Core i7-3540M Intel HD Graphics 4000 8GB G.SKILL Ripjaws DDR3 1600 Samsung 840 EVO 250GB SSD 
OSMonitorMouseAudio
Windows 10 Pro x64 14" at 1600x900 Logitech Anywhere Mouse MX FiiO E17 USB DAC amp 
CPUOSCase
i3-540 Debian 8 (Jessie) Cooler Master Elite 341 
  hide details  
Reply
post #5 of 13
Quote:
Originally Posted by archangelabove View Post
www.w3schools.com

Everything you could ever want to know in the realm of the interwebz.

And I mean everything.

I was trying to find the link for this site as I used it when I was learning, Still do actually, just reloaded so it wasnt in favs , It's a really good site
The Shark!!
(13 items)
 
  
CPUMotherboardGraphicsRAM
Q6600 G0 | 3.6 24/7 | Prime Stable Evga 780i FTW Evga 8800 Ultra 700/1655/2320 2GB Crucial Ballistix 1066mhz 
Hard DriveOSMonitorPower
2 x 500GB | Raid 0 Windows Vista Ultimate 64bit Samsung SM-2493HM 24" OCZ 600w 
Case
Thermaltake Shark *Case mods starting soon* 
  hide details  
Reply
The Shark!!
(13 items)
 
  
CPUMotherboardGraphicsRAM
Q6600 G0 | 3.6 24/7 | Prime Stable Evga 780i FTW Evga 8800 Ultra 700/1655/2320 2GB Crucial Ballistix 1066mhz 
Hard DriveOSMonitorPower
2 x 500GB | Raid 0 Windows Vista Ultimate 64bit Samsung SM-2493HM 24" OCZ 600w 
Case
Thermaltake Shark *Case mods starting soon* 
  hide details  
Reply
post #6 of 13
Yea, View Source is the single greatest resource to learn coding.

You start to recognize styles and develope your own..

Also, View Source lets you steal other peoples code and improve it.. or make it worse if you don't know what you are doing.
Ender
(8 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 3820 TPOWER X79 GeForce GTX 570 Corsair 16GB 
Hard DriveCoolingOSPower
Crucial M4 128GB SSD Antec Kuhler 620 Win 7 Seasonic M12 600w 
  hide details  
Reply
Ender
(8 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 3820 TPOWER X79 GeForce GTX 570 Corsair 16GB 
Hard DriveCoolingOSPower
Crucial M4 128GB SSD Antec Kuhler 620 Win 7 Seasonic M12 600w 
  hide details  
Reply
post #7 of 13
Thread Starter 
i know a BIT about HTML. but how does HTML turn into designs?? is it because u break ur templates using photoshop and then use the link of the broken pieces on HTML?
post #8 of 13
Quote:
Originally Posted by 5PEEDz View Post
i know a BIT about HTML. but how does HTML turn into designs?? is it because u break ur templates using photoshop and then use the link of the broken pieces on HTML?
You can use forms and tables to arrange the page to look how you desire.

An example of a basic webpage:

Code:
<html>
<head>
<title>Basic Webpage</title>
</head>
<body>
Hello, I am a basic webpage
</body>
</html>
Simply copy and past the above code into notepad and save it wih a htm, or html, extention.
post #9 of 13
Thread Starter 
thanks. how long would it take for me to be able to code a template o.O
post #10 of 13
I like to steal templates and customize
Good way to learn.

You should be able to get together a decent template in a few hours.

Be sure to learn CSS, as hard-coding styles into the html elements makes for code updating nightmares!

Some great tools for learning are the FireBug, and Web Developer extensions for FireFox.
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding