adobe brackets - introduction/ walkthrough (some basic features)

AdobeBrackets

BY SAHIL BANSALBCA 4B(Moarning)08217702014

Brackets?

0 Tool for editing HTML, CSS, and JavaScript files0 Written in HTML, CSS, and JavaScript0 Extensible

0 Comes in two flavors0 Brackets – open source (free)

0 http://download.brackets.io/

0 Edge Code – part of Creative Cloud0 Extended with Adobe specific enhancements0 Will discuss more when covering web fonts today

BRACKETS VS. EDGE CODE

WHY BRACKETS?

•0 Beginning students don’t need to know Dreamweaver

• 0 They need to know HTML and CSS

• 0 Dreamweaver will help their productivity after they know the basics

•0 Think of Brackets as a replacement for:

Basic Process

•0 Create HTML/ CSS in Notepad or Text Wrangler…

•0 Save file

•0 Open browser, point to saved file

•0 Use debug tools to identify problem

•0 Modify HTML/ CSS in Notepad or Text Wrangler…

•0 Save file (again)

•0 Refresh (or reopen browser)

Basic Student Process

0 Student focuses on process (painful after time)

0 Brackets – live preview

0 Brackets on one side, browser on other side

0 Make a change to code in Brackets and immediately see change in browser

0 Now student can focus on learning HTML and CSS

Example

Brackets Interface

0 Minimal (by design)0 File > New(OPEN DOCUMENT)

Keyboard Shortcuts

0 Ctrl + Shift + o [quick open file]

0 Ctrl + e [quick edit]

Keyboard Shortcuts

0 Ctrl + k [quick docs]

0 Read more takes you to: http://docs.webplatform.org/wiki/css/properties/float

BracketsExtensions•0 Extensible

• 0 Help > Show Extensions Folder

• 0 https://github.com/adobe/brackets/wiki/Brackets‐ Extensions

• 0 Store zip file locally

• 0 Extract contents into extensions folder

• 0 Reload Brackets

• 0 For example – HTML templates extension

• 0 When create file…

• 0 Edit > HTML Templates

HTML Templates

0 Choose from list

HTML Templates

0 Starting HTML5 document0 Again, let students focus on learning, not process

Extensions

0 Show Shortcuts – built in as of sprint 15

Extensions – CanIUse

0 CanIUse – inline version of CanIUse.com site

Extensions ‐ Validate

0 W3C validator – code should validate

Extensions ‐ Hover

0 Hover preview – quickly see images/ colors

Extensions ‐ Fonts

0 Fonts – add fonts to page – Brackets relies on Google fonts, Edge Code on Edge Web Fonts

0 Edit > Web Fonts…0 For Brackets, need to include following line at top of

CSS file@import url(…);

Review

0 Brackets is an editor for HTML, CSS, and JavaScript0 It is highly extensible (and there are already a number

of developed extensions)0 It is open source (free)0 There is a corresponding Adobe product (Edge Code)

ADOBE BRACKETS0 http://download.brackets.io/