![0 Ctrl + Shift + o
[quick open file]
0 Ctrl + e [quick edit]](https://image.slidesharecdn.com/brackets-160410043401/85/Adobe-Brackets-Introduction-walkthrough-some-basic-features-9-320.jpg)
![0 Ctrl + k [quick docs]
0 Read more takes you to:
http://docs.webplatform.org/wiki/css/properties/float](https://image.slidesharecdn.com/brackets-160410043401/85/Adobe-Brackets-Introduction-walkthrough-some-basic-features-10-320.jpg)
Adobe Brackets - Introduction/ walkthrough (some basic features)
- 1. Adobe Brackets BY SAHIL BANSAL BCA 4B(Moarning) 08217702014
- 2. 0 Tool for editing HTML, CSS, and JavaScript files 0 Written in HTML, CSS, and JavaScript 0 Extensible 0 Comes in two flavors 0 Brackets – open source (free) 0 http://download.brackets.io/ 0 Edge Code – part of Creative Cloud 0 Extended with Adobe specific enhancements 0 Will discuss more when covering web fonts today
- 3. BRACKETS VS. EDGE CODE
- 4. • 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:
- 5. • 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)
- 6. 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
- 8. 0 Minimal (by design) 0 File > New(OPEN DOCUMENT)
- 9. 0 Ctrl + Shift + o [quick open file] 0 Ctrl + e [quick edit]
- 10. 0 Ctrl + k [quick docs] 0 Read more takes you to: http://docs.webplatform.org/wiki/css/properties/float
- 11. Brackets Extensions • 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
- 12. 0 Choose from list
- 13. 0 Starting HTML5 document 0 Again, let students focus on learning, not process
- 14. 0 Show Shortcuts – built in as of sprint 15
- 15. 0 CanIUse – inline version of CanIUse.com site
- 16. 0 W3C validator – code should validate
- 17. 0 Hover preview – quickly see images/ colors
- 18. 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(…);
- 19. 0 Brackets is an editor for HTML, CSS, and JavaScript 0 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)