User blog:Lottie52/Coding

Okay, so, I'll try to explain the basics of coding. I don't really learn about this in real life, and I just able to do it because I tinker with codes... a lot... Oh God... the endless nights I spent tinkering with codes... *shivers*

Well... here goes nothing.

First, I'll explain how to make the background. When you open the source code of a page that you want to copy the design of, this code is usually the first bunch of codes that you will find.

So, if you look at the codes, you will find it in this form: 

I know, it's a jumble of nonsense, right? I thought so too when I first look at it. But then I realize that the semicolons divide the code into smaller parts, and when I divided it, it somehow makes a little more sense. It will look like this: 

And, after countless trial and error, I was able to understand the functions of most of the parts of the codes, though I still don't understand some of it. This is the meaning of each part that I already understand. <div style=" width:95%; (the width of the background box)

border:3px solid #000000; (the "3px" denotes how thick you want the border of the box to be, and the #000000 is the code for the color you want to use)

background-color:#FFFFFF; (this is the color for the background, #FFFFFF is the code for the color 'white')

color:#000000; (this is the color for the letters, #000000 is the code for the color 'black')

-moz-border-radius:3ex; (I don't know what this is)

border-radius:3ex; (this part makes the corner of the box it curved appearance, if you change the "3ex" to "0ex", the corners of the box will become a right-angle kind of corner)

-moz-box-shadow: 0 0 10px 3px #000000; (I don't know what this is)

-webkit-box-shadow: 0 0 10px 3px #000000; (I don't know what this is)

box-shadow: 0 0 10px 3px #FF55A3; (the code for the shadow of the background box. The 10px and 3px defines how thick the shadow will be) padding:15px; (this is how far you want the space between the upper part of the box and the the first line of words inside it)

padding-bottom:15px;">

(the code that you want the box to end, and everything else typed after this code will be free of the code you made after the "

If you want to put text inside the box, you have to put it before the  part of the code. Example: Hi! Hello! Testing testing, one, two, three.

And you will have it looking like this:

Hi! Hello! Testing testing, one, two, three.

So, that was the basic of coding. The key is, when you find a code that you want to copy, just divide it first at the semicolons and try to understand the meaning of each part of the code. It will take time, but you'll get the hang of it once you're hooked with coding. LOL

For the list of codes for the colors that you can use, you can look for it at:

http://en.wikipedia.org/wiki/List_of_colors:_A-M

and

http://en.wikipedia.org/wiki/List_of_colors:_N-Z