HTML

Head Element

• HTML is used to create the structure of a webpage
• Text elements, Image elements, Header elements, and List element all add content to a page
• Meta-related elements, Content division elements, and Semantic elements, are used to divide and describe the page
• We use HTML to buld a sturdy frame, with elements as our building blocks
• The 'head' element contains metadata that helps our browser render the page
• Elements in the 'head' are not visible when a user looks at the webpage
• The '!DOCTYPE html' before the 'head' lets the browser know to expect HTML on the page
• Lang='en' lets the broswer know that english is the language for the website
• The 'Title' element defines the title for the webpage. It is required and important for SEO
• The 'style' element defines the CSS styles associated with a website
• The 'base' element defines the base URL for the webpage
• The 'link' element conects an external resource to the HTML document
• The 'meta' element define the character set, description, keywords, author, and viewport
• The 'script' element embeds the client-side scripts in the HTML document
• The 'charset' UTF-8 allows us to use most characters and symbols on a page
• The 'http-equiv' element sets an HTTP header for content
• The 'viewport' elements sets the default view for out webpage
• The 'link' element allows different files in the same repository to effect each other
• The 'rel' attribute specifies the relationship between the two documents
• The 'href' attribute specifies the location of the external resource

Body Element

• The 'body' elements contain the information that is shown to the user
• 'div' creates a division in the page
• 'span' creates an inline division
• The 'h#' represent different heading levels
• The 'p' element represent a paragraph or block of text
• The 'ul' represents an unordered list
• The 'ol' represent and ordered list
• The 'li' represents list items
• The 'img' element contains various attributes that hold information about images on the webpage
• The 'src' attribute defines the location of the image
• The 'br' elements create a line of empty space between 2 blocks of content
• The 'a' element creates a link to the same or other webpage
• The 'href' attribute points to the URL for the link
• The 'alt' attribute contains text that describes the apprearance and functionality of the image
• The 'section' elements are semantic and define a section in a document
• The 'id' attribute is a way to identify elements and select them
• The format 'button'(button name)'/button' adds a button to the page

CSS

• Cascading Style Sheets (CSS) add style to our webpage
• We use CSS to define style rules for specfici elements of the webpage and format them using determined styling options
• Three ways to style a webpage: inline CSS, internal SCC style sheet, and external CSS style sheet
• Inline CSS: style elements directly in the HTML file
• The 'style' attribute is used to change the appearance of text
• For ex. style='color:red,' changes the color of the following text to red
• Style sheets are used to style multiple elements at once
• Embeded internal style sheets use the 'style' element in the 'head' section
• For ex. 'style' h1 {color: red;} would change all level 1 headings to red
• External style sheets contain all CSS rules in a separate file
• 'link rel='stylesheet' href='./assets/style.css' is how we link the external CSS style sheet located in our assets folder
• CSS rule: selectors define the elements to which the rule applies, declarations contain the rule
• CSS rule: declarations contain a property (such as color) and a value (such as red)
• For ex. div color: blue; indicates that the color property is set to blue
• The Margin property sets an invisible border around the element
• The Padding property adds space to the content inside the element
• Using the wildcard * applies the rules to al the elements on the page
• You can add multiple selectors to a styling rule by separating the indiviual elements with a comma
• The img selector adds changes to any image element on the page
• Display: block assigns each image to a new line
• 'width' changes the width of the element to occupy whatever the value is set at
• Adding 'auto' after 'margin' sets the same margin to the left and right
• The 'box-shadow' property adds a shadow effect around the element

Git

• Git clone (copy from repository): clones the code to our local computer so we can work on it without affecting the main code
• Git status: allows us to check which branch we are currently working in
• Git checkout -b (name of branch): creates a new branch for us to work in
• Git add (-A): adds all modification to our banch so they are staged and ready to be committed
• Git commit -m ('message of changes being made'): commits all staged changes and describes what the changes are
• Git pull origin (name of branch): pulls code from a branch and allows us to see any changes that have been made from the base branch
• Git push origin (name of of branch): pushes our remote branch onto GitHub
• Git branch -D (name of branch): delete branch stored locally
• Git branch: lists all local branches

JavaScript

