Coding Notes

Subject: Coding Notes Fri Aug 10, 2018 12:08 am

-Cheat Sheet-

Boilerplate

<!doctype html> -- {! = html (link)}
<head>
<link href="folder/style.css" type="text/css"
rel="stylesheet">
<title>Website Title</title>
</head>
<body>
</body>
</html>

Images
<img src="url/file location">
alt="hovertext"

Video
<video autoplay muted loop controls>

<source src="url or file" -- type = "video/filetype">

This text shows if browser is unsupportive.
</video>

_________________
"Shall we dance under the evening sun bright, late into the glassy-eyed moon's light?" ~~ God Of Death;
'Tsukuyomi Yin'

"Tears of a thousand,
Pain of a million," ~~Tear Lacrimoso;
'Weeping Willow'

"Filled with Destruction and Anguish,
Grinding your emotions down to dust,
Crushing your happiness into nothing," ~~ Mechanica;
'The Reaper'

"Our thoughts clash
And my soul weeps..." ~~ Moon's Passion;
'Deadly Rondo'

"Nothing is unclear to eyes cleansed by tears." ~~ An Elegant Engagement;
'Moonlight Waltz'

Subject: Re: Coding Notes Fri Aug 10, 2018 12:15 am

Relative Measurements

units: em-sizes relative to font size of parent element
rem - sizes relative to font of root element

percentages: used to size box-model features; width, height.
Padding.Margin
Horizontal & Vertical - Margin & Padding - Relative to width of parent element.

image or video: set height or width and converge to auto to display correctly.

background size: cover -- will set image to scale proportionally.

Media Queries
Adapt a website's flow for different screen sizes.

@ Media & only screen and (max-width:480px){}

Parameters set in parentheses. If all conditions need to be met, separate with and if optional, use a comma ','.
Mex/Min Width in px.
Resolution in dpi
Orientation landscape or portrait

_________________
"Shall we dance under the evening sun bright, late into the glassy-eyed moon's light?" ~~ God Of Death;
'Tsukuyomi Yin'

"Tears of a thousand,
Pain of a million," ~~Tear Lacrimoso;
'Weeping Willow'

"Filled with Destruction and Anguish,
Grinding your emotions down to dust,
Crushing your happiness into nothing," ~~ Mechanica;
'The Reaper'

"Our thoughts clash
And my soul weeps..." ~~ Moon's Passion;
'Deadly Rondo'

"Nothing is unclear to eyes cleansed by tears." ~~ An Elegant Engagement;
'Moonlight Waltz'

Subject: Re: Coding Notes Fri Aug 10, 2018 12:32 am

CSS Display Selectors

position: static default
absolute - locks to top left of box; scrolls with screen
relative - to its default position
fixed - pinned to page

Z - index : X - Integer -- position top of elements

display: controls left to right flow of elements
inline - cannot have x, y and take up little space -- Z
block - width of their container, set height and width
inline-block: left to right, control height & width
float: left/right moves elements as far as possible
clear: left/right/top/bottom edge will not touch anything on that side

Flex-Box
Flexcontainers hold flex items
To display as flex: display: flex or inline-flex;

display: flex-aligns content left to right. No other things will appear on the same line. Child elements will not appear on new lines
inline - flex - dns will display next to each other if space allows

justify-content: orders content left 2 right
flex-start: from left 2 right, no extra space
flex-end: last item for right, no space between
center: all items in order in center, no extra space
space-around: equal space before & after
space-between: equal space between them, no extra space before or after elements

align-items:orders content vertically
flex-start: all elements positioned at the top of parent container
flex-end: bottom of parent container
center: center of all elements halfway from top and bottom of parent
baseline: bottom of all items aligned

stretch: all items stretch from top to bottom. min-height will stretch -- max height will not

flex-grow: specifies if items will grow to fill the container and can be set proportionally depending on the number of items; 1 2 3

flex-shrink: specifies if items will shrink and in what proportions; 1 2 3

flex-basis: specifies the size of the item before it grows or shrinks

flex: sets grows shrink basis grow and basis can be set in 2 values; 2, 1 -15px

flex-wrap: changes wrap property
wrap: move o next line
wrap-reverse: moves to live before
nowrap: default-override other css rles

align-content: space rows from top to bottom
flex-start: all rows will be at the top of the parent container with no space between
flex-end: all rows at bottom of parent container; no space between
center: all rows positioned at the center of parent

No space between
space-between: rows spaced evenly top-bottom with no space above first or below last.
space-around: all rows evenly from top-bottom with same space before & after.
stretch: if no min or max height specified, rows fill parent container.

flex-direction: changes direction of rows of elements
row: left to right (default) starting from top corner
row-reverse: right to left starting from top corner
column: from top to bottom from left corner
column-reverse: bottom to top from left corner

flex-flow: declares flex direction -- flex wrap.

_________________
"Shall we dance under the evening sun bright, late into the glassy-eyed moon's light?" ~~ God Of Death;
'Tsukuyomi Yin'

"Tears of a thousand,
Pain of a million," ~~Tear Lacrimoso;
'Weeping Willow'

"Filled with Destruction and Anguish,
Grinding your emotions down to dust,
Crushing your happiness into nothing," ~~ Mechanica;
'The Reaper'

"Our thoughts clash
And my soul weeps..." ~~ Moon's Passion;
'Deadly Rondo'

"Nothing is unclear to eyes cleansed by tears." ~~ An Elegant Engagement;
'Moonlight Waltz'

Subject: Re: Coding Notes Fri Aug 10, 2018 8:55 am

CSS Selectors (continued)

