Craggy Coding Codex (UC: This might take a while)

Codex Directory: TABLE OF CONTENTS

This will not be referred to as OP (Original Post)

Preface: Resources and the Boring Basics

Questions/Suggestions

Chapter 1: Basic Coding Rules and Etiquette

Chapter 2: Linking

Index of Properties

Chapter 3: Picture Book (Images and GIFs)

Chapter 4: All About Spans

Ancient Manuscript: Old span creations and their code

Chapter 5: Creating Tables

Many spare pages

6 Likes
Preface: RESOURCES AND THE BORING BASICS

This post will be referred to as OP (Original Post)

DISCLAIMER

I’m not an expert plus I’m bad at explaining stuff so this encyclopedia might just end up being a links collection.
Let me know if I got anything wrong and as of right now, I have not edited anything.

If you have something that could go in here, PM me and I’ll add what you write with credit. Otherwise, this thread may never be completed 0.0


THREADS IN FORUMS


NOTES THAT MAY BE IMPORTANT

Differences Between Markdown, BBCode, HTML

Markdown
image

  • Uses this ‘toolbar’: highlight text and click an option to change text OR click an option which gives an outline like this…
    image
    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)
  1. Be careful with how each string is coded. Sometimes, you may need to skip a line for the code to work.
  2. 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

  1. Properties in the example: border, width
  2. Values of border: whatever is after the colon and before the semicolon
  3. Use the right punctuation (colons and semicolons) in the right places or a part of the possible whole code 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

W3schools’ List of Web Safe Fonts
Google Fonts List

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, <i> is the start tag, This is content is content and </i> 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

Headings

Examples

Heading 1

Heading 3

Heading 6
Code for first example
<h1>Heading 1</h1>

Styles (Font, size, colour)

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)

Blockquoting

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…
image
OR
> [words here]


COLOUR

Colour Wheels

Colour Pickers

Colour Palettes

Other colour stuff


Coming soon for original post: Basics of CSS


:blue_heart: UC :blue_heart:

2 Likes


SUGGESTIONS

1 Like
Chapter 1: BASIC CODING RULES AND ETIQUETTE

I only know a few obvious ones but there might be unsaid rules?
Any ideas are welcome

SPECIFICALLY FOR THE FORUMS (Given by the creator of this very forum o.o)

Very important stuff

  • Posts MUST have content (Otherwise isn’t possible anymore)
  • No loooooong posts made with the padding element in spans (Imagine scrolling to what seems like no end…)

GENERAL RULES AND ETIQUETTE

Gathered from time on two forums and reading some guides online

  1. Code with your viewers in mind.
  • Try to make posts that are easy on the eye and visible. (Colour palettes will help)
Beware

