Prework Study Guide
✨ Open the Console to See What's Happening ✨
HTML
- The head element contains information about the webpage.
- The head element contains the meta data, page title, HTTP header attributes, and defines other aspects of the non-visible part of the site
- The body element represents the visible content shown to the user.
- Element refers to the whole section between opening and closing tags; tags refer to the individual parts between "< >s"
- Parent elements refer to the top line elements that contain other elements, known as child elements
- id tags are used to create referenceable elements for certain elements; these will later refer to the CSS for styling.
CSS
- External CSS style sheets are the most useful; however, internal CSS (in the head section) can define attributes on individual pages, and inline CSS can apply attributes to specific sections.
- In external CSS stylesheets, a Selector is what is being defined (either an element or a class attribute), and the Declaration states the property and the value of that property.
- CSS interacts with HTML in a box model (from the middle: content, padding, border, margin)
- Don't forget to link to external CSS sheet with a link tag in an HTML head element.
- Here are some specific properties (and a note on Selectors)
- Use * as a wildcard selector to set property values for all sections
- Some properties include: margin, padding, width, height, background-color, text-align.
- A margin indicates how much space we want around the outside of an element (first value top and bottom, second value left and right).
- A padding indicates how much space we want around the content inside an element.
- Start your selector with a period when defining a class attribute.
Git
- Git is a version control system utilizing remote and local repositories to enable collaboration with other developers by creating streamlined ways to merge work without causing conflicts due to simultaneous changes.
- Working in git usually requires having a main branch that folks don't work on directly, with additional branches added where the updating, deletion, or creation of content happens.
- These additional branches are then merged into the main one (only after a review process) to make sure that changes don't cause issues to the work as a whole.
- The main branch may be (and probably should be) different than the live site - for example, a dev main branch where new updates are created before they are published live.
- Some useful commands:
- git status: checks what branch we are currently on
- git checkout branch-name: can be used to move to a new branch. Use -b before branch-name to create a new branch.
- git add -A: stages all files to be ready to commit. -A selects all, can stage smaller segments as well.
- git commit -m "explanation": This commits a version such that git tracks a snapshot at this time. -m allows a string to be added, explaining the commit.
- git pull origin main: pulls the main branch from the remote repository, syncing with the local repository.
- git push origin branch-name: syncs a local repository branch to the remote repository.
- git branch: lists the current branches. Base version shows local repository, but add -r for remote repository or -a for local and remote repository.
- git ls-tree branch-name: lists assets in branch-name. Add -r for remote branches.
- Using github, utilize issues to track work. Github is also where you handle Pull Requests, merging of branches in the remote repository, and more.
JavaScript
- 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.
- script.js is linked to in body of HTML.
- for loops and if...else statements are very important.
- for loops are made of 3 part conditional statements and code blocks.
- if...else loops are made of a boolean check which controls where the computer reads next.
- Functions consist of a declaration and a code block and need to be called to perform their action.
- let is used to define variables inside a block; var is used to define variables throughout a function.
- JavaScript is weakly typed, meaning that it has implicit coercions for types.
- All Primitive Values are immutable values represented directly at the lowest level of language. These include:
- Null: keyword, absence of objects
- Undefined: normal identifier, absence of value
- Number: + or - (2-1074 and 21024. Can return NaN (not a number).)
- BigInt: integers with arbitrary magnitude. Loosely same as number.
- String: Textual data.
- Symbol: Unique primitive value.
- Objects are a value that may be referenced by an identifier. They are mutable.
- Objects are collections of properties. Object properties can included data properties and accessor properties.
- Data Properties have four attributes, value, writable (boolean value that states whether a property can be changed), enumerable (boolean value for for...in loops), and configurable (boolean for if property can be delated, changed to accessor property, or if attributes can be changed).
- Accessor properties also have four attributes. The last two are the same as above, but the first two are get (function with empty list to retrieve property value when get access is performed) and set (function w/ argument that contains assigned value)
- Arrays are are objects with relationships between integer-keyed properties and length properties.
- Maps, Sets, WeakMaps, and WeakSets are all data structures that take object references as keys.