My Notes

HTML Tags and Tips

• HTML block elements include h tags, p tags, divs
• H heading tags range from h1-h6 (h1 is largest, h6 is smallest)
• Img tags need an src="" and are self-closing, an alt attribute must be set for accessibility
• Video tags are not self-closing, the text in the middle is displayed if the video cannot render, you can specify the src="" of the video, you can adjust the width and height and if you add the 'controls' attribute in the tag it will give you options to play and pause
• !DOCTYPE html at the top of page lets html know to render most recent html
• Anchor tags (a) can be set around any other tags, just add href="" and either the relative (./filename.html) or absolute file path of the link... and target="_blank" can be specified if you want it to open in a new tab
• Em tag is to italicize words, strong tag is to bold them
• S tag can strikethrough words by adding a text-decoration: line-through CSS value
• To link to other parts of same page, giv e the tag you want to link to an ID, then in the Anchor tag use href="#idHere"
• Comments are added in html by typing "<!--" to open the comment (only with an opening bracket) and using "-->" to end the comment
• The difference between <b> tags and <strong> is b bolds and strong emphasizes important content
• Diff between <i> and <em> tags is i italicizes and em emphasizes important content
• Sub tag creates a _subscript, sup tag creates a ^superscript
• To create a strikethrough, you can use del or strike
• The Ins tag will create an inserted look
• There's also a big tag and a small tag
• To add new lines or spacing, add the <br /> tag; to add a visible line to separate distinct content add an <hr /> tag
• Semantic HTML includes >header>, >nav>, >main>, >footer>, >section>, >article>, and >aside> to help accessibility and clarity of the document, >section> is used for anything that can be grouped together whereas >article> is used for standalone articles/comments and >aside> is used for information that isn't directly related but extra information
• >Figure> tag can be used to surround an img tag to make it more semantically understandable to screen readers, and you can also use >figcaption> to surround any text that accompany the picture
• >Embed> is a tag that used to be used for images, videos, and audio, but now it's better to use those tags since Embed is used only for legacy support
• For audio and video tags, you can add a "controls" attribute so there will be a play button, fast forward and backwards.. other attributes are "autoplay" or "loop", source within those can be used as an attribute (src) or a standalone tag inside of (source)
• The progress tag contains attributes of Max, Min, and Value and will display a progress bar
• In HTML, you can add multiple classes to the same tag by adding a space between classes
• The 'scope' attribute can be added to a 'th' tag (table heading tag) to distinguish if the heading is for a 'row' or for a 'col' (column)
• 'colspan' and 'rowspan' can be attributes of 'td' (table data tags) to indicate a piece of data spans (goes across) more than 1 column or row
• When creating a form, you should include action="urlOfInfoGoingTo" and method="POST/GET/ETC" within the form tag
• Input tags should have a 'name' attribute (the items in the form are submitted with 'nameOfInput'='valueGiven') and a 'type' attribute of what kind of input is expected, can also have a 'required' attribute if necessary for form submission, 'value' attribute for form to be pre-filled, and an 'id' attribute preferably
• When adding a 'label' tag to give the user a description of an input, use the 'for' attribute by matching it to the input's 'id' attribute; clicking on a label will focus the input box
• An input type='password' would use asterisks or periods to obscure what was typed although when sent to the form it still is formatted in plaintext
• An input type='range' creates a slider which you can add 'min', 'max', and 'step' values to
• Input type='checkbox' creates a clickable box, which can be distinguished from related options by giving each checkbox a different value and id even though their name may be the same
• Input type='radio' gives radio buttons, use the same name attribute for related radio buttons but different values and ids
• A select tag can enclose option tags that are set to particular values (and the label is between the opening and closing option tag to be displayed to users) to make the user choose one from a list
• A datalist tag gives the user options to choose from or lets the user type in their own choice if they prefer by having the 'datalist id="idHere"' and the input tag having the 'list="idHere" attribute to match, and no data needs to be between the opening and closing option tags
• The 'textarea' tag has opening and closing tags, and you can specify number of 'cols' and 'rows'
• Input type='submit' creates a button with the text of whatever is assigned to the 'value' attribute, if no value it shows 'Submit'
• Adding a 'required' attribute to a form element prevents form from submitting without an input selected
• For number inputs, you can add 'min' and 'max' attributes.. for text inputs, you can add 'minlength' and/or 'maxlength' attributes as client-side validation
• When linking JS, you can add a "defer" attribute to the script tag if the JS file requires interaction through the DOM, that way the HTML parser doesn't hold up loading the page while the script tag loads.. it specifies scripts should execute after the HTML file is completely parsed
• The 'async' attribute in JS script files means the file is loaded in the background while the HTML parser continues loading the page, and as soon as it is done downloading it executes the script, async loading optimizes web page load time so it's most suitable if it doesn't matter at which point the script file is executed
• There should be only 1 h1 heading per webpage
• The h1-h6 headings should be used to distinguish a hierarchical relationship between ideas on the page
• In <img> tags, the alt property can be left to a blank string if the img is not necessary to add details to the page
• <div> groups content, <section> groups related content, and <article> groups independent, self-contained content
• When adding a <label> the for attribute should match the id attribute of the input the label is associated with
• Wrap a group of radio buttons associated with one idea together using a <fieldset> tag, and instead of using a label, use a <legend> tag to specify what the radio buttons are referring to for added accessibility
• You can have an input of type="date" to show a date picker, but older browsers show this as a text input so you should show the user the expected date format in the label or placeholder text just in case