• JavaScript (JS) is a high-level dynamic programming language that allows users to interact with websites
• Every time you do something with a webpage, such as click a button, retrieve data, or fill out a form, JavaScript is at work
• The 'script' elements adds JavaScript elements from an outside file to your webpage
• 'null' is a JavaScript special value that refers to the absence of a value
• The 'script' element goes at the bottom of the 'body' section
• JavaScript reads code from the top to bottom. This menas that we must define everything before we try to use it

Variables

• The function 'querySelector' grabs a reference to our text and stores it in a variable
• The 'textContent' property sets the value of the selected variable
• Variables are containers that store values
• The 'let' command allows us to declare a variable
• JavaScript is case sensitive. The varaible 'heading' is not the same as 'Heading'
• let (variable name) = ("variable value")
• Retrieve the value by calling the variable name. Ex. heading;
• You can change the value of a variable after the inital declaration
• A 'string' variable is a sequence of text inclosed in '' or ""
• Number variable do not need to be enclosed in quotes
• Boolean varaibles have values of true or false, they do not need quotes
• An array is a structure that allows us to store multiple values in a single refernce, surrounded by []. Each value can be recalled by identifying its place
• Object variables can be anything. Everything in JavaScript is an object
• Variables are ways for users to personalize values by interacting with the website

Comments

• Comments are snippets of text that are ignored by the browser. Denoted by /*code*/
• If there are no line breaks you can put comments behind //

Operators

• Operators are mathematical operations that prodice a result based on two or more values/variables
• +,-,/,*, and = work just as expected
• '===' [reforms a test to see if two values are equal. Returns a boolean result
• '!' returns the logically opposite value of what it precedes. For ex. it turns true into false

Conditionals

• Conditions execute automatically when the JavaScript file is run
• Conditionals are code structures used to test if an expressions returns true or not
• The expression inside the if() is the test
• If the expression returns true, then the first line of code would run.
• If the expressions returns as false, the second block of code, after the 'else' statement would run.
• We can use the 'else if" condition to check for more than one conditions in the same step

Functions

• Functions, simply put, area set of instructions that tells the computer how to perform a certain task
• Fucntions are a way of packaging functionality to reuse
• Functions must be called in order to use them
• We can define a body of code as a function to recall instead of repeatedly writing the code
• Functions are typically followed by paranthesis ()
• An argument is a bit of data that functions need to do their job
• Arguments go inside the parenthesis
• The 'alert' functions creates a pop-up box appear inside the window. which returns the message as the argument
• The return variable tells the browser to return the result variable

Events

• Real interactivity requires even handlers
• Event handlers look for activity in the browser and runs code in response
• Click event, respond when a user clicks on something with their mouse
• document.querySelector("html").addEventListener("click", function () { alert("Ouch! Stop poking me!"); });
• In this exampmle, we select the 'html' element. we call the addEventListener() function, passing in 'click' as the event to watch out for
• We added an anonymous function to this event. Alternatively we can add '() =>' instead of function

Changing Images

• const myImage = document.querySelector("img"); myImage.onclick = () => { const mySrc = myImage.getAttribute("src"); if (mySrc === "original image") { myImage.setAttribute("src", "new image"); } else { myImage.setAttribute("src", "orignal image"); } };
• In the code above, we stored a reference to our 'img' element. By using a function with no name, we made it so every time we click the image, the code retrieves the value of the img. The conditional checks to see if the image is equal to the original path, if it is then the code changes the path to our new image, if it is not then it returns the original image.

Personalized Messages

• Adding a personalized welcome message involves storing user info in the Web Storage API, creatinng a change user button, and adding a way for the user to name themselves
• function setUserName() { const myName = prompt("Please enter your name."); localStorage.setItem("name", myName); }
• The 'setUserName()'' function contains a prompt() function, which displays a dialog box
• The 'prompt' function asks the user to enter data, wich is stored as a variable after the user clicks OK
• 'localStorage' allows users to store data in the browser for later retrieval
• The 'setItem()" function creates and stores a data item called 'name' which containers the 'myName' variable, which contains the suers entry for the name
• Then we add the following conditional block:
• if (!localStorage.getItem("name")) { setUserName(); } else { const storedName = localStorage.getItem("name"); }
• The first line checks whether the name data exists already. If not, the 'setUserName' function runs
• If the name exists, we reitreve the stored name using 'getItem()' and setting the textContent of the heading to a string and the user's name