GuiltyCodingTutorials

Status:
Joined: September 8, 2011
Last Seen: 1 decade
user id: 216631


















 

.
Note: Use the links to navigate. Hello! Welcome to GCT. This is just a tutorial account, as you can observe. A lot of people don't know coding and I just thought I'd help them. More tutorials will be up soon. You may suggest anything you want to know. (That would be incredibly helpful!) I try to make the tutorials as simple as I possibly can. But if you have any questions, feel free to ask me. I will get back to you shortly. Note: Do not redistribute anything on this profile without permission and credit. Thank you for your attention.
Best seen on Google Chrome.

Quotes by GuiltyCodingTutorials

Confusewitcoding?
Need a little help? Just your luck.
This is a tutorial account.
Check it out, you might just find your coding answers. If I have not posted what you need, please suggest it and I will put it up soon. (: 

 

Confusewitcoding?
Need a little help? Just your luck.
This is a tutorial account.
Check it out, you might just find your coding answers. If I have not posted what you need, please suggest it and I will put it up soon. (: 

 

Level Six: Scrollbars

In order to use scrollbars, you must have a box or border. Refer to previous levels for tutorials on those.

Before attempting to add scrollbars, you must first have a specific height to your box.
Always add height and overflow in the last border (if you have multiple borders).

How to add height:
Add "height: 50px;" to you box/border's coding.

How to add scrollbars to your box:
Add "overflow: scroll;" to your box/border's coding.
That will give you both horizontal and vertical scrollbars.
If you want only vertical: "overflow-y: scroll;"
If you want only horizontal: "overflow-y: hidden; overflow-x: scroll;"


Example of box with both ver/hor scrollbars. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text.
Example of box with both ver/hor scrollbars. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text.

Example of box with both ver/hor scrollbars. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text.

Copyright of GuiltyCodingTutorials. Do not redistribute without permission and credit.
Level Six: Modifying borders.

If you do not already know how to make borders, refer to Level Three for the tutorial.
Link to Level 3: www.wittyprofiles.com/q/3793722

Do you want many layers into your bordered quotes?
You can do so by layering multiple border codes.

Do you want to change the size of your box?
Simple. All you need to do is add "width: 400px;" within the coding of your border.
Note: If you have multiple borders in your coding, add the width coding to the first border only.


Have you ever had your box positioned at the left?
You can make it centered by adding "margin: auto;" into the coding.
Note: Same as changing size, add only in the first border!


Example of multiple layers. Add as many as you want.

Example of a box changed by width. Change as you prefer.

Example of box with width and margin code.

Copyright of GuiltyCodingTutorials. Do not redistribute without permission and credit.
Level Five: Combining codes.

Does witty ever tell you your quote is more than 8192 characters?
Here's a solution: combine the individual codes together.
Individual codes:
<div style="font-family: arial;"><span style="font-size: 16px;"><span style="color: #000;">
Combined codes:
<div style="font-family: arial; font-size: 16px; color: #000;">

Do you understand? This is helpful for coding. It makes it look tidy and spacious.

Copyright of GuiltyCodingTutorials. Do not redistribute without permission and credit.
Level Four: Links

Website to create your own fades: 
patorjk.com/text-color-fader/
www.vex.net/~x/xfade/advanced.html


Website for list of possible color codes:
web.njit.edu/~kevin/rgb.txt.html

Website for all possible font styles: 
ampsoft.net/webdesign-l/WindowsMacFonts.html


Copyright of GuiltyCodingTutorials. Do not redistribute without permission and credit.
Level Three: Borders

Border width: <div style="border-width: 3px;">
Border color: <span style="border-color: #000;">
Border type: <span style="border-style: dotted;">
Some border types are; solid, dotted & dashed.

Want to make the edges of a border curved?
You can do so, simply by changing the border radius.

<div style="border-radius: 15px;">


An example of all the codings.

Copyright of GuiltyCodingTutorials. Do not redistribute without permission and credit.
Level Two: Decorations

Note: Coding must always include '<' and '>' at the beginning and end or it will not work.

Font shadow: <div style="text-shadow: 0px 1px 2px red;">
You can change the numbers and color to suit your liking.


Background: <div style="background-color: grey;">
This is an example of a grey background.
Change the colors to something that you prefer.


Letter spacing: <span style="letter-spacing: 4px;">
                             <span style="letter-spacing: -1px">
This is how 4 looks: text.
This is how -1 looks: text.
Change the spacing as you wish by simply changing the number.

Easy?

Now for changing the line height: <span style="line-height: 12px;">
Change the number to suit your liking.




Copyright of GuiltyCodingTutorials. Do not redistribute without permission and credit.
Level One: The Basics of Coding

Note: Coding must always include '<' and '>' at the beginning and end or it will not work.
 
Font size: 
<div style=”font-size: 20;”>
If you want another size, just change the number already in that code.

Font color:
<div stlye=”color: red;”>
If you wish for another color, simply change the color name.
You can use either the name of a color, rgb decimal or rgb hex code.
What do those look like?
Obviously, you know what I mean when I say the name of a color. Rgb dec looks like this:
rgb (84, 84, 84).  By the way, the rgb number was the coding for the color grey. Now for the rgb hex codes… They are the ones that look like this: #545454. That color I mentioned is grey. 

You can find all coding colors here:
web.njit.edu/~kevin/rgb.txt.html

Font type: <div style="font-family: arial;">
Go ahead and change the name of the font with something you prefer.
You can find possible font styles here: ampsoft.net/webdesign-l/WindowsMacFonts.html

Copyright of GuiltyCodingTutorials. Do not redistribute without permission and credit.