This might not be easy on the eye.
The words: This might not be easy on the eye.
Note: Also remember light and dark mode exists. What may look nice on dark might not on light. I messed up too often because I forgot about light’s existence.

  1. Using inspect on elements is totally okay for checking mobile responsiveness but what is not okay? Stealing code (going into someone’s code using this method and copying what they created). Think of it this way…coding is like writing and spans are pieces of artwork. It’s not okay to plagiarize in literature and it’s not okay to trace in art, passing these things as original creations.

  2. Coders spend time to either plan, write, adjust and debug/fix their code I know some do all four with varying time spent. Some code can take up to several hours until the creator feels ready to show it so do not steal. If you wish to learn something, do not be sneaky and ask them. I can’t speak for all coders here but I know I would rather be asked than find someone took the code that caused me to pull out seven white hairs. Maybe this should be the first point…hmm.

  3. Of course, everyone has the right to keep their secrets so please respect the person no matter what the answer is. There will be others who can help. Many coders will be excited to guide or teach what they know.

  4. In the case of a post that looks off (mobile responsiveness/cut off post, text that is difficult to read, cannot be seen on current mode, etc.), a screenshot or private message will suffice. Most coders will appreciate help from others if their code cannot be enjoyed but as always, remember to be polite when sending the screenshot or message. If you are unsure whether they welcome advice/pointing out errors, perhaps reach out to them before sending unsolicited messages.

  5. Believe it or not, everyone has their own aesthetic taste and their own coding style. If a post does not look good to you, it is best to avoid commenting unless the issue found is critical (refer to summary of #1).

1 Like
Chapter 2: LINKING

HTML Link

Link to w3schools.com

Code: <a href="https://www.w3schools.com/html/html_links.asp"> Link to w3schools.com</a>

  • Make sure there are quotation marks around the link or it will not work and be as useful as normal text…the user will see a url but will not be directed anywhere if they click.

Hyperlink Using Markdown

Link to w3schools.com

Steps
  1. On the Markdown toolbar, click the fifth button whose icon looks like a two-link chain.
  2. Next, there is an Insert Hyperlink popup. Simply fill it in and press OK.
  3. Done
  • The basic code is [link title here](link here)
  • Note that for this hyperlink, quotation marks are not needed

Simply Dropping a Link

https://www.w3schools.com/html/html_links.asp

  • The easiest and does not take much effort. Just copy and paste links and an embed will be made automatically.

OR

Make plain links a little more pretty
https://www.w3schools.com/html/html_links.asp

Code
<font size=5<i>https://www.w3schools.com/html/html_links.asp</i></font>


Using an Image as a Link

This image will lead you somewhere. Try it out if you dare.

Code:
<a href="https://www.wattpad.com/home">
<img src="https://www.esafety.gov.au/sites/default/files/2019-09/wattpad_0.png">
</a>

  • <a href> is the location you want to direct users to. Take the url of anything. Note the quotation marks! Also, check if there is no typo or a letter was deleted while copying and pasting.
  • <img src> is the url for the image used to act as a link. Note it has to be in quotation marks too and it has to be .png, .jpeg or .gif. Anything that will give an image when posted without the linking. In other words, image format.
  • Remember to close it with the ending tag </a>

Do NOT use the Markdown “upload” tool for this.


Check where a link would lead to

  • On most PCs: Hover the cursor over the link and check URL in bottom left corner
  • I’m not sure if this works for other devices but try pressing a link for a longer time until there is a popup
From my tablet

20201028_183747


Coming soon for linking: Coloured links, video links and embeds(?)
Let me know if something is wrong.

1 Like

LIST TABLE OF PROPERTIES, VALUES AND USAGE (Coming soon?)

Reserved

Picture Book (UC)

Images and GIFs

Definitions

Image: Visual representations of them and also called graphics. Electronically, graphics can be either raster or vector. (Differences between the two will be explained in another summary)

Image file formats: standardized ways to organize and store digital images, storing data in uncompressed, compressed or vector format.

Graphics Interchange Format/GIFs: small animations and video footage.


Image File Formats

Most common: jpg, tif, png, and gif

Wackywriters forums: jpg, jpeg, png, gif, heic, heif, mp4, mp3

Note: On these forums, JPG, PNG and GIF are most commonly used. Some file formats are not allowed including zip and svg.


Raster Vs. Vector

Raster=PNG
Vector=SVG


On these forums, raster is used.


Uploading Images
Using a link (PC)
Steps

Fairly simple.
Step 1: Find image in browser
Step 2: Copy image
Step 3: Copy and paste into post being made. The image will appear automatically
Done

Example

![image|281x180](upload://2VcehbHV2sagkvaNhkrTHYclixN.jpeg)

image


Using a link (Mobile)

Note: By mobile, I am referring to my tablet since that’s the closest thing I have to a phone. If you have a phone and use links to share images, what are the steps? I doubt this is important information so I’ll just put whatever I know and not guess.

Steps

Step 1: Find an image in browser
Step 2: Open image in a new tab
Step 3: Grab the link
Step 4: Copy and paste into post being made
Done!


Using the markdown toolbar (as long as you have the forums, it works o.-)

image|100%
Remember this? (From OP)

To upload images using this tool, there are a few ways.

Upload Button

Step 1: Press/click this
image|100%
Step 2: See This?


Good
Step 3: Pick one of two ways
image

Way 1: From device
image|100%
Select a file from your device
Way 2: From the web
image|100%
Simple enough

Step 4: Upload…Click this
image|100%
Done

Add an image
  • Using the 13th button on the toolbar
  1. Select this
    image
    You will see [img]http://[/img]
  2. Insert the URL by replacing http:// with the image’s link

[img]https://brdiamonds.com/blog/wp-content/uploads/2018/02/shutterstock_355046207-1080x810.jpg[/img]


Uploading Graphics Interchange Format (GIFs)

All you need is a link for the graphic…Tumblr is a great source for GIFs. (I did not use it for the example)

http://cdn.lowgif.com/full/f2806e5ea48f3991-shooting-star-gif-hashtag-images-on-tumblr-gramunion.gif


Changing Image Size

Here’s the original. It’s huge, isn’t it?

https://png.pngtree.com/thumb_back/fw800/background/20190222/ourmid/pngtree-water-ripple-%E6%B6%9F%E6%BC%AA-h5-background-waveripplewater-patterngradientrotateblueminimalism-image_52314.jpg

There are a few ways to change image size.

Sometimes, you see this

image
Select the size you want and see how size changes.

Using width and height dimensions in pixels

Original

![](https://png.pngtree.com/thumb_back/fw800/background/20190222/ourmid/pngtree-water-ripple-%E6%B6%9F%E6%BC%AA-h5-background-waveripplewater-patterngradientrotateblueminimalism-image_52314.jpg)

200x300 (change will be *change*)

![*200x300*](https://png.pngtree.com/thumb_back/fw800/background/20190222/ourmid/pngtree-water-ripple-%E6%B6%9F%E6%BC%AA-h5-background-waveripplewater-patterngradientrotateblueminimalism-image_52314.jpg)

70x50

![*70x50*](https://png.pngtree.com/thumb_back/fw800/background/20190222/ourmid/pngtree-water-ripple-%E6%B6%9F%E6%BC%AA-h5-background-waveripplewater-patterngradientrotateblueminimalism-image_52314.jpg)

Note: When using this method, the numbers go inside the square brackets, width x height

Using percentages

Original

![clear-blue-sky|690x388](upload://Iek2KfscVcNqacc3S0UnNptbEi.jpeg)

75%

![clear-blue-sky|690x388, 75%](upload://Iek2KfscVcNqacc3S0UnNptbEi.jpeg)

45%

![clear-blue-sky|690x388, 45%](upload://Iek2KfscVcNqacc3S0UnNptbEi.jpeg)

1 Like

ALL ABOUT SPANS (Coming soon?)

This topic is probably what most aspiring coders on these forums will look for. I was one of them. Instead of lurking and refraining from asking “how’d you do that”, newer coders can come here but many would be willing to share their secrets.

Copying + pasting, stealing/copying by inspecting elements is also not good which will be a topic in here. I might also share some old, simple code but it’s 100% better to create posts your way by understanding the art of cosing. We’ll see though.


SPAN TAGS

The <span> tag

The <span> tag is an inline container. I won’t go deep into what that means beacause a)I don’t know much and b)I don’t there is much to know except for this. Anyway, to make a span, there is an ‘opening’ and ‘closing’ tag. For span, start everything with <span> and end everything with </span>. Many coders feel lazy and leave the closing tag out but sometimes, this will make a mess so try to use </span> always…to avoid having strings of code run longer than intended.
For coding, we use

<span style="(stuff go in here that will be talked about below)">Maybe you write some stuff in here</span>

DISPLAY PROPERTY AND DIFFERENT VALUES

  • Display: block
  • Display: inline
  • Display: inline-block

THINGS ABOUT WIDTH AND HEIGHT

  • Undefined widths (no value assigned)
  • Using percentage

MARGIN AND PADDING

  • Padding
  • Margin

BASIC FORMAT (PLAIN RECTANGLE)
BASIC FORMAT WITH TEXT
BORDER AND OUTLINE

  • Types of borders
  • Border radius
  • Combination of border types

GRADIENT BACKGROUND

  • Linear

SPAN IN A SPAN
OPACITY
BACKGROUND IMAGE/GIF
BORDER IMAGE/GIF
COMBINATION OF BACKGROUND + BORDER IMAGE/GIF
SCROLL BARS (X+Y)
HIDING SCROLL BARS
WEB UNITS COMPARISON/USES

  • px
  • pc
  • rem
  • vw

OLD CODE FOR REFERENCE (A bit iffy)

There is 85% chance this will be deleted because I might not go through with sharing span examples and their code. However, if you go into my coding lab and find something you like but can’t figure out, just ask in PM.
Disclaimer: I might not be giving 100% answers.

CREATING TABLES (Coming soon…hopefully)

Does anyone have ideas of what tables are good for in forums? I only have 1 or 2 ideas >.<

RESERVED

Whether this will be needed or not…it’ll be here.

RESERVED #2

Whether this will be needed or not…it’ll be here.

RESERVED #3

Whether this will be needed or not…it’ll be here.

2 Likes

RESERVED #4

Whether this will be needed or not…it’ll be here.

1 Like

RESERVED #5

Whether this will be needed or not…it’ll be here.

1 Like

Finished switching around some things because I decided to include a table of contents (-_-).
Although the TOC is the first/original post, I will not be using it as the OP. If ever mentioned, I will use TOC.

Last 2 posts will be deleted transformed very soon so if there’s anything to change in the TOC, OP or here, let me know. After those two posts are deleted, reach out through PM.

Now, off to explaining basic stuff about uploading images and gifs. AKA another topic that might not need explanation but…:woman_shrugging:
Or maybe I’ll lose my patience and jump straight to :sparkles: Spans :sparkles:


:blue_heart:

1 Like

Wow, I haven’t been here in a long time but I hope to get back to filling stuff in after final exams which are in December. T-T

In about one month, spans would be my main focus and perhaps it’ll be finished by 2021.
To anyone who has finals soon, good luck!


:blue_heart: