Tips & Tricks to save you hours!

Absolute must shortcuts!

Command Windows  Mac Preview
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 selected text into clipboard
Ctrl+C ⌘+C
Paste from clipboard
Ctrl+V ⌘+V
Go back one change
Ctrl+Z ⌘+Z
Redo the change you undid
Ctrl+Y ⌘+Shift+Z
Search for some text in the window, like a div class name
Ctrl+F ⌘+F
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
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 for windows

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


Flex Hell Exercise #2

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.0

Flex Exercise #1

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

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.0


  • 1
  • 4
  • 5