adobe brackets - introduction/ walkthrough (some basic features)
Post on 15-Feb-2017
186 Views
Preview:
TRANSCRIPT
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/
top related