{Font-weight: bold/normal
text-align: right/left/center
color: (foregroundcolor.) now or hex #
background - color: name or hex #
opacity: 0 - 1 = 0% = 100% visible
background-image: url ("www.ves.net"); or if in same project "images/blank.jpg"

border: x px style color
border-radius: x px curved corners -- 100% creates
padding-top-bottom: x px y px z px a px
margin - right - left: top right bottom left

horizontal margins meet always
vertical margins take the larger margin
min/max-width: x px sets parameters for sizing
overflow: scroll hidden visible
visibility: hidden visible

Box Module (Layers)
Margin - space between elements
border - thickness & style
padding - between content & border content
height x width px

box-sizing: border-box keeps box sizes based on the border

_________________
"Shall we dance under the evening sun bright, late into the glassy-eyed moon's light?" ~~ God Of Death;
'Tsukuyomi Yin'

"Tears of a thousand,
Pain of a million," ~~Tear Lacrimoso;
'Weeping Willow'

"Filled with Destruction and Anguish,
Grinding your emotions down to dust,
Crushing your happiness into nothing," ~~ Mechanica;
'The Reaper'

"Our thoughts clash
And my soul weeps..." ~~ Moon's Passion;
'Deadly Rondo'

"Nothing is unclear to eyes cleansed by tears." ~~ An Elegant Engagement;
'Moonlight Waltz'

Subject: Re: Coding Notes Fri Aug 10, 2018 8:59 am

HTML Tables

<table> making a table of stuff
<tr> rows for the tables
<td> data for tables (cdspan = "2") for cell stretch
<th>heading for table (rowspan = "2")
scope = "col" or "row"

<thead> section off different parts of the table
<tbody>

<tr>
<thead>
<th> Character
<th> Village
<th> Penk
</thead>

</tr>
<tr>

<tbody>

<td>
<td>
<td>

</tbody>

<tr>
<tfoot>
<td>
<td>
</tfoot>

_________________
"Shall we dance under the evening sun bright, late into the glassy-eyed moon's light?" ~~ God Of Death;
'Tsukuyomi Yin'

"Tears of a thousand,
Pain of a million," ~~Tear Lacrimoso;
'Weeping Willow'

"Filled with Destruction and Anguish,
Grinding your emotions down to dust,
Crushing your happiness into nothing," ~~ Mechanica;
'The Reaper'

"Our thoughts clash
And my soul weeps..." ~~ Moon's Passion;
'Deadly Rondo'

"Nothing is unclear to eyes cleansed by tears." ~~ An Elegant Engagement;
'Moonlight Waltz'

Subject: Re: Coding Notes Sat Aug 11, 2018 10:25 am

/*comment*/

CSS Cascading Style Sheets

style.css = filename/extension
<style>
<link> link to the CSS page (self-closing tag n<head> element)
href="CSS URL" in same directory, or /extension
type= "text/CSS" for.css file
nel = "stylesheet" relationship between files

CSS Code

Selector = { : (selects all elements in html)
*universal selector
syntax: selector{ property: value; (selector,selector) }

<ahref = "#blank"> wrapping text

properties

color: none or hexadecimal
font-size: px (!important) overrides other css (in.html)
font-family: Arial, Wingdings, Times (no capitals)

eg. <link
href = "./style.css (within the same directory) type = "text/css"
rel = "stylesheet">

class {selects class elements in html}

add multiple classes to.html elements to create combinations "class 1 class 2 class 3"
class conjunctions across different elements create elegant styling

text - transform: uppercase/lowercase
#id selects id tags before class tags

_________________
"Shall we dance under the evening sun bright, late into the glassy-eyed moon's light?" ~~ God Of Death;
'Tsukuyomi Yin'

"Tears of a thousand,
Pain of a million," ~~Tear Lacrimoso;
'Weeping Willow'

"Filled with Destruction and Anguish,
Grinding your emotions down to dust,
Crushing your happiness into nothing," ~~ Mechanica;
'The Reaper'

"Our thoughts clash
And my soul weeps..." ~~ Moon's Passion;
'Deadly Rondo'

"Nothing is unclear to eyes cleansed by tears." ~~ An Elegant Engagement;
'Moonlight Waltz'

Subject: Re: Coding Notes Sat Aug 11, 2018 10:33 am

html

boilterplate code

<!DOCTYPE html> - language for the page to read

<html> code goes here </>
<head> <title> goes here </>
<title> title of each page </>
<body> the rest of the code goes here </>

Content Code
<div> groups HTML content </> - id = "blah"
<h1> Largest heading </> css selector
-2 <span> separates in line text</>
-3 <strong>bold</>
-4 <em>italic</>
-5 <video> src = "URL" width = "px" height = "px"
<-6> smallest heading
<p> adds a new paragraph </> <nav>
<ul> unordered list bulletpoints
<li> list components </>
<ol> ordered list numbered
<a> anchor a link to nested text </>
href = "websiteURL" attribute -- always go in opening tags
target = "_blank" attribute -- opens in a new window.
<img> pictures - self closing
src = "URL"
alt = "Note on the picture"
<br/> line break - self closing
<! -- comment -- >

_________________
"Shall we dance under the evening sun bright, late into the glassy-eyed moon's light?" ~~ God Of Death;
'Tsukuyomi Yin'

"Tears of a thousand,
Pain of a million," ~~Tear Lacrimoso;
'Weeping Willow'

"Filled with Destruction and Anguish,
Grinding your emotions down to dust,
Crushing your happiness into nothing," ~~ Mechanica;
'The Reaper'

"Our thoughts clash
And my soul weeps..." ~~ Moon's Passion;
'Deadly Rondo'

"Nothing is unclear to eyes cleansed by tears." ~~ An Elegant Engagement;
'Moonlight Waltz'

» Value Notes
» Name Notes
» War Notes
» Literary Notes
» Spite Notes