際際滷

際際滷Share a Scribd company logo

Adobe Brackets - Introduction/ walkthrough (some basic features)

Download as PPTX, PDF
S
Sahil Bansal

Introduction to brackets with basic walkthorugh and some shortcuts.perfect for student demonstration can be use to show a basic demonstration of dream weaver with al the features..

1 of 20
Download to read offline
Adobe Brackets BY SAHIL BANSAL BCA 4B(Moarning) 08217702014
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
BRACKETS VS. EDGE CODE
0 Beginning students dont 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:
0 Create HTML/ CSS in Notepad or Text Wrangler/slideshow/adobe-brackets-introduction-walkthrough-some-basic-features/60707945/ 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/slideshow/adobe-brackets-introduction-walkthrough-some-basic-features/60707945/ 0 Save file (again) 0 Refresh (or reopen browser)
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
Adobe Brackets - Introduction/ walkthrough (some basic features)
0 Minimal (by design) 0 File > New(OPEN DOCUMENT)
0 Ctrl + Shift + o [quick open file] 0 Ctrl + e [quick edit]
0 Ctrl + k [quick docs] 0 Read more takes you to: http://docs.webplatform.org/wiki/css/properties/float
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/slideshow/adobe-brackets-introduction-walkthrough-some-basic-features/60707945/ 0 Edit > HTML Templates
0 Choose from list
0 Starting HTML5 document 0 Again, let students focus on learning, not process
0 Show Shortcuts built in as of sprint 15
0 CanIUse inline version of CanIUse.com site
0 W3C validator code should validate
0 Hover preview quickly see images/ colors
0 Fonts add fonts to page Brackets relies on Google fonts, Edge Code on Edge Web Fonts 0 Edit > Web Fonts/slideshow/adobe-brackets-introduction-walkthrough-some-basic-features/60707945/ 0 For Brackets, need to include following line at top of CSS file @import url(/slideshow/adobe-brackets-introduction-walkthrough-some-basic-features/60707945/);
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)
ADOBE BRACKETS 0 http://download.brackets.io/

More Related Content

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
  • 4. 0 Beginning students dont 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/slideshow/adobe-brackets-introduction-walkthrough-some-basic-features/60707945/ 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/slideshow/adobe-brackets-introduction-walkthrough-some-basic-features/60707945/ 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/slideshow/adobe-brackets-introduction-walkthrough-some-basic-features/60707945/ 0 Edit > HTML Templates
  • 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/slideshow/adobe-brackets-introduction-walkthrough-some-basic-features/60707945/ 0 For Brackets, need to include following line at top of CSS file @import url(/slideshow/adobe-brackets-introduction-walkthrough-some-basic-features/60707945/);
  • 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)