Prework Study Guide
✨ Open the Console to See What's Happening ✨
HTML
- Enter your HTML notes here:
- The 'head' element contains information about the webpage
- The 'body' element represents the visible content shown to the user
- The 'script' element embeds client-side scripts into the HTML document
- The 'meta' element defines the CHARSET, or character ser, as UTF-8,
which allows us to use most characters and symbols on the page.
- The 'title' element is also defined, and sets the title of the webpage to "Prework Study Guide"
- 'h1', 'h2', 'h3', 'h4', 'h5', and 'h6' elements represent the level of heading a given text block represents
- The 'p' element represents a paragraph or block of text, used to wrap most of the text on your webpage
- The 'ul', 'ol', and 'li' elements represent unordered lists, ordered lists, and list items
- The 'img' element contains information about images that are displayed on the webpage.
The 'img' element can contain variuos attributes
- The 'src' attribute is th emost important because it defines the location of the image
- The 'br' element creates a line of empty space or line break between 2 blocks of content
- The 'a' element (stands for anchor) creates links to the same webpage or other webpages
- The 'href' attribute points to the URL for the link where the image is stored
- The 'alt' attribute contains a text string that decribes the appearance and functionality of the image
(used for screen reader & assistive technology), it can also improve your search engine ranking
CSS
- Enter your CSS notes here:
- A selector defines the element or attributes to which the rules or declarations apply
- Declarations contain two important components:
The CSS properties we want to apply
The value of the property
- Margin: acts much like the margin of a word document
- Padding: adds space around the content inside an element
- A '*' is a special wild card used to apply a rule to all the elements on a webpage
- Do Not Repeat Yourself (DRY) a coding principle to reuse snippets of code where possible to reduce to lines of code required
- 'rel' attribute specifies the relationship between the current document and the linked document
- The 'link' element creates a connection to an external file
- 'href' attribute specifies the location(URL) of the external resource
- 'card' is a class selector used to add style to certain selcted elements/topics but not all
- '.' preceding 'card' designates this is a class selector. Any HTML element assigned to the class will gain these property assignments
- 'margin' property assigns a value to the top and bottom of the element & auto the value to the left & right
- 'border' assigns the border values
- 'box-shadow' adds the shadow effect around the element's frame
Git
- Enter your Git notes here:
- 'git status': checks what branch we are currently on
- 'git checkout -b branch name': creates a new branch and switches to it
- 'git pull': pulls down the latest and most uptodate version of the repo
- 'git commit': commits any changes you have made to your code to your local copy of the code
- 'git push': pushes your commits to your Git Hub repo
- 'git add -A': adds the changed files in our working directory to the stageing area of Git
- 'git commit-m': Uses the -m flag to add associate a message with our commit
- 'git pull origin main': pulls in the base branch before you do a push request
- 'git push origin' "branch name"
JavaScript
- Enter your JavaScript here:
- To declare a variable use the keyword 'var'
- '=' is an assignment operator used to assign specific data to store in a variable
- Press Cmd+Opt+I to open the Chrome DevTools or right click the webpage and select inspect
- JavaScript links are located at the bottom of the HTML file, under the footer but above the closing element for the body
- When a computer encounters an 'if' statement in a JavaScript file it will check to see if it is truthy, then do the action between the {}, then break out of the 'if' statement
- The strict equality operator '===' checks to see if two values are equal, and returns a Boolean result true if the values are equal and false if the values are not equal
- An array is a single variable that is used to hold a group of data between []. Arrays are typically used to hold data that is related in some way
- All lines of code must finsh with ';'
- A 'for' loop uses the predictable pattern of indices to perform a task on all the items in an array by allowing a single code block to be executed over and over
- Developers must use another statement, such as the conditional 'if' statement that we just learned, to interrupt the control flow by executing a block of code a specific number of times
- The array length is important because the 'for' loop needs to know how many times the code will run until there are no items left in the array. We can find the length of an array by using a built-in property of an array, appropriately named 'length'
- A 'for' loop contains three important statements, the starting point for the loop, the condition, the indices
- The code 'x++'' is a shortcut way of writing 'x+1'. Now every time the code loops, x will increase by 1
- To comment out multiple lines of JavaScript code, put /* before and */ after the block of code
- To create a function, we use the 'function' keyword, similar to how we used the var keyword to declare a new variable.
Then we give our function a unique name. We will use this unique name whenever we call the function
- A function's name is followed by parentheses '()'
- To randomize our selection, we need to use a special Math function that helps us select a random number
- A variable is a named container that allows us to store data in our code
- Control flow is the order in which a computer executes code in a script