Prework Study Guide
✨ Open the Console to See What's Happening ✨
HTML
- The head element contains meta information about the webpage. We add links to related files here to tell the browser what's included in our website and how these files should interact.
- The body element represents the visible content shown to the user.
- The 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.
- The ul tag creates an unordered list of items.
- The li elements represent a new bullet point in the list.
- The br element creates a line of empty space, or a line break, between two blocks of content.
CSS
- A margin indicates how much space we want around the outside of an element.
- A padding indicates how much space we want around the content inside an element.
- When using an external style sheet, we link the file using a link element placed in the HTML's header.
- The rel attribute specifies the relationship between the current document and the linked document resource.
- The href attribute specifies the location (URL) of the external resource. The href attribute is using a relative path.
- The period preceding card designates this as a class selector. Any HTML element assigned to the class, card, will gain these property assignments from the CSS.
- The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X (e.g. the X offset is 5px and defines the width or extent of the shadow on the X axis (or to the right of the box)) and Y (e.g. the Y offset is 10px and defines the extent on the Y axis (or just below the box)) offsets relative to the element, blur and spread radius, and color.
Git
- git status: checks what branch we are currently on
- git checkout -b branch-name: creates a new branch and switches to it
- git add -A: adds all (-A) modifications in the current working branch to the staging area
- git commit -m "message": commits the modifications with a message that describes what the commit contains
- git pull origin main: checks if our local branch is in sync with the base branch in GitHub
- git push origin feature/name: pushes the changes to the remote branch
JavaScript
- A variable is a named container that allows us to store data in our code.
- In JavaScript, to declare a variable, we use the var keyword. After the var keyword, we give the variable a name. This name must be unique because it is how we will reference the information stored in the variable in our code.
- Control flow is the order in which a computer executes code in a script.
- We can use the console.log method to output a message to the web console by adding an argument.
- 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 if statement is a way of introducing decision-making into our code. When creating an if statement, we provide one or more conditions for the computer to evaluate. If one condition is truthy, the computer will execute the code that we provide between curly brackets. But if the condition is not truthy, the code will not execute, interrupting the control flow. Interrupting the control flow in this way allows us to build apps that respond to a user's actions.
- An array is a single variable that is used to hold a group of data. Arrays are typically used to hold data that is related in some way. To work with individual data items inside an array, we need to have one more piece of information: the location of the data item in the array. This location is identified with a unique number called an index. Using each piece of data's index, or location number, we can access individual data inside the array.
- 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. In order to use the for loop, we need the index and the array's length. 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 the following three important statements: The first statement determines the starting point for our loop. Since we want to start at the beginning of the array, we declare a variable x and give it a value of 0 (because the first index of an array is always 0). The second statement is the condition. As long as the number in the variable x is less than the length of the array, the loop will keep running. This will allow the loop to execute one time for each item in the array. The final statement is what allows the array to iterate over each item. Since indices follow a predictable pattern, we know the number increases by 1 each time. The code x++ is a shortcut way of writing x+1. Now every time the code loops, x will increase by 1.
- Functions are reusable blocks of code that contain instructions to perform a specific task. To declare a function, we use the function keyword and then give our function a unique name followed by parentheses (). Then we add curly brackets {} that contain the code for the task we want to perform.
- To comment out multiple lines of JavaScript code, put /* before and */ after the block of code.
- Math.floor() and Math.random() are both properties of JavaScript's built-in Math object that can be used together to generate a random number.