What we'll cover – But First ... – Browsers

What we'll cover

• Browsers and In-Browser Development Tools
  • Chrome
  • Firefox
  • Safari
  • Internet Explorer
  • Edge
• Integrated Development Environments
  • Sublime
  • Atom
  • Cloud 9
  • Webstorm
  • Helpful Plugins

What we'll cover

• Command Line
• Github
  • Creating an account
  • Cloning a repository (repo)
  • Creating your own repository (repo)
  • Forking a repository (repo)
• 2016 Coding & Cocktails curriculum
  • Learning Resources

But First ...

3 Inspiring Female Developers

• Sarah Chipps @sarajchipps
• Erin Summers & Zainab Ghadiyali @wogrammer
• Grace Hopper

Sarah Chipps

Founder, Girl Develop It! & Jewelbots

http://sarajchipps.com/

Erin Summers & Zainab Ghadiyali

Wogrammer

http://www.wogrammer.org/

Grace Hopper

Early Female Computer Scientist

Browsers

• Chrome
• Firefox
• Safari
• Internet Explorer
• Edge
• Other
• CanIUse

Browser Statistics

Source: StatCounter Global Stats - Browser Market Share

In-Browser Development Tools

• Console
  • How do you get there: cmd/ctrl+shift+i OR Chrome menu > More Tools > Developer Tools
  • Used to log information, display data and interact with your document
• Elements
  • How do you get there: right click on your page or element you want to view and choose "Inspect Element"
  • Used to view elements on your page and their styling and positioning

In-Browser Development Tools

• Move the Tools
  • Use tools in a separate window.
  • Dock the tools on the bottom or right side of the screen to optimize view.
• Responsive Design
  • View how page will look on different devices.

Integrated Development Environments (IDEs)

Sublime Text 2

• Natively supports many programming and markup languages
• Functionality is extended by plug-ins
• Fast, Powerful, and Highly Customizable

Integrated Development Environments (IDEs)

Atom

• Free & Open-source - developed by Github
• Functionality is extended by plug-ins
• Desktop application built on web technologies (HTML, JavaScript, CSS, and Node.js integration)

Integrated Development Environments (IDEs)

Cloud 9

• Online code editor and development environment
• Easy Collaboration
• Easily preview in different browser/OS combinations

Integrated Development Environments (IDEs)

Webstorm

• Lightweight & powerful IDE
• Quickly start working on projects.
• Includes smart coding assistance, code completion, navigation features, on-the-fly error detection.

Plugins

What is a plugin?

A plugin is an additional component that will add functionality to an application.

Enables further customization of the application.

How do I install plug-ins?

First we need to install Package Control.

Package Control will make it easier for us to install and keep packages up to date.

Install through Sublime text console: cmd/ctrl + ` (backtick, not apostrophe)

Emmet

Write HTML and CSS faster.

Note: File must be saved with .html extension for emmet to work.

Usage: Use css selectors (# for ids and . for classes) and html tags with tab completion.

Type "html:5" and press tab to start a new page.

Bracket Highlighter

Quick visual display to find closing/opening brackets.

ColorPicker

Pick and change colors easily.

Usage: ctrl + shift + c to bring up a visual color picker

SublimeLinter

Check code for stylistic or programming errors as you go.

Note: For linting Javascript or css on a Windows machine, Node.js must be installed.

Markdown Editing/Markdown Preview

Editing Link

Preview Link

Syntax highlighting and previewing markdown content you've created.

Usage: cmd + shift + p and search for Markdown Preview. Then choose how to preview.

Make it pretty with themes!

Themes customize coloring

Install through Package Control

• Soda Theme
• Dracula Theme

Other useful commands:

• Reindent - help align source code for easier viewing
• Keyboard shortcuts
  • Select all: ctrl/cmd + a
  • Cut: ctrl/cmd + x
  • Copy: ctrl/cmd + c
  • Paste: ctrl/cmd + v
  • Undo: ctrl/cmd + z
  • Save: ctrl/cmd + s
  • Chrome Devtools: ctrl/cmd + shift + i
  • Sublime Command Palette: ctrl/cmd + shift + p

Other useful commands:

• Splitting the screen - view multiple files at one time
  • Multi-column: alt + shift + 1-4
  • Multi-row: alt + shift + 8 or 9
  • Grid of 4: alt + shift + 5
• Indentations/Tabbing - easily add and remove tabs on multiple lines at once
  • Remove tabs: select one or more lines and shift + tab
  • add tabs to multiple lines at once: select lines and tab
• Move Lines
  • Up: ctrl/cmd + shift + up arrow
  • Down: ctrl/cmd + shift + down arrow
• Multi-cursor - change multiple lines at one time
  • Make selection then ctrl/cmd + d

What is the command line used for?

• Interaction with Git
• Navigating the file system
• Installing/Updating third-party packages like jQuery, Bootstrap, etc
• Compiling preprocessors like Sass, LESS, etc
• Use task runners like gulp or grunt
• Scaffolding new projects

Command Line

• Mac
  • iTerm: Link
  • oh-my-zsh: Link
• Windows
  • ConEmu: Link
  • Under Startup > Specified named task dropdown choose {Bash::Git bash}