|
|
Post by Brownie on Jun 17, 2022 10:00:42 GMT -5
Yo! Have you ever saw a simple post header like this - - - OOC
tl;dr: - - - Name Place . With
Text - - - @tag @tagor maybe like this and you wanted to have something that looked that neat, so you thought: I should learn to code! Then you looked at the code for it and it looked like THIS monster?
[div style="width:65%;margin:auto;padding-top:30px;padding-bottom:30px;"][div style="height:6px;background-color:#dfbc9f;width:65%;float:right;line-height:0px;opacity:.6;border-top-left-radius:20px;border-bottom-left-radius:20px;"][/div][div style="height:13px;"][/div][div style="height:7px;background-color:#bd9b7e;width:75%;float:right;line-height:0px;opacity:.7;border-top-left-radius:20px;border-bottom-left-radius:20px;"][/div][div style="height:14px;"][/div][div style="height:8px;background-color:#9c7f66;width:85%;float:right;line-height:0px;opacity:.9;border-top-left-radius:20px;border-bottom-left-radius:20px;"][/div][div style="height:15px;"][/div][div style="background-color:#7f6854;height:200px;border-bottom:double 30px #b4cbcd;border-top-left-radius:20px;"][div style="width:20%;float:left;padding-top:25px;padding-left:25px;"][div style="height:150px;width:150px;background-color:#b4cbcd;float:left;border-radius:10px;"]Character image[/div][/div][div style="width:60%;float:right;padding-top:40px;"][div style="width:95%;background-color:#b29c7d;float:right;height:12px;border-bottom:#7f6854 solid 25px;font-size:36px;font-family:Cinzel;line-height:12px;text-align:center;text-shadow:#050841 1px 1px;"]Character[/div][div style="float:left;height:0px;"][img src="https://i.imgur.com/36StBY7.png" style="max-width:80%;"][/div][div style="width:70%;background-color:#b29c7d;float:right;height:6px;border-bottom:#7f6854 solid 25px;font-size:20px;font-family:Mate SC;line-height:5px;text-align:right;padding-right:15px;text-shadow:#050841 1px 1px;"]Place[/div][div style="width:55%;background-color:#b29c7d;float:right;height:5px;font-size:15px;font-family:Mate SC;line-height:5px;text-align:right;padding-right:15px;text-shadow:#050841 1px 1px;"]Tags[/div][/div][/div][div style="background-color:#7f6854;padding:40px;Font-size:13px;font-family:Taviraj;line-height:20px;text-align:justify;border-bottom-right-radius:20px;"]Text[/div][div style="height:6px;line-height:0px;"][/div][div style="height:8px;background-color:#9c7f66;width:85%;float:left;line-height:0px;opacity:.9;border-top-right-radius:20px;border-bottom-right-radius:20px;"][/div][div style="height:14px;"][/div][div style="height:7px;background-color:#bd9b7e;width:75%;float:left;line-height:0px;opacity:.7;border-top-right-radius:20px;border-bottom-right-radius:20px;"][/div][div style="height:13px;"][/div][div style="height:6px;background-color:#dfbc9f;width:65%;float:left;line-height:0px;opacity:.6;border-top-right-radius:20px;border-bottom-right-radius:20px;"][/div][/div]
Yea, we've all been there. A complex bit of html looks complicated, but they are made out of simple pieces, I promise, and it's actually really easy to learn the basics. On this thread, I'll teach you not only what all these little "things" do and how they interact with each other, but also how to make code that can be expanded without breaking and some good practices to have to keep your code clutter-free and readable for anyone else that wants to look at it! |
|
|
|
Post by Brownie on Jun 17, 2022 10:02:05 GMT -5
How to get the most out of this class --
Do all the exercises. Copy and paste them onto this thread, and follow the instructions; your code will match mine at the end if you've done it correctly and so long as you do your practicing here, I will be able answer questions if you get stuck. These exercises are a test of what you should have learned from that lesson. They also will build upon each other, so be sure to understand the previous lesson's exercise completely before moving on to the next one.
Ask questions. It's one thing to force the code until it works, but another to understand why and how it works and to be able to manipulate it in ways that aren't explicitly part of the exercise. Please ask questions! I'm (sometimes) good at explaining things and hopefully can make it easier to understand.
Play with the code. Change numbers around, see what happens when you shift parameters. It's one thing to know what the drop shadow values mean, but another to see them changing when you increase the offset yourself!
Look at complex code from other people. There are plenty of good layouts that use solid code, and the brown post header above is also fairly complex. As you go through the lessons, see what new things you understand by looking at the code on the first post.
Graduates --
If you used and completed this class, ask to join the list of graduates (:
WARNING --
Make sure you are always in the "BBCode" tab when manipulating or writing code. Sometimes writing code in plaintext/preview will not work. Inserting words to a premade code in preview may also break it, so try to edit in BBCode as much as possible (until you know how your div/span interactions work at least!)
|
|
|
|
Post by Brownie on Jun 17, 2022 10:02:21 GMT -5
THE BASICS In the first lesson, I'll go over common VARIABLES and their associated PERAMETERS. I'll also explain when to use DIV or SPAN, and explain SYNTAX. First, some definitions. SYNTAX is the "punctuation" of coding. Using square brackets around BBCode code is part of the syntax. Incorrect syntax will often delete the part of the code that is incorrect, so make sure you're always remembering the correct punctuation when coding.
VARIABLES are the different traits that your code can modify. Font-size, color, and background are examples of variables.
PARAMETERS are the things you tell a variable to do. Each variable has a selection of acceptable parameters it can understand. For example, you can set font-size to be 10px (10 pixels), but you cannot set font-size as A. "A" is not an acceptable value for font-size (what would "A" size text be?)
A COMMAND is what I'm lumping together as independent modifiers. This will include things like SPAN and DIV, but also BOLD and CODE. Syntax To make code work, you must have the proper punctuation and formatting. Otherwise, the code won't understand what goes where. The first rule is that BBCode must be enclosed within square brackets [ ]. Every portion of the code must begin with a [ and end with a ], like book ends. Like the first command we will learn: [B]Enclosing the letter "B" in brackets means that BBCode understands what you're trying to write is code and not just a letter, and will change the format of the text. The second rule is that every "start" needs an "end". Like enclosing code in brackets, it needs to know how much text it should modify. An "end" command is preceded by a slash / followed by the start command. Like this: [B]Text here[/B]The text in between would be modified by the command in the "start" and stopped by the "end". The command "B" means "Bold" and will bold text encased between the "start" and "end". Exercise 1: A Bold ChoiceTry bolding text without using the commands on the top bar. Use the code above as an example. Make sure to be in the "BBCode" tab when you are typing your code. Need more challenge? Copy and paste this sentence, but only BOLD the words BOLD.
Remember, no using the top bar. DIVS Now that you know the syntax for code, let's learn about DIVS. The command "div" makes a divider, or a box. These are the bread and butter of coding and almost all modifications to text should be done inside of a div. Div has a little bit of associated syntax, and should be formatted like this: [div style="variables here"]text here[/div]All variables must be enclosed within the quotations " ". "style=" is a modifier, but we'll learn about those later. For now, just be sure to type it like the above any time you want to use a div. Div boxes are essential to coding. All text inside them will be formatted according to the rules and variables you set within the div. Things like font-size, color, font-family, and drop-shadow could be added inside of a div to change the text formatting inside. Div boxes are also used for background colors and formatting. Adding borders or padding to backgrounds is done inside the div. Div boxes can do all sorts of cool things once you master them, even things that seem impossible! Here's a simple div box that I used to change the size of text [div style="font-size: 24px;"]text[/div]See how the variables are inside the quotation marks? This is font-size. This variable changes the size of the text inside the box. It takes numbers in pixels (px) as its parameter. A colon : is placed after the variable and before the parameter, and a semicolon ; is placed after the parameter to divide it from other variables. Here's a few variables inside a div. See how the punctuation separates the variables and their parameters? This is a div box that I changed the background color, the font size, and the font. [div style="font-size:18px;font-family:taviraj;padding:5px;background:#222222;"]text[/div]Exercise 2: Growing Up
Let's make a div box that changes the size of text! Use a div box to make your font 18 pixels. Look at the example above if you need a hint. SOME COMMON VARIABLES Now that you know how to modify text using a div box, I can show you a list of variables and their acceptable parameters! You can put several variables in the same div, just be sure to separate them with semicolons. Use my grey box above as an example of how to link several variables in one box. [div style=font-size: 32px;]Font-size[/div]Font-size changes the size of the text, as we've learned in the last exercise. The accepted parameter is number of pixels "px". The default sized font of the forums is 14 for reference. I usually like the content of my posts to be 15-18px depending on font, and titles to be 25px or 32px. [div style=font-family: consolas;]Font[/div]Font-family is the variable that changes the actual font of your text. Check out the "font face" drop down from the top bar to see the fonts that are compatible with proboards. Not all fonts are compatible! Most default fonts on google docs are, however, if you find something you like over there. Not all fonts can be seen on mobile devices either, so be careful which ones you choose if you want other people to be able to read your posts on mobile. Also, some fonts are just hard to read. Use this power carefully and choose a font that is elegant, but legible. |
|
|
|
Post by Brownie on Jun 17, 2022 10:02:57 GMT -5
Save three: Borders Borders are typically formatted like this: [div style="border: style width(px) color(hex/RGB);"][/div]border styles include solid, double, dashed, dotted; 3D[groove, ridge, inset, outset]; Special[none, hidden] ex (all 7px size, #000000 color (black) (with a 10px padding to showcase the border) [div style="border: style 7px #000000; padding:10px;"].[/div]solid . double . dashed . dotted . groove . ridge . inset . outset . There are also alternate ways to code borders if you don't want all four sides the same. You can separate out the border style, size, and color. When you do this, you must use four values; BBCode reads from the TOP and moves CLOCKWISE (formatted like: TOP, RIGHT, BOTTOM, LEFT). In this example: solid(top) dotted(right) dashed(bottom) double(right). If you wanted one (or more) of these sides to not have a border at all, you can use the "none" value. You MUST have four values when describing borders (or only one, in which it will assume all borders are the same, like in my border-width and border-color below). [div style="border-style:solid dotted dashed double; border-width:7px; border-color: #000000;padding:10px;"].[/div]. Color and width can also be extended in this format: (top and bottom: solid black 7px; left and right: double white 7px) [div style="border-style:solid double solid double; border-width:7px 13px 7px 13px; border-color: #000000 #ffffff #000000 #ffffff;padding:10px;"].[/div]. Additionally, you can specify each border separately and modify them individually like so: [div style="border-left: solid 12px #000000;padding:10px;].[/div]. Which, yes, you can do all four individually if you wanted too: [div style="border-left: solid 12px #000000;border-right: solid 8px #000000;border-top: solid 4px #000000;border-bottom: solid 2px #000000;padding:10px;].[/div]. |
|
|
|
Post by Brownie on Jun 17, 2022 10:03:16 GMT -5
Save 4:
A lesson in lines
|
|
|
|
Post by Brownie on Jun 17, 2022 10:03:28 GMT -5
Save 5:
A test of skill
|
|
|
|
Post by Brownie on Jun 17, 2022 10:03:44 GMT -5
Save 6:
More complicated things
|
|
|
|
Post by Brownie on Jun 17, 2022 10:03:59 GMT -5
Save 7:
The really complex stuff
|
|
|
|
Post by Brownie on Jun 17, 2022 10:04:22 GMT -5
Save 8:
Cool things you can do with complicated stuff
|
|
|
|
Post by Brownie on Jun 17, 2022 10:04:35 GMT -5
Save 9:
A final exam
|
|
|
|
Post by Brownie on Jun 17, 2022 10:04:45 GMT -5
Save 10: Extra
|
|
|
|
Post by Brownie on Jun 17, 2022 10:05:23 GMT -5
Save 11:
One more extra
(I have a lot of this sectioned off because code is long and I don't want to have to sift through layers of it to have to edit these sections if I wanted to)
|
|
|
|
Post by Brownie on Jun 17, 2022 10:06:05 GMT -5
OPEN!
There's nothing here yet, but I should be able to finish most of the first four parts by the end of the day
|
|
|
|
Post by Brownie on Mar 2, 2024 21:31:10 GMT -5
man I wrote this a long time ago. Gonna bump it up and maybe do some work on defining as many of the variables that I know work with Proboards HTML
Honestly tho, this lil bit is a good intro to very beginner coding and is still useful as-is.
(If anyone else would like to help/adopt this project lmk)
|
|
|
|
Post by ✧˚ · . ~ Astra`Rise ~ . · ˚✧ on Mar 6, 2024 13:18:30 GMT -5
ok so you suggested ill try lol
Bold choice
Copy and paste this sentence, but only BOLD the words BOLD.
Remember, no using the top bar.
|
|
|
|
Post by Brownie on Mar 6, 2024 21:50:50 GMT -5
ok so you suggested ill try lol Bold choice Copy and paste this sentence, but only BOLD the words BOLD.
Remember, no using the top bar.
you should! learning code is awesome and this teaches the very basics. remember, you need to have an end tag for every start tag, like putting () around the text you want bolded |
|
|
|
Post by Dew on Mar 16, 2024 11:29:46 GMT -5
Wow! Coding is so much more complicated than I thought.
How do you do the bbcode for the border?
|
|
|
|
Post by Brownie on Mar 16, 2024 12:17:05 GMT -5
Borders are typically formatted like this: [div style="border: style width(px) color(hex/RGB);"][/div]border styles include solid, double, dashed, dotted; 3D[groove, ridge, inset, outset]; Special[none, hidden] ex (all 7px size, #000000 color (black) (with a 10px padding to showcase the border) [div style="border: style 7px #000000; padding:10px;"].[/div]solid . double . dashed . dotted . groove . ridge . inset . outset . There are also alternate ways to code borders if you don't want all four sides the same. You can separate out the border style, size, and color. When you do this, you must use four values; BBCode reads from the TOP and moves CLOCKWISE (formatted like: TOP, RIGHT, BOTTOM, LEFT). In this example: solid(top) dotted(right) dashed(bottom) double(right). If you wanted one (or more) of these sides to not have a border at all, you can use the "none" value. You MUST have four values when describing borders (or only one, in which it will assume all borders are the same, like in my border-width and border-color below). [div style="border-style:solid dotted dashed double; border-width:7px; border-color: #000000;padding:10px;"].[/div]. Color and width can also be extended in this format: (top and bottom: solid black 7px; left and right: double white 7px) [div style="border-style:solid double solid double; border-width:7px 13px 7px 13px; border-color: #000000 #ffffff #000000 #ffffff;padding:10px;"].[/div]. Additionally, you can specify each border separately and modify them individually like so: [div style="border-left: solid 12px #000000;padding:10px;].[/div]. Which, yes, you can do all four individually if you wanted too: [div style="border-left: solid 12px #000000;border-right: solid 8px #000000;border-top: solid 4px #000000;border-bottom: solid 2px #000000;padding:10px;].[/div]. |
|
|
|
Post by Brownie on Mar 16, 2024 12:34:26 GMT -5
《🎄○●cøpper●○🎄》okay I think that should be pretty comprehensive of the basics? Hopefully helpful~
|
|
|
|
Post by ✧˚ · . ~ Astra`Rise ~ . · ˚✧ on Apr 2, 2024 17:20:58 GMT -5
so im on the next lesson
and I keep typing the code, it wont bold the background
so tried copying the other code and seeing what I put wrong
and it was the same expect everytime I deleted ;' because it wasnt in the other, it was added back when I checked preview, is this a glitch?
|
|
|
|
Post by Brownie on Apr 2, 2024 21:14:11 GMT -5
so im on the next lesson and I keep typing the code, it wont bold the background so tried copying the other code and seeing what I put wrong and it was the same expect everytime I deleted ;' because it wasnt in the other, it was added back when I checked preview, is this a glitch? Can you put the code you used here? Backgrounds cannot be bold, that doesn't make sense. Bold is only used on text fields. the code for bold is its own tag [b] text here [/b]text hereDivs do need quotes inside the parameters, but you can't put "bold" in there without making it weird: This would be the only way I know of to put bold into a div box, but... it's really weird and unorthodox and I've never, not once, seen a practical application for it. [div style="font-weight:bold;"]text here[/div] |
|
|
|
Post by Brownie on Apr 2, 2024 21:20:17 GMT -5
Also, if you ever want to show another person code, you can either just post as-is and the person can quote your post and see the code through the quote, or you can put code tags around it and it'll make little boxes like this:
(take out the period, though)
[code]CODE HERE[./code]
|
|
|
|
Post by ✧˚ · . ~ Astra`Rise ~ . · ˚✧ on Apr 3, 2024 9:18:31 GMT -5
right so i figured out the problem.... so I was at taviraj and I thought the j was a ] and so I switched it and it fixed so that's a lesson complete yayyy woohoo!! |
|
|
|
Post by Brownie on Apr 3, 2024 13:22:34 GMT -5
right so i figured out the problem.... so I was at taviraj and I thought the j was a ] and so I switched it and it fixed so that's a lesson complete yayyy woohoo!! yeah I probably should change that to like, a font people know. I just love taviraj lmao If you're up for a further challenge, take that div, but make the text: - a different font - a different size - change the background to your favorite color - change the padding to 20px or 50px and to see what that variable does! and if you're feeling extra spicy: - change the text color to black (using code, not the top bar of course) (if you want to know the syntax for that, try looking at the first code on the practice thread [ here] to find the text color variable) - or put a border on it from the above examples (don't make another div, just add the variables into the code line. Remember to separate all variables with a semicolon (;)] |
|
|
|
Post by ᯓ - - > ᥲs𝗍rᥲ ` rіsᥱ : x 🦋 on Oct 22, 2024 12:50:43 GMT -5
back and ready to learn!, lesson three (?) borders!! - Astra Rise!! I also tried doing the background, is there a way to make them merge? I sorta forget lol, like its a scroll- for example my post from April 3rd lol- here |
|
|
|
Post by ᯓ - - > ᥲs𝗍rᥲ ` rіsᥱ : x 🦋 on Nov 8, 2024 16:37:24 GMT -5
I GRADUATE YAYYAYYAYYA!!
|
|
|
|
Post by ᯓ - - > ᥲs𝗍rᥲ ` rіsᥱ : x 🦋 on Nov 8, 2024 16:37:51 GMT -5
back and ready to learn!, lesson three (?) borders!! - Astra Rise!! I also tried doing the background, is there a way to make them merge? I sorta forget lol, like its a scroll- for example my post from April 3rd lol- hereI fixed and learned how to do it! |
|
|
|
Post by 🎄tansypool🪿 on Nov 8, 2024 20:25:57 GMT -5
Copy and paste this sentence, but only BOLD the words BOLD.
|
|
|
|
Post by 🎄tansypool🪿 on Nov 8, 2024 20:31:39 GMT -5
YES I DID IT!!!
|
|
|
|
Post by 🎄tansypool🪿 on Nov 8, 2024 21:19:00 GMT -5
|
|
