RESOURCES-UC
(Let me know if I got anything wrong, I’m not an expert but I do this for fun)
THREADS IN FORUMS
- Coding class hosted by astrophile (there are coding assignments you can look at but please test them outside of Coding 101 like in your own thread or Coder’s Society) 12/10 recommend lurking
- Coding Resource Megathread (Basically, a bunch of links to resources for Markdown, BBCode, HTML and other good stuffs)
- The Coder’s Society (Place for testing stuff, lurking and asking about how to do things) I rarely lurk here but it’s cool
NOTES THAT MAY BE IMPORTANT
Differences Between Markdown, BBCode, HTML
Markdown
- Uses this ‘toolbar’: highlight text and click an option to change text OR click an option which gives an outline like this…
Then, replace highlighted part with your text
- Markdown is great for quickly making lists, polls, summaries, blurring words/sentences, getting preformatted text, hyperlinking, underlining, italicizing, etc…
Yet it has many limitations. BBCode and HTML can do many more things.
BBCode
- Uses square brackets
Example: [color=red]Text Here[/color]
HTML
- Uses <>
Example: <h1>Heading</h>
- HTML is great for coding with CSS to make what everyone likes: span.
Mixing Code (BBCode and HTML)
- Be careful with how each string is coded. Sometimes, you may need to skip a line for the code to work.
- Mixing Markdown with BBCode or HTML is fairly simple.
Properties Vs. Values
Say we are creating a post and somewhere in the code is this: border: 6px red dotted; width: 40px; height: 30px
- Properties in the example: border, width
- Values of border: whatever is after the colon and before the semicolon
- Use the right punctuation (colons and semicolons) in the right places or a part of the
possible wholecode will not work
To put it simply because I am not familiar with coding jargon, a property can be seen as a post’s characteristics and the values given to property are finer details.
Mobile Responsiveness
This one is a doozy but when one codes a span post, there will be times other users on other devices will say the beautiful image that was coded seems cut off. Do not worry, there are ways to fix this. I still struggle with this so if anyone knows a foolproof way, please post or tell me.
1-Code within a width of 300px (I did this for the first time to improvise dealing with a smaller screen but…it looked so narrow and just ugly so what else is there to do?)
2-px is used for fixed sizes so if your size goes over 300px, use a responsive unit. I used rem and vw. They should work
How do you check? Simple!
Inspect Element and find Responsive Design Mode (also Ctrl+Shift+M if I am not wrong). Then, there will be a portion of the thread that pops up. Pick a device you want to see ‘from’, adjust the height if needed, maybe scroll down a bit and if the post is not cut off, users using the device should not have problems viewing your creation. If the post is still cut off, try to figure out what went wrong whether it is the web unit being used or width length.
FONTS
Web Safe Fonts
Example
This is times new roman
Code for Example
[font="times new roman"]This is times new roman[/font]
Removing the quotation marks is fine too I do it and have not run into any issues yet
W3SCHOOLS (WEBSITE HOMEPAGE)
Notes for HTML
- HTML elements are defined by start tags, content and an end tag. Tagnames will be identified in the example along with these things.
- Usage of end tags are recommended even when code works without them.
Example
<i>This is content</i>
In this example, is the start tag, This is content is content and is the end tag.
Note that the code will run until there is an end tag and despite looking the same, there is a slash in the end tag. Also, the tagname here is “i” which means italics.
HTML
Examples
Heading 1
Heading 3
Heading 6
Code for first example
<h1>Heading 1</h1>
Examples
The font size of this text is 6
The font color of this text is PLUM
This is red
Code for examples
<font size=6>The font size of this text is 6</font>
<font color=plum>The font color of this text is PLUM</font>
<font size=1><font color=red>This is red</font></font>
Formatting (Italics, bold, subscript, superscript, etc.)
Examples
Font size is 6
This is italicized
This is bold
This is smaller text
This is deleted text
Inserted text
H2O (Subscript)
n2 (Superscript)
Mix of bold and italics
WellHelloThere (Mix of italics and superscript)
Code for examples
<font size=6>Font size is 6</font>
<i>This is italicized</i>
<b>This is bold</b>
<small>This is smaller text</small>
<del>This is deleted text</del>
<ins>Inserted text</ins>
H<sub>2</sub>O (Subscript)
n<sup>2</sup> (Superscript)
<b><i>Mix of bold and italics</b></i>
Well<i><sup>Hello</i></sup>There (Mix of italics and superscript)
Example
This is a blockquote. On the forums, you can quote a user by highlighting their words and clicking "QUOTE when it pops up. However, one use for this in threads is quoting or identifying text from sources outside of the forums such as websites
Code for example
<blockquote>This is a blockquote. On the forums, you can quote a user by highlighting their words and clicking "QUOTE when it pops up. However, one use for this in threads is quoting or identifying text from sources <i>outside of the forums</i> such as websites</blockquote>
For quoting comments on forums…
OR
> words here
COLOUR
Colour Wheels
Colour Pickers
Colour Palettes
- Some Colour Schemes
- Paletton.com
- ColorSpace Pick a colour and colour palettes will be generated
Other colour stuff
- Text Colourizer (BBCode and HTML: gradient text)
- Colour Gradient from w3schools.com
- Colour Mixer from w3schools.com Mix two colours together and get HEX codes
- Colour Shades from w3schools.com Gives tables of shades of gray and red, explains colours, list of ‘Web Safe Colours’
Below in posts will be:
- Suggestion Wiki
- Basic Coding Rules
- Linking
- List of Properties + Values, and Usage
- Images/gifs
- All About Spans
- Creating Tables
- Some additional spots reserved for any topic that does not fit in these categories/original post
