# Craggy Coding Codex (UC: This might take a while) **URL:** \ **Category:** Coding Wizards\ **Created:** [October 28, 2020, 9:18pm UTC](https://forum.wackywriters.com/t/craggy-coding-codex-uc-this-might-take-a-while/5192 "2020-10-28T21:18:49Z")\ **Posts on this page:** 16\ **Page:** 1
**Author:** ![ValKayRee](https://forum.wackywriters.com/user_avatar/forum.wackywriters.com/valkayree/32/208_2.png) [@ValKayRee](https://forum.wackywriters.com/u/ValKayRee)\ **Post date:** [October 28, 2020, 9:18pm UTC](https://forum.wackywriters.com/t/craggy-coding-codex-uc-this-might-take-a-while/5192/1 "2020-10-28T21:18:49Z")
Codex Directory: TABLE OF CONTENTS This will not be referred to as OP (Original Post) [Preface: Resources and the Boring Basics](https://forum.wackywriters.com/t/untrustworthy-coding-codex-uc-this-might-take-a-while/5192/2) [Questions/Suggestions](https://forum.wackywriters.com/t/untrustworthy-coding-codex-uc-this-might-take-a-while/5192/3) [Chapter 1: Basic Coding Rules and Etiquette](https://forum.wackywriters.com/t/untrustworthy-coding-codex-uc-this-might-take-a-while/5192/4) [Chapter 2: Linking](https://forum.wackywriters.com/t/untrustworthy-coding-codex-uc-this-might-take-a-while/5192/5) [Index of Properties](https://forum.wackywriters.com/t/untrustworthy-coding-codex-uc-this-might-take-a-while/5192/6) [Chapter 3: Picture Book (Images and GIFs)](https://forum.wackywriters.com/t/untrustworthy-coding-codex-uc-this-might-take-a-while/5192/7) [Chapter 4: All About Spans](https://forum.wackywriters.com/t/untrustworthy-coding-codex-uc-this-might-take-a-while/5192/8) [Ancient Manuscript: Old span creations and their code](https://forum.wackywriters.com/t/untrustworthy-coding-codex-uc-this-might-take-a-while/5192/9) [Chapter 5: Creating Tables](https://forum.wackywriters.com/t/untrustworthy-coding-codex-uc-this-might-take-a-while/5192/10) Many spare pages ---
**Author:** ![ValKayRee](https://forum.wackywriters.com/user_avatar/forum.wackywriters.com/valkayree/32/208_2.png) [@ValKayRee](https://forum.wackywriters.com/u/ValKayRee)\ **Post date:** [October 28, 2020, 9:21pm UTC](https://forum.wackywriters.com/t/craggy-coding-codex-uc-this-might-take-a-while/5192/2 "2020-10-28T21:21:20Z")
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** - [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)](https://forum.wackywriters.com/t/coding-101/1172) 12/10 recommend lurking. Most of my knowledge comes from here and it’s more comprehensible than what this thread will become. - [Coding Resource Megathread (Basically, a bunch of links to resources for Markdown, BBCode, HTML and other good stuffs)](https://forum.wackywriters.com/t/coding-resource-megathread/643/1) - [The Coder’s Society (Place for testing stuff, lurking and asking about how to do things)](https://forum.wackywriters.com/t/i-the-coders-society/1246) I rarely lurk here but it’s cool * * * **NOTES THAT MAY BE IMPORTANT** > **Differences Between Markdown, BBCode, HTML** > > Markdown > ![image](https://wacky-storage.nyc3.digitaloceanspaces.com/original/2X/e/e4d4633c0a09cd0c671d8d10a436ef0cc8557416.png) > > - Uses this ‘toolbar’: highlight text and click an option to change text OR click an option which gives an outline like this… > ![image](https://wacky-storage.nyc3.digitaloceanspaces.com/original/2X/f/ffa8908b5a2c8ef5fe00ca299c8d4b0346353bfe.png) > 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:

Heading` > > - 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](https://www.w3schools.com/cssref/css_websafe_fonts.asp) > [Google Fonts List](https://www.w3schools.com/howto/howto_google_fonts.asp) > **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](https://www.w3schools.com/default.asp))** > **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 > `This is content` > 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** > > [Headings](https://www.w3schools.com/html/html_headings.asp) > > > **Examples** > > > > # Heading 1 > > > > ### Heading 3 > > > > ###### Heading 6 > > > **Code for first example** > > > > ``` > >

Heading 1

> > > > ``` > > * * * > > [Styles (Font, size, colour)](https://www.w3schools.com/html/html_styles.asp) > > > **Examples** > > > > The font size of this text is 6 > > The font color of this text is PLUM > > This is red > > > **Code for examples** > > > > ``` > > The font size of this text is 6 > > The font color of this text is PLUM > > This is red > > > > ``` > > * * * > > [Formatting (Italics, bold, subscript, superscript, etc.)](https://www.w3schools.com/html/html_formatting.asp) > > > **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_** > > Well_Hello_There (Mix of italics and superscript) > > > **Code for 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) > > > > ``` > > * * * > > [Blockquoting](https://www.w3schools.com/html/html_quotation_elements.asp) > > > **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** > > > > `
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
` > > For quoting comments on forums… > ![image](https://wacky-storage.nyc3.digitaloceanspaces.com/original/2X/a/a80c1eb3963cc22d0fa4ac2c9eebaac801989c78.png) > OR > \> [words here] * * * **COLOUR** _Colour Wheels_ - [From w3schools.com](https://www.w3schools.com/colors/colors_wheels.asp) _Colour Pickers_ - [Colour Picker From Google Search](https://www.google.com/search?q=hex+color&oq=hex+&aqs=chrome.0.35i39j69i57j0l4.1494j0j7&sourceid=chrome&ie=UTF-8) - [Colour Picker from w3schools.com](https://www.w3schools.com/colors/colors_picker.asp) _Colour Palettes_ - [Some Colour Schemes](https://hookagency.com/color-schemes/) - [Paletton.com](https://paletton.com/#uid=14W0u0kllll04++00-P++93+N00) - [ColorSpace](https://mycolor.space/?hex=%233D2564&sub=1) Pick a colour and colour palettes will be generated _Other colour stuff_ - [Text Colourizer (BBCode and HTML: gradient text)](https://www.stuffbydavid.com/textcolorizer) - [Colour Gradient from w3schools.com](https://www.w3schools.com/colors/colors_gradient.asp) - [Colour Mixer from w3schools.com](https://www.w3schools.com/colors/colors_mixer.asp) Mix two colours together and get HEX codes - [Colour Shades from w3schools.com](https://www.w3schools.com/colors/colors_shades.asp) Gives tables of shades of gray and red, explains colours, list of ‘Web Safe Colours’ * * * Coming soon for original post: Basics of CSS * * * 💙 UC 💙 ---
**Author:** ![ValKayRee](https://forum.wackywriters.com/user_avatar/forum.wackywriters.com/valkayree/32/208_2.png) [@ValKayRee](https://forum.wackywriters.com/u/ValKayRee)\ **Post date:** [October 28, 2020, 9:23pm UTC](https://forum.wackywriters.com/t/craggy-coding-codex-uc-this-might-take-a-while/5192/3 "2020-10-28T21:23:04Z")
SUGGESTIONS - 1. 2. 3. 4. ---
**Author:** ![ValKayRee](https://forum.wackywriters.com/user_avatar/forum.wackywriters.com/valkayree/32/208_2.png) [@ValKayRee](https://forum.wackywriters.com/u/ValKayRee)\ **Post date:** [October 28, 2020, 9:44pm UTC](https://forum.wackywriters.com/t/craggy-coding-codex-uc-this-might-take-a-while/5192/4 "2020-10-28T21:44:40Z")
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](https://forum.wackywriters.com/t/rules-for-using-markup-bbcode-html-in-these-forums/897/3) - 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). ---
**Author:** ![ValKayRee](https://forum.wackywriters.com/user_avatar/forum.wackywriters.com/valkayree/32/208_2.png) [@ValKayRee](https://forum.wackywriters.com/u/ValKayRee)\ **Post date:** [October 28, 2020, 9:49pm UTC](https://forum.wackywriters.com/t/craggy-coding-codex-uc-this-might-take-a-while/5192/5 "2020-10-28T21:49:19Z")
Chapter 2: LINKING HTML Link [Link to w3schools.com](https://www.w3schools.com/html/html_links.asp) > Code: ` Link to w3schools.com` - 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](https://www.w3schools.com/html/html_links.asp) > **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 > **[HTML Links Hyperlinks](https://www.w3schools.com/html/html_links.asp)** > > W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. > ` 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 _[HTML Links Hyperlinks](https://www.w3schools.com/html/html_links.asp)_ > Code > `https://www.w3schools.com/html/html_links.asp` * * * Using an Image as a Link [![](upload://tt9bXmpOPD5SKT722lllYM92G7Q.png) ](https://www.wattpad.com/home)This image will lead you somewhere. Try it out if you dare. > Code: > `` > `![](upload://tt9bXmpOPD5SKT722lllYM92G7Q.png)` > `` - `` 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. - `` 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 `` **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](https://storage.wackywriters.com/original/2X/c/c1e4844e5232b4879aeb0d68016ae701ce223e03.jpeg) * * * Coming soon for linking: Coloured links, video links and embeds(?) Let me know if something is wrong. ---
**Author:** ![ValKayRee](https://forum.wackywriters.com/user_avatar/forum.wackywriters.com/valkayree/32/208_2.png) [@ValKayRee](https://forum.wackywriters.com/u/ValKayRee)\ **Post date:** [October 28, 2020, 9:51pm UTC](https://forum.wackywriters.com/t/craggy-coding-codex-uc-this-might-take-a-while/5192/6 "2020-10-28T21:51:04Z")
# LIST ~~TABLE~~ OF PROPERTIES, VALUES AND USAGE (Coming soon?) Reserved ---
**Author:** ![ValKayRee](https://forum.wackywriters.com/user_avatar/forum.wackywriters.com/valkayree/32/208_2.png) [@ValKayRee](https://forum.wackywriters.com/u/ValKayRee)\ **Post date:** [October 28, 2020, 10:00pm UTC](https://forum.wackywriters.com/t/craggy-coding-codex-uc-this-might-take-a-while/5192/7 "2020-10-28T22:00:39Z")
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 > ![](https://storage.wackywriters.com/original/3X/7/9/7986700080655b355acf42d3da56dffff53f3c4d.png) > > ![](https://storage.wackywriters.com/original/3X/4/d/4d524328f800c715142b9239126fb8d612d60383.jpeg) > **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](https://storage.wackywriters.com/original/2X/1/147b89f53e7270ba7c41194a7e083ba9bad51c4f.jpeg) * * * > **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%](https://storage.wackywriters.com/original/2X/6/692c35f65d88d7c8ae31690a15b4a8223872516a.png) > Remember this? (From OP) > > To upload images using this tool, there are a few ways. > > > **Upload Button** > > > > Step 1: Press/click this > > ![image|100%](https://storage.wackywriters.com/original/2X/4/41bba4e9dbf0f54581697079f201132eadfc54cd.png) > > Step 2: See This? > > > > ![image|100%](https://storage.wackywriters.com/original/2X/7/7378e9b6c8e686e1935053f1e4299ae2f104e07b.png) > > Good > > Step 3: Pick one of two ways > > ![image](https://storage.wackywriters.com/original/2X/8/83a9139871a3817964738e2c2503717f85f66b0b.png) > > > > Way 1: From device > > ![image|100%](https://storage.wackywriters.com/original/2X/3/305ce778519e571c003ab29b8d688161a778c24f.png) > > Select a file from your device > > Way 2: From the web > > ![image|100%](https://storage.wackywriters.com/original/2X/1/164aedc1baea3560c86b273b32edb4a05fd40e26.png) > > Simple enough > > > > Step 4: Upload…Click this > > ![image|100%](https://storage.wackywriters.com/original/2X/a/a59d71c0409904c149b5ae82934f6aff62d0d214.png) > > Done > > > **Add an image** > > > > - Using the 13th button on the toolbar > > > > 1. Select this > > ![image](https://storage.wackywriters.com/original/2X/a/ac40b3f411192054661a6fbe21f50aa277ec60d4.png) > > You will see `[img]http://[/img]` > > 2. Insert the URL by replacing http:// with the image’s link > > ![](https://storage.wackywriters.com/original/3X/6/b/6b45f9822044157c3be2c17d4b01ad04c5ff6329.jpeg) > > > > > `![](upload://fiZ0zOqUTTHVUuMnrXvF6UxAyQp.jpeg)` * * * Uploading Graphics Interchange Format (GIFs) All you need is a link for the graphic…[Tumblr](https://www.tumblr.com/) is a great source for GIFs. (I did not use it for the example) ![](https://storage.wackywriters.com/original/3X/8/8/882fcfa1d829372b7adf19414e57bb71c9b358f3.gif) > `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://storage.wackywriters.com/original/3X/5/a/5a8e143dc7d8a5e1a7d7cb45f17e07f7be3c085a.jpeg) > `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](https://storage.wackywriters.com/original/2X/c/c22fa346b5fc03513ee2b794efc6b7bd4e0f875a.png) > Select the size you want and see how size changes. > **Using width and height dimensions in pixels** > > Original > > ![](https://storage.wackywriters.com/original/3X/5/a/5a8e143dc7d8a5e1a7d7cb45f17e07f7be3c085a.jpeg) > > > `![](upload://cV5ngNO9rsBMKmdcxenlFjSkdVU.jpeg)` > > 200x300 (change will be `*change*`) > > ![200x300](https://storage.wackywriters.com/original/3X/5/a/5a8e143dc7d8a5e1a7d7cb45f17e07f7be3c085a.jpeg) > > > `![*200x300*](upload://cV5ngNO9rsBMKmdcxenlFjSkdVU.jpeg)` > > 70x50 > > ![70x50](https://storage.wackywriters.com/original/3X/5/a/5a8e143dc7d8a5e1a7d7cb45f17e07f7be3c085a.jpeg) > > > `![*70x50*](upload://cV5ngNO9rsBMKmdcxenlFjSkdVU.jpeg)` > > **Note: When using this method, the numbers go inside the square brackets, width x height** > **Using percentages** > > Original > > ![clear-blue-sky](https://storage.wackywriters.com/original/2X/0/04fff8589252e47b1ab52259bf692d3f61380636.jpeg) > > > `![clear-blue-sky|690x388](upload://Iek2KfscVcNqacc3S0UnNptbEi.jpeg)` > > 75% > > ![clear-blue-sky](https://storage.wackywriters.com/original/2X/0/04fff8589252e47b1ab52259bf692d3f61380636.jpeg) > > > `![clear-blue-sky|690x388, 75%](upload://Iek2KfscVcNqacc3S0UnNptbEi.jpeg)` > > 45% > > ![clear-blue-sky](https://storage.wackywriters.com/original/2X/0/04fff8589252e47b1ab52259bf692d3f61380636.jpeg) > > > `![clear-blue-sky|690x388, 45%](upload://Iek2KfscVcNqacc3S0UnNptbEi.jpeg)` ---
**Author:** ![ValKayRee](https://forum.wackywriters.com/user_avatar/forum.wackywriters.com/valkayree/32/208_2.png) [@ValKayRee](https://forum.wackywriters.com/u/ValKayRee)\ **Post date:** [October 28, 2020, 10:08pm UTC](https://forum.wackywriters.com/t/craggy-coding-codex-uc-this-might-take-a-while/5192/8 "2020-10-28T22:08:47Z")
# 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](https://forum.wackywriters.com/t/the-untrustworthy-codex-of-coding-uc-this-might-take-a-while/5192/4). 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 \ tag** > > The `` 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 `` and end everything with ``. Many coders feel lazy and leave the closing tag out but sometimes, this will make a mess so try to use `` always…to avoid having strings of code run longer than intended. > For coding, we use > > ``` > Maybe you write some stuff in here > > ``` 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 ---
**Author:** ![ValKayRee](https://forum.wackywriters.com/user_avatar/forum.wackywriters.com/valkayree/32/208_2.png) [@ValKayRee](https://forum.wackywriters.com/u/ValKayRee)\ **Post date:** [October 28, 2020, 10:14pm UTC](https://forum.wackywriters.com/t/craggy-coding-codex-uc-this-might-take-a-while/5192/9 "2020-10-28T22:14:29Z")
# 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.** ---
**Author:** ![ValKayRee](https://forum.wackywriters.com/user_avatar/forum.wackywriters.com/valkayree/32/208_2.png) [@ValKayRee](https://forum.wackywriters.com/u/ValKayRee)\ **Post date:** [October 28, 2020, 10:16pm UTC](https://forum.wackywriters.com/t/craggy-coding-codex-uc-this-might-take-a-while/5192/10 "2020-10-28T22:16:05Z")
# CREATING TABLES (Coming soon…hopefully) ~~Does anyone have ideas of what tables are good for in forums? I only have 1 or 2 ideas \>.\<~~ ---
**Author:** ![ValKayRee](https://forum.wackywriters.com/user_avatar/forum.wackywriters.com/valkayree/32/208_2.png) [@ValKayRee](https://forum.wackywriters.com/u/ValKayRee)\ **Post date:** [October 28, 2020, 10:17pm UTC](https://forum.wackywriters.com/t/craggy-coding-codex-uc-this-might-take-a-while/5192/11 "2020-10-28T22:17:17Z")
# RESERVED Whether this will be needed or not..it’ll be here. ---
**Author:** ![ValKayRee](https://forum.wackywriters.com/user_avatar/forum.wackywriters.com/valkayree/32/208_2.png) [@ValKayRee](https://forum.wackywriters.com/u/ValKayRee)\ **Post date:** [October 28, 2020, 10:17pm UTC](https://forum.wackywriters.com/t/craggy-coding-codex-uc-this-might-take-a-while/5192/12 "2020-10-28T22:17:42Z")
# RESERVED #2 Whether this will be needed or not..it’ll be here. ---
**Author:** ![ValKayRee](https://forum.wackywriters.com/user_avatar/forum.wackywriters.com/valkayree/32/208_2.png) [@ValKayRee](https://forum.wackywriters.com/u/ValKayRee)\ **Post date:** [October 28, 2020, 10:21pm UTC](https://forum.wackywriters.com/t/craggy-coding-codex-uc-this-might-take-a-while/5192/13 "2020-10-28T22:21:09Z")
# RESERVED #3 Whether this will be needed or not..it’ll be here. ---
**Author:** ![ValKayRee](https://forum.wackywriters.com/user_avatar/forum.wackywriters.com/valkayree/32/208_2.png) [@ValKayRee](https://forum.wackywriters.com/u/ValKayRee)\ **Post date:** [October 29, 2020, 1:39am UTC](https://forum.wackywriters.com/t/craggy-coding-codex-uc-this-might-take-a-while/5192/14 "2020-10-29T01:39:39Z")
# RESERVED #4 Whether this will be needed or not..it’ll be here. ---
**Author:** ![ValKayRee](https://forum.wackywriters.com/user_avatar/forum.wackywriters.com/valkayree/32/208_2.png) [@ValKayRee](https://forum.wackywriters.com/u/ValKayRee)\ **Post date:** [October 29, 2020, 2:17am UTC](https://forum.wackywriters.com/t/craggy-coding-codex-uc-this-might-take-a-while/5192/15 "2020-10-29T02:17:16Z")
# RESERVED #5 Whether this will be needed or not..it’ll be here. ---
**Author:** ![ValKayRee](https://forum.wackywriters.com/user_avatar/forum.wackywriters.com/valkayree/32/208_2.png) [@ValKayRee](https://forum.wackywriters.com/u/ValKayRee)\ **Post date:** [October 29, 2020, 4:37pm UTC](https://forum.wackywriters.com/t/craggy-coding-codex-uc-this-might-take-a-while/5192/16 "2020-10-29T16:37:58Z")
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](https://forum.wackywriters.com/t/untrustworthy-coding-codex-uc-this-might-take-a-while/5192/4), 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…🤷‍♀️ ~~Or maybe I’ll lose my patience and jump straight to [✨ Spans ✨](https://forum.wackywriters.com/t/untrustworthy-coding-codex-uc-this-might-take-a-while/5192/8)~~ * * * 💙