What's new

I'm a HTML and CSS beginner

  • Thread starter Triiistan
  • Start date
  • Views 557
T

Triiistan

Contributor
Messages
1,951
Reaction score
496
Hello Se7enSins!

If somehow you didn't read or notice the title of this thread, I am a HTML and CSS beginner. I've been asking around on the best way to learn, and everyone was responding with make a "project" webpage. Like a small project just to help me learn, and retain it as well. My webpage is no where near being done, but I would like some pointers, to help me improve what I already have. Also, please help me with CSS, my webpage looks so ugly!

index.html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Modern Warfare 2 Info</title>
<link rel="stylesheet" type="text/css" href="web.css" />
</head>

<body>
<h1><center><u>Modern Warfare 2 Info</u></center></h1>

<h2>Weapons</h2>
<h3><dd>Primary Weapons</dd></h3>
<ul type ="circle">
<dd>
<li><a href="http://www.google.com">Assualt Rifles</a></li>
<li><a href="http://www.google.com">Sub Machine Guns</a></li>
<li><a href="http://www.google.com">Light Machine Guns</a></li>
<li><a href="http://www.google.com">Sniper Rifles</a></li>
<li><a href="http://www.google.com">Riot Shield</a></li>
</dd>
</ul>
<h3><dd>Seconday Weapons</dd></h3>
<ul type="circle">
<dd>
<li><a href="http://www.google.com">Machine Pistols</a></li>
<li><a href="http://www.googlecom">Shotguns</a></li>
<li><a href="http://www.google.com">Handguns</a></li>
<li><a href="http://www.google.com">Launchers</a></li>
</dd>
</ul>
<h3><dd>Other</dd></h3>
<ul type="circle">
<dd>
<li><a href="http://www.google.com">Equipment</a></li>
<li><a href="http://www.google.com">Special Grenades</a></li>
</dd>
</ul>
<h2>Perks</h2>
<p>In Modern Warfare 2 perks are special abilities / power ups for multiplayer combat. There are only 3 perk slots available to you and each slot consist of different types of perks, so choosing the right ones for your class is crucial. The same applies in Modern Warfare 3; there are only a limited amount of slots available, so choosing the right ones from the modern warfare 3 perks list is extremely important.</p>
<p>Unlike in the previous Call of Duty games, each perk can now be upgraded to a Pro version by completing its challenge. Note: Pro perks are additions to each perk, they don't replace them. All versions of the game (Xbox 360, PlayStation 3 and PC) unlock the pro perks the same way.</p>
<h3><dd>Perk Slot 1</dd></h3>
<table border="6">
<tr>
<td>Perk Name</td>
<td>Ability</td>
<td>Pro Ability</td>
</tr>
<tr>
<td>Marathon | Marathon Pro</td>
<td>Unlimited Sprint</td>
<td>Get over obstacles faster</td>
</tr>
<tr>
<td>Sleight of Hand | Sleight of Hand Pro</td>
<td>Faster reloading</td>
<td>Gives a speed boost to how fast you can aim down the sight of your weapon</td>
</tr>
<tr>
<td>Scavenger | Scavenger Pro</td>
<td>Full resupply from dead enemies</td>
<td>Extra magazines</td>
<tr>
<td>Bling | Bling Pro</td>
<td>2 primary weapon attachments</td>
<td>2 secondary weapon attachments</td>
</tr>
<tr>
<td>One Man Army | One Man Army Pro</td>
<td>Replaces your secondary weapon. This allows you to change your class at any given time during a match. This perk has been removed from the Modern Warfare 3 perks list.</td>
<td>Swaps classes even faster</td>
</table>

web.css
Code:
p {
color: #000;
}

body {
background-color: #7A8B8B;
}

h1 {
color: rgb(0,0,0);
}

a {
color: #8B4726;
}

Thanks Everyone! Also, do you recommend me doing CSS externally like I am now, or internally? I am NOT going to do in line styling. I have been told to avoid this where ever possible

Thanks Everyone!
 
R

Ripper

Seasoned Member
Messages
6,930
Reaction score
2,362
External styling will end up being the best option in the long run. For simple webpages, you can use internal styling.
And yes, try to avoid using in-line styling.

And of course your webpages aren't going to be the most appealing if you're still just a beginner with CSS. Appearance will gradually increase over time.
 
B

YourMumOnToast9

Contributor
Messages
2,264
Reaction score
748
Check this site out dude: http://www.w3schools.com/css/

I personally use the site when referencing any CSS I forget, also the place I built my knowledge from.

I agree with the post above, in all ways, although, sometimes, in-line styles are the only option, they should be avoided, unless they are necessary, at which point, they should be embraced, and used wisely.

EDIT: oh, and remember, test in at least 3 browsers before 'finishing', Chrome, Firefox, and Internet Explorer, yes, Internet Explorer.

Remember, visitors to any site, do not use the same browser, there are variants. I find if i test my code on these 3 browsers, then it should work in any other case fine.
 
T

Triiistan

Contributor
Messages
1,951
Reaction score
496
Thanks Everyone for your advice, especially YourMum... for the link! I'm going to continue to learn this stuff! Let's say for example I became advanced in HTML as well as CSS, what's next? Should I learn a new language? PHP, Python, Java? What do those do anyways <<-- ?
 
B

Buffalax

Enthusiast
Messages
476
Reaction score
83
Check this site out dude: http://www.w3schools.com/css/ I personally use the site when referencing any CSS I forget, also the place I built my knowledge from. I agree with the post above, in all ways, although, sometimes, in-line styles are the only option, they should be avoided, unless they are necessary, at which point, they should be embraced, and used wisely. EDIT: oh, and remember, test in at least 3 browsers before 'finishing', Chrome, Firefox, and Internet Explorer, yes, Internet Explorer. Remember, visitors to any site, do not use the same browser, there are variants. I find if i test my code on these 3 browsers, then it should work in any other case fine.

Dont forget http://www.w3fools.com for all the wrong things that they post...
 
K

karl1206

Enthusiast
Messages
276
Reaction score
9
Also when styling and using colours, make sure you use the hex colours consistently and not changing from hex to rgb to colour name (e.g. red, green, blue).
 
T

Triiistan

Contributor
Messages
1,951
Reaction score
496
Once you have a good understanding of HTML and CSS I would recommend looking into PHP. If you want to make your websites more interactive you will definitely want to look into learning Javascript. I recommend using this website for learning HTML, CSS, and Javascript: http://code.google.c...css-javascript/ and using http://php.net for learning PHP.
Much appreciated. Thank you very much for the reply.
 
T

TyLerrrr

Enthusiast
Messages
531
Reaction score
42
I'm also a beginner, I just started my Web Page Design class a few weeks ago. I would suggest learning to use tables so that you can line everything up properly, it also makes the site look 100 times better.
 
Top Bottom