Procrastination and Coding (Lab)

ValKayRee · September 23, 2020, 7:28pm

Yessss, welcome! ~~I have been keeping myself busy by playing around for hours lol~~
Oh, okey. I guess just…lurk or chat then.

sighs in relief thanks. Explaining from the basics and up is not my forte plus…I always assume people coming here know as much as me ~~which is not a lot yet lol~~. Have fun teaching.

astrophile · September 23, 2020, 7:31pm

Okay, so I recommend you dig deeper into inline CSS and how to use it with spans.

Once you do that, you should have the foundation needed to make code scroll.

Ah, no problem. It’s always good to check how much people know before diving into explanations. I’m not really here for a full-on lesson, just redirecting to other resources for now. ~~I still need to write up unit 7 since it covers material I didn’t cover the last time I taught the course.~~

NightStar · September 23, 2020, 7:32pm

~~but how do I do that?~~

astrophile · September 23, 2020, 7:33pm

If only there was a thread where someone writes assignments and posts them for all to see.

cough

https://forum.wackywriters.com/t/coding-101/1172/6

NightStar · September 23, 2020, 7:37pm

lmao im heading there

astrophile · September 23, 2020, 7:38pm

Just as a reminder: Feel free to post it in The Coding Playground (no talking to others allowed there) or The Coder’s Society (talking to others allowed here) if you do the assignments.

Anyways, sorry for derailing, Val. I think that covers everything I wanted to say.

ValKayRee · September 23, 2020, 7:54pm

Oh, no, you didn’t derail (imo) and I was just there but didn’t have the brain to direct to the thread lol.
Thank you for the help. ~~Might have to add links to different threads like the resources and coding 101, some sites…But it can’t go in the first post since not many look at it…we shall see~~

ValKayRee · September 23, 2020, 8:14pm

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 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
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

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
H₂O (Subscript)
n² (Superscript)
Mix of bold and italics
Well^HelloThere (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 outside of the forums such as websites</blockquote>

For quoting comments on forums…

OR
> words here

COLOUR

Colour Wheels

From w3schools.com

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

ValKayRee · September 23, 2020, 10:07pm

LINKS

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

On the Markdown toolbar, click the fifth button whose icon looks like a two-link chain.
Next, there is an Insert Hyperlink popup. Simply fill it in and press OK.
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

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

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

Using an Image as a Link

![](upload://tt9bXmpOPD5SKT722lllYM92G7Q.png) This image will lead you somewhere. Try it out if you dare.

Code:
<a href="https://www.wattpad.com/home">
![](upload://tt9bXmpOPD5SKT722lllYM92G7Q.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.

ValKayRee · September 24, 2020, 12:14am

lst-my-shp-sil · September 24, 2020, 12:14am

Ooh, pretty!

ValKayRee · September 24, 2020, 12:17am

Ah, thank you! The actual thread design I took this from is still UC and it took forever.

ValKayRee · September 25, 2020, 3:08am

TESTING TABLES

Tag (Refer to Notes for HTML in original post)	Description	When To Use
a	Defines a hyperlink	When using hyperlinks

ValKayRee · September 29, 2020, 6:36pm

TESTING

~ ~ Garden of Violets ~ ~

WISTERIA CROCUS HYDRANGEA

HYACINTH

This should be enough

ValKayRee · October 6, 2020, 4:44pm

FOR NEWEST ASSIGNMENT…EVENTUALLY?

Summary

********** ****************** ************************* ******************************

ValKayRee · October 9, 2020, 9:48pm

PLACEHOLDER

ValKayRee · October 11, 2020, 1:20am

I used "spanning to the max"

Crashing into my world,
Making it so bright,
Until my thoughts swirled,
A blinding light…

You are the shooting star
I can only admire…
From afar.

ValKayRee · October 28, 2020, 8:25pm

ValKayRee · October 31, 2020, 2:47am

PLAYING WITH GRADIENTS

~~Because why not?~~

RED + ORANGE +YELLOW TURQUOISE+BLUE+NAVYSALMON+DEEPPINKCORNFLOWER BLUE+PLUMLIGHT BLUE +CORNFLOWER BLUE+BLUE+NAVYPINK+ORCHID+PURPLELIGHT BLUE+SKYBLUE+SLATEBLUEWHITE+SILVER+STEELBLUEYELLOW+GOLD+ORANGEPINK+RED+DARKREDGREEN+YELLOWORANGE+PINKTAN+BROWN+BLACKBEIGE+PINKWHITE+REDBLUEVIOLET+TURQUOISECORAL+SALMON+CRIMSONDARKMAGENTA+DARKORCHID+CORNFLOWERBLUEFUCHSIA+REDGREENYELLOW+FORESTGREENLIGHTCYAN+LAVENDER+LIGHTPINKTHISTLE+VIOLETPALEVIOLETRED+REBECCAPURPLEROYALBLUE+SKYBLUESLATEBLUE+STEELBLUESILVER+PLUMMIDNIGHTBLUE+PINKDARKVIOLET+DARKBLUEGREEN+LIGHTGREEN+PINKBLACK+PINKTURQUOISE+REDAZURE+AQUAMARINESALMON+PURPLEPLUM+AZUREWHITE+BLUEPLUM+NAVYTEAL+SEAGREEN+GREENNAVY+BLACKNAVY+DEEPPINKORANGE+WHITETEAL+WHITEBROWN+PURPLELIGHTGREEN+LIME+GREEN+BLACKNAVY + PURPLEPINK + SALMON + DEEPPINKTURQUOISE + VIOLETYELLOW + PINKBEIGE + BROWNSEAGREEN + TURQUOISEORCHID + SALMONSILVER + LIGHTBUEMAROON + PINKOLIVE + DARKGREEN

ValKayRee · November 2, 2020, 2:01am