Video from class

Here are some great tutorials:

• http://javascript-roadtrip.codeschool.com/levels/1/challenges/2
• https://www.codecademy.com/courses/getting-started-v2/0/1?curriculum_id=506324b3a7dffd00020bf661
• https://www.freecodecamp.org/challenges/comment-your-javascript-code

CodePens

See the Pen JS INTRO by Angel Grablev (@agrublev) on CodePen.

See the Pen jQuery by Angel Grablev (@agrublev) on CodePen.

See the Pen jQuery by Angel Grablev (@agrublev) on CodePen.

Absolute must shortcuts!

Command	Windows	Mac	Preview
Cut Remove selected text and place it in your clipboard so you can paste it elsewhere. Essential for moving a box into another box!	Ctrl+X	⌘+X
Copy Copy selected text into clipboard	Ctrl+C	⌘+C
Paste Paste from clipboard	Ctrl+V	⌘+V
Undo Go back one change	Ctrl+Z	⌘+Z
Redo Redo the change you undid	Ctrl+Y	⌘+Shift+Z
Find Search for some text in the window, like a div class name	Ctrl+F	⌘+F
Find/Replace Replace a given text like parent to be replaced where found with flex	Ctrl+Shift+F	⌘+Shift+F
Select next/previous word Highlight each next word quickly to either erase it, copy it, or cut it. An example would be to select a class=”flex” declaration	Alt + Shift + Arrows	Alt + Shift + Arrows
Select / highlight a block of text Hightlight an entire line of text quickly	CTRL+SHIFT+Arrows	⌘+Shift+Arrows
Beginning of the line Quickly move your cursor to the beginning of the line without highlighting	CTRL+LEFT	⌘+LEFT
Next Chrome Tab	CTRL + TAB	⌘+TAB
Switch to Previous Tab	CTRL + SHIFT + TAB	⌘+ SHIFT +TAB
Switch between Applications	Win + Tab	Ctrl+Tab
Switch between the windows of current application	Alt+~	⌘+~

Advanced clipboard

To be able to paste more than the last thing you copied for mac you can use https://tapbots.com/pastebot/ for windows http://www.joejoesoft.com/vcms/97/

Basically instead of clicking Ctrl/Cmd+V you do something like Ctrl/Cmd+Shift+V and it shows you the last 50 things you copied like this

Let’s really get down and dirty with flex

We’ll need to recreate the following box/text setup ourselves

Tips & Tricks

• Break this down into sections!! (tackle each box one at a time, when done collapse)
• If there is text that isn’t surrounded by a border on every side (like one) it’s going to have elements appear after it, otherwise there should be a whole box for every other text you see
• To save time add a class .flex { display: flex; } so you can easily add it to each div that has columns

Use this CodePen and click the Fork button to create your own copy!  Scroll down for final working code example:

See the Pen FlexHell by Angel Grablev (@agrublev) on CodePen.

The Goal

We want to add 3 columns which contain a bullet image, a title, and some long text. The final result would look like this:

Use this src for the image https://ucsbwebdev.fzilla.com/first/bullet.png

Remember, the trick is to always set a parent for any columns you want, aka items that appear side by side should have 1 immediate parent!

Scroll down for final solution:

See the Pen MGwYKZ by Angel Grablev (@agrublev) on CodePen.