Bootstrap:

● css
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/b
ootstrap.min.css">

● js
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+O
rCXaRkfj" crossorigin="anonymous"></script>

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle
.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3Mo
K7ZeZDyx" crossorigin="anonymous"></script>

JQUERY:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="./assets/js/script.js"></script>

Moment:
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js
"></script>

Git Create new branch

1. Make sure we are in our main branch and correct folder in the local environment using git
status. If we are in the wrong branch, use git checkout main
2. Make sure the local and remote environments are in sync with git pull origin main
3. Create a new branch using git checkout -b feature/name-of-branch
4. Confirm we are on the new branch with git status
Git Work Flow – merging a branch from local environment to remote environment
1. Using the command line, navigate to the branch we want to merge
a. Use git status to confirm
2. Git add -A (stages changes to be committed)
3. Git commit -m “message describing the change”
4. Git pull origin main (verifies that main branch is up to date)
5. Git push origin name-of-branch-we-are-committing (this is the branch we should be in
w/in our local environment
6. Go to GitHub and navigate to current project
7. In current project, switch branch to the one we are merging into main
8. Click the “Pull Requests” tab and select “New Pull Request”
 a. Make sure the base branch is “main” and the comparison branch is
“name-of-branch-we-are-committing”
b. Add a title and a description of the PR
c. Click “Create Pull Request”
9. Click on “Merge Pull Request”
10. Close the issue in GitHub
11. Go to command line and type git checkout main to update local branch (? – I think
because now our local main branch needs to be updated with the changes we just merged into
our remote main branch)
12. Pull the remote main branch into the local main with git pull origin main
13. Don’t forget to delete the branch once it has been merged to avoid future confusion

Git terminology
Directory ~ folder
Git command Action

Git config Changes personal info associated w/ git

Git revert + “HSA we want to revert to” Reverts to a specific version of repo using
HAS (first 7 characters of version ID)

Git rest + file name Unstage a file while retain chaining in

working directory

Git clone + copy link from github repo Copies remote repo to local machine
(code)

git fetch tells your local git to retrieve the latest

meta-data info from the original

git merge lets you take the independent lines of

development created by git branch and
integrate them into a single branch
Bash Terminology
Command Action

Cd current directory

Ls lists content of directory

Pwd – print working directory

Cd .. allows us to navigate back one directory

Mkdir + “name of new directory” creates a directory

Touch + name-of-new-file.filetype Creates a new file

Start name-of-file.filetype Opens file in text editor

“Rm + file name” Deletes file

“Rm + -r folder name” Deletes folder and all contents - CAREFUL

“mv + file-name + pathway to folder we Moves a folder

want it to move to”

Cp + file name Copies a file

Explorer . Opens directory in GUI

Code . Opens directory in code editor

VSCode
Command Action

Ctrl + shift + L Highlights every recurrence of a word

HTML
Command Action

! + tab Inputs basic html starter code

Block level elements Always take up the whole line of container

In-line Can put multiple next to each other in

container

Ctrl + / Comments out text

CSS
Command Action

# idname { Grabs element with that specific ID (cannot

be re-used)
}

. classname { Grabs element(s) with that specific class

(can be re-used)
}

*{ Selects everything (universal selector)

}

Element-name {
}

Element-name1, Element-name2 {
}

Parent-element child-element {
}

Parent-element>child-element {
}

display-none Removes item entirely from flow of

page

display-block Stacks on top - item takes whole line

display-inline Stacks side by side

Visibility-hidden Reserves space but can’t see item

Ctrl + / Leaves a comment

Box model (top, right, bottom, left) ● Inner-most box is content

● Next box is padding (takes on
background color)
● Next level out is border (does not
take on background color)
● Then margin (space between item
and end of page) (does not take on
background color)

Position: static; Moves as you scroll page - default

Position: relative; Similar to static, but allows you to set items

(top, left right bottom: px) relative to their
natural position

Position: absolute; Positions items relative to nearest

positioned ancestor (container) - similar to
relative but removes item from document
flow

Position: fixed; Positions relative to positioned screen -

moves with scroll

Media query (“@media”) - when screen @media screen and (max-width:

hits a certain pixel number, styling changes 992px) {
header {
*Essentially a mini conditional css file w/in
your css file (calls html elements the same background: #772014;
way WHEN a certain condition is met }
}

Flex Box - Flex is another property to display (like

.class { inline)
display:flex ● Flex is just for display, not for other
flex-grow: styling (like color change, font
Flex-wrap: change, etc.)
}

Flex: 0 0 0px Grow shrink basis

 Transform

CSS variables with be very usful Sort of like creating a tag full of rules you
can apply to any element
–name: what does the rule do; background-color: var(--name);

Question: we are learning basics and building off of them (html styling, css
properties to move things around, grid, flexbox) but are we going to always
have to use discretion and think critically about which to use or are we just
building a foundation up to a best practice and in the end we will pretty
much always use flexbox?

JavaScript - <script src=”script.js”></script> (at bottom of page)

Command Action

Var variableName = “name”; Creates variable

= (b = c) Sets value of B to value of C

== (equality) Compares value of two items - always

!= returns a boolean

=== (strict equality) Compares value AND type of two items -

!== always returns a boolean

&& (a===b && b===c) AND operator - checks whether two

conditions are true

|| (a===b || b===c) OR operator - checks whether at least one

condition is ,et

! No operator

Objects (key-pairs: objectName = (key-pairs: objectName = “keyname”: data

“keyname”: data
To access:
objectName.key OR objectName[“key”]
APIs
Built into every browser are methods and properties that allow you to extend its basic
functionality using JavaScript. This is an example of an application programming interface, or
API. APIs are central to creating dynamic, interactive web applications.

Web APIs are used to display menus, button clicks, etc.

QUESTION: What do you recommend as the best way to study/absorb this rapid material?
Doing a combo of things but wondering the best way to split my time…building? Watch videos?
Read documentation? Play games?

Feeling like i am getting stuck on CSS - really easy for me to get turned around in my code and
concerned since we are moving forward quickly