CSS Properties and Values and Tricks

• vertical-align: can be set to top, bottom, or center
• To add inline css, you add a "style" attribute to an HTML tag and within the quotes specify the style you want making sure to end with a semi-colon
  Ex: >h1 style="color:blue; background-color: navy;"> would make that h1 have a blue color with navy background
• Another option to add CSS is to add a >style> tag to the head tag of the file and put your css there
• But the preferred way of adding css is to link to a css file by adding a >link> tag with href attribute of the file path, type="text/css", rel="stylesheet"
• CSS can use tag names (p), class names (.class), or id names (#id) as selectors for styling
• Ids are the most specific CSS selector so they override other styles, then classes, and least specific are tag names
• You can chain CSS selectors by using tagName.className (ex: li.html would get all list elements with a class name of "html" and style them while ignoring other list elements and ignoring other non-list elements with a class of "html")
• In addition to chaining CSS selectors, you can also nest them (such as: aside ul{} would style only the unordered list that is nested within an aside element such as my Further Learning Links at the bottom of the page)
• To give two or more selectors the same styling, you can separate them with a comma
• CSS selectors can have properties of "font-family" (selects the typeface used, enclose it in double quotes if there's a space in the name "Times New Roman"), "font-size", or "font-weight" (bolding a font, or over-riding 'bold' to make a font 'normal')
• You can add a background-image: url("www.link.com") by specifying a url link within a CSS ruleset, you can also add an 'opacity' property to give something a value between 0-1 of how see-through it should be (closer to 0 is very see-through, closer to 1 is barely see-through)
• The '!important' flag can be added to a rule to over-ride any other rules, but it should be used sparingly only when using multiple stylesheets since it is extremely difficult to over-ride
• The 'list-style' property in CSS can be set to make lists have 'square' bullet points instead of circles
• The 'list-style-type' can be set to 'lower-alpha' (a,b,c), 'upper-alpha' (A,B,C), 'lower-roman' (i,ii,iii), 'upper-roman' (I,II,III) or other variations
• 'text-transform' property can be set to 'uppercase', 'lowercase', or 'capitalize'
• Anchor tags can be styled based on the pseudo-class a:hover to change style when hovered over
• If you set a CSS value to 'position: relative' you select an off-set property ('top', 'bottom', 'right', or 'left' and move it by %, px, or em and it changes the opposite way of the offset:
  Ex: h2 { position: relative; left: 15px; top: 15px} the h2 element would be moved to the right and bottom 15px from where it normally would be
• Color can be defined using specific color words like 'aqua' or 'rebeccapurple', or with Hex Values like #AB00FF, or with rgb(255,0,0) or hsl(360, 100%, 100%)
• rgb colors and hsl colors can add a fourth part the alpha value (by using rgba or hsla) at the end to measure opacity (0 being transparent, 1 being opaque-- not see through)
• Font-weight values can be 'bold' or 'normal' or you can use numeric values between 100 and 900 ('400' is the default value, '700' signifies a bold weight, '300' is a light weight)
• Font-style property can be set to either 'italic' or 'normal'
• 'Word-spacing' is a property that adds to the space between words, often to make bold text more readable, can be set to 'normal' or use an 'em' value that uses the base amount of word-spacing for that font (typically 0.25em) and adds the value to that default
  Ex: p {word-spacing: 0.2em} would give paragraphs a word-spacing of 0.45em
• 'letter-spacing' can also be defined as a CSS property, the technical term for adjusting space between letters is tracking, not commonly used but sometimes helpful to enhance readability of uppercase words
• 'line-height' is used to adjust the leading between lines (the amount of space between them), can be used with units like %, px, em, or rem or can be unitless and adjusts as a ratio of the default value, generally preferable to use a unitless ratio so it automatically adjusts
• serif fonts have extra details at the ends of letters (like 'Times New Roman' or 'Georgia'), typically they were used in print designs since they are considered more readable in long paragraphs of text
• 'sans serif' fonts lack extra strokes and letters have straight flat edges that give a cleaner more modern look (like 'Arial' or 'Helvetica'), since screens often have lower resolution than print sans serif fonts may be easier to read
• 'fallback fonts' can be specified within a font-family rule, so that if a browser does not have a particular type of font available they will try the next one
  Ex: p {font-family: 'Garamond', 'Times', serif;} The font-family will try to display a Garamond font and if that isn't available it will use Times, and if Times isn't available it will use any serif font preinstalled on the computer
• You can link external fonts, such as ones from Google Fonts
• Images can be turned into a circular image instead of square by giving them the 'border-radius' property set to the value of '100%'
• Vertical margins do not add together like vertical padding and horizontal margins do, instead vertical margins collapse and take whichever of the two values is higher
  Ex: if two divs were on top of each other, and the bottom one had a margin-top property of 30px but the top div had a margin-bottom property of 15px the margin between the two would be 30px. Whereas if it were a padding-bottom of 30px and padding-top of 15px that would be 45px of padding between the two.
• An element with "display: none" will be completely invisible on a page, but "visibility: hidden" will conceal the element from the page but still reserve space for it
• Overflow property can be set to 'display' to still show anything overflowing from a box, 'hide' which conceals anything that would be overflowing, or 'scroll' which adds a scrollbar for anything that would overflow
• Box-sizing is typically set by default to 'content-box' where everything in the box adds to the size of the box
• Box-sizing can also be set to 'border-box' which will take padding and extra into the overall size of the box instead of adding to it
• Transform property can be set to scale to increase the base size of an element
  Ex: p { transform: scale(2); } will double the size of p elements
• Transform property can also be set to skewX or skewY where you specify the number of degrees it should be skewed
  Ex: div { transform: skewX(45deg); } would skew it at a 45 degree angle
• Background property can be set to 'linear-gradient(gradientDirectionDegrees, color1, color2, color3,..)' to show a gradual shifting of colors, 45deg is a diagonal gradient, 90 degree is horizontal (from left to right), 180 deg is vertical (top to bottom changing colors)
• "Display: flex" will make any child containers flexbox containers but they will still be block containers unless you use "display: inline-flex"
• "justify-content" is a flexbox property for flexbox containers that can be set to align items horizontally within their container, it can be set to "flex-start" which starts on the left, "flex-end" which lines the last up with the right side, "center" which puts them in the center, "space-around" which positions boxes with equal space around each side including for the first and last boxes, and "space-between" which uses equal space between each box but the first and last box are aligned with the edges
• "align-items" is a flexbox property for flexbox containers that will align items vertically, the values it can take are: "flex-start" which positions elements at the top of the parent container, "flex-end" which positions elements at the bottom of their parent container, "center" which positions elements between the top and bottom, "baseline" which positions the elements so that the bottom of the content of all items will be aligned, or "stretch" which is the default value and all except items with a defined height will stretch from top to bottom of the container
• "flex-grow" is a property applied to flex-items that lets them grow if their parent container has extra room and says proportionally how items should grow compared to other items (so an item with "flex-grow: 2" can grow twice as much as "flex-grow: 1" items); the default property of flex-grow is 0
• "flex-shrink" is also applied to flex-items and the default is 1; it lets items shrink to fit a parent container and are declared proportionally like flex-grow above
• "flex-basis" is a flex-item property that allows us to set the width of an item before it is grown or shrunk
• The "flex" property (not to be confused with the flex value of display property-- display: flex) can be used to declare flex-grow, flex-shrink, and flex-basis all on one line (Ex: "flex: 2 1 100px" would set flex-grow: 2, flex-shrink: 1, flex-basis: 100px)
• "flex-wrap" is a property for flex containers, its value can be "wrap" telling child items that don't fit in the row to go to the next line, "wrap-reverse" (does same thing as wrap, but the items are reversed), "nowrap" prevents wrapping and is the set default
• "align-content" is for flex-containers that have multiple rows of content, whereas align-items is for one row
• flex containers have two axes: a main axis and a cross axis; by default, the main axis is horizontal and the cross axis is vertical
• "flex-direction" property can take four values, "row" (default), "row-reverse" positions items from right to left, "column" positions items vertically from top to bottom, "column-reverse" positions items from bottom to top
• "flex-flow" is a property for flex containers to declare 'flex-direction' and 'flex-wrap' together in one line (Ex: flex-flow: column wrap;)
• display: inline in CSS makes elements flow next to each other on the same line, but because of that you cannot set a width
• display: block makes elements each go on their own line but you can set the width of an element
• display: inline-block allows you to set the width of an element and also makes the elements flow next to each other on the same line
• position: relative lets you add an offset (top, right, bottom, or left) based on where the element would normally appear in the flow of the document
• position: absolute removes the element from the flow of the document and lets you select an offset based on the parent container or if not parent container, based on the body element
• to make an image responsive, give it's max-width: 100% since it goes based on the container it is in and height: auto
• responsive design: you can set font sizes using viewport units instead of px or ems... vw is percentage of viewport width (ex: 10vw is 10% viewport width).. vh is percentage of viewport height.. vmin is percentage of whichever viewport size is smaller (height or width) and vmax is percentage of whichever viewport size is larger (height or width)

JS Workings

• Rather than typing document.querySelector() to select an element, you can type$(). This syntax is inspired by jQuery, but it's not actually jQuery. It's just an alias for document.querySelector()
• Using string literals (`Back ticks`) is known as string interpolation in JS
• The not operator (!) is also known as the Bang operator in JS
• The dot operator is used for methods/properties (string.length, Math.random()) in JS
• Short-circuit assignment is when you have an OR conditional and it only assigns the right side if the left side of the conditional is False or a Falsy value
  (ex: let name = variableName || 'default'... name will be set to 'default' only if variableName is a Falsy value, either undefined or an empty string, otherwise name will be set to the value of variableName) in JS
• The ternary operator is a simplified way of writing if..else statements.. in them, the conditional statement is first then a question mark is used and two expressions follow which are separated by a semi-colon
  (ex: conditionalStatement ? console.log("Prints If Conditional Is True") : console.log("Prints If False"); )
• Hoisting is the ability of JS to call functions in a program before they're actually defined, but it is not considered good practice. Good practice is functions defined at the top before usage.. Hoisting works because variable and function definitions stay in memory during the compile phase, so during execution they already exist... Only declarations are hoisted, not initialization if that is done separately so if you declare a variable without initializing it, it will be undefined until the part of the code that initializes it.. Also only declarations using var are hoisted, not those using let or const
• Defining a function does not actually execute the function, only calling the function does that.
  ex: function hiya(){ console.log('Hiya!') } will not print to the console automatically. Only when you run hiya() will it run and print to the console.
• ES6 JS allows for default parameters to use a default value if called without that parameters
  ex: function hiya(name = 'mystery person'){ console.log('Hiya ' + name)} will print to the console 'Hiya nameOfPerson' or if called just hiya() without arguments, it will print 'Hiya mystery person'
• Functions being called within other functions to make code more readable are known as 'helper functions' since each function is carrying out a specific task.. Writing helper functions can break down large complex tasks into smaller pieces
• Functions can be anonymous, given no name to run just a code block with the function keyword OR Function expressions can be used in which a variable (usually declared with const) can be used to call the function in the future
• Pass by reference is when you pass in an array variable into a function, and it changes outside the function (mutates) because when you pass it into a function, you're actually passing a reference to where the variable memory is stored and then changing the variable memory
• If you try to go to an array index that is out of bound in JS, it will show you that element is undefined
• To make an object literal in JS, you assign a variable with curly braces
  Ex: let objectVariable = {} creates an empty object
• Data in objects is stored in unordered key: value pairs.. The key is an identifier, which is a string but if there are no special characters in the key then the quotation marks can be omitted.. A property of an object is a key: value pair together
• Object properties are separated by commas
• If you try to access an Object property that does not exist, you will get back undefined
• To access an Object property that has numbers, spaces, special characters, or variables, required to use bracket notation instead of dot notation for properties
• An object declared with const can't be reassigned, but its properties can be mutated or re-assigned
• The delete operator will let you remove properties from objects and assignment operator can be used to add new properties or change properties
  Ex: delete objectName.propertyName
• Object methods can be used as a key in an object with the value being an anonymous function to do the action and is just called by the key name, or the colon can be skipped along with the function keyword
  Ex: objectName { methodName : function(){ console.log('This is what objectName.methodName() does') } }
  Ex 2: objectName { methodName() { console.log('This is the alternate way of using methods in ES6') } }
• In JS, object methods do not automatically have access to the other properties of the method, must use 'this' keyword for them to get access
• Avoid using arrow functions within objects using the 'this' keyword since the arrow syntax automatically bind an already defined this keyword to the function that is not calling the object, it uses a global object already defined and thus does not have the same properties as the object you're in
• JS does not come with privacy built in mind to tell people not to change variables/properties, so a practice many developers do is prepending variables that should be unmutable with an underscore at the beginning (let _dontTouch), which does not inherently keep people from changing them but does serve as a warning that it should be private
• Using a getter in JS is creating a method with the 'get' keyword, then inside the method block you can add conditionals to return various results based on inputs of a property. The 'getter property' cannot share the same name as an actual property within the object, and when you call the getter it looks like you're calling a property itself since you don't include parentheses but it gives a fully formatted response
  Ex: let objectVar = { _dontTouch : 'How dare you!', get noTouchy(){ if(this._dontTouch === 'How dare you!'){ return 'No touchy!'} else{ return 'Someone touched the object properties!!!!!' } } }
  And when called: objectVar.noTouchy will return 'No touchy!'
• A factory function lets us quickly make copies of objects with different parameters to make multiple instances of that object easily and quickly.
  Ex: const objFactory = (parameterName1, parameterName2) => { return { parameterName1: parameterName1, parameterName2: parameterName2} }
  Instance of objFactory: const newObj = objFactory(prop1, prop2);
• You can also use property value shorthand to save yourself writing
  The above obj can be written: const objFactory = (parameterName1, parameterName2) => { return { parameterName1, parameterName2} }
• Destructured assignment allows you to use an object's key as a variable name and assign the variable from the object
  Ex: const {residence} = vampire creates a variable residence and assigns it the property value of vampire.residence
• A predicate function is one that returns a boolean value
• The document.querySelector() method for JS DOM manipulation allows us to specify a CSS selector and then returns the first element that matches that selector.
• Instead of using a hyphen like CSS does for multi-word properties (such as Font-family or Background-Color), JS DOM uses camelCase (fontFamily and backgroundColor) to modify those properties
• You can use the document.createElement() method to make a new element, but it automatically has no content and is not added to the webpage, so you have to add .innerHTML to it and then use the .appendChild method to add it as the last child to an element

Git Outta Here

• "git init" is used to initialize a new git repository
• "git status" shows which branch you're on and which files git sees but is not tracking
• "git add [filename]" adds the file to the staging area, or use a "." instead of filename to add all files in the working directory
• "git diff [filename]" is used to show the difference in the file currently from what's stored in Git... The white text is what matches in Git, the red text is what used to be in the file, the green text is what was added to the file since the last commit
• 'git commit -m "Commit message"' commits the changes in the staging area to the Git repository, should be in present tense, quotation marks, and under 50 characters
• The commit you are currently on is known as the HEAD commit, it's often the commit with the most recent changes
• The command "git show HEAD" will show your HEAD commit plus all file changes that were committed
• "git checkout HEAD [filename]" will reset the file in working directory back to last commit status
• "git reset HEAD [filename]" will unstage file changes that have been added to the staging area (by 'git add [filename]')
• "git reset commit_SHA" will let you go back to a certain commit (based on 1st 7 digits of the SHA that can be found by running 'git log')

Python Notes

• print()
• user_input = input("What would user like to type: ")