SlideShare a Scribd company logo
Brackets.io
Tools and Resources for web developers
INSTRUCTOR:
LAURENCE SVEKIS
Course instructor : Laurence Svekis
- Over 300 courses in technology and
web applications.
- 20 years of JavaScript web
programming experience
- 500,000+ students across multiple
platforms
- Digital instructor since 2002
READY TO HELP YOU LEARN and
ANSWER ANY questions you may
have.
Code Editor Brackets
A modern, open source text editor that
understands web design.
http://brackets.io/
Adobe How to Wiki
https://github.com/adobe/brackets
Download and install brackets!
Set Folder create working file index.html
Select File > Open Folder
Selects your root folder to open -
good for projects so that you can see
all the files you want to work with.
Brackets considers this folder your
"project"
Select File > New
Create a new file.
Give the file a name index.html using
File > Save As
Add some HTML to your file.
<h1>Hello World</h1> File > Save
SHORTCUTS
Once you are familiar with Brackets
you can use shortcuts to speed up
your development time.
https://github.com/adobe/brackets/wik
i/Brackets-Shortcuts
Ctrl-+ Increase Font Size
Ctrl-- Decrease Font Size
Ctrl-C edit.copy Copy
Ctrl-A edit.selectAll Select All
Ctrl-H edit.replace Replace
Ctrl-Shift-H view/hide Sidebar
Ctrl-N file.new New File
Ctrl-S file.save Save
Ctrl-W file.close Close
Customize View
Split workspace - provides a view of
2 different files. Can be controlled
within the menu. Shortcut to change
view
Set default space sizes and file type
and see error messages. When you
save the file if there are errors
they will show. INS or OVR option
will set behavior.
Productivity Options And Debug
Edit > Auto Close Braces
Will automatically close braces “
View >
Word wrap and Line numbers
Viewing of code in editor
Debug > Open Preferences File
Opens JSON preferences for the
editor. You can make updates here as
well if needed to the editor
settings.
View options
View options
Lint Files on Save : Brackets runs
ESLint on JavaScript files when you
initially open them and whenever you
save changes
Quick View on Hover : CSS or HTML
files hover over any color value or
gradient Brackets will display a
preview works with images as well.
Themes
Customs loaded with default themes.
You can add more themes as desired.
https://github.com/Brackets-themes/
Add new themes using extension
manager and then select the themes
tab.
Extensions
Add extensions to extend on brackets.
Best place is the File > Extension
Manager but you can also download and
install from URL
https://github.com/adobe/brackets/wik
i/Brackets-Extensions
https://registry.brackets.io/
Top 5 must have extensions
Beautify.io - makes your code look
nice.
Documents Toolbar - tab toolbar to
easily switch between open files.
HTML5 Template - Starter template
Lorem Pixel - add placeholder images
CSSLint - CSS lint support
Once active you need to reopen
brackets and you will see the new
extensions in the menu.
Live Preview
1. Select File > Live Preview.
2. Lightning bolt icon (top right of
the window)
3. Ctrl+Alt+P (Windows/Linux) or
Command+Alt+P (Mac)
https://github.com/adobe/brackets/wik
i/Live-Preview-Overview
Make changes to CSS and HTML and
you'll instantly see those changes on
screen. Also see where your CSS
selector is being applied in the
browser by simply putting your cursor
on it.
Inline Editors
Instead of jumping between file tabs,
Brackets lets you open a window into
the code you care about most. Want to
work on the CSS that applies to a
specific ID? Put your mouse cursor on
that ID, push Command / Ctrl+E and
Brackets will show you all the CSS
selectors with that ID in an inline
window so you can work on your code
side-by-side without any popups.
Thank you for your support
If you have any questions or comments please let me
know. I’m always happy to hear from you!!!
Find out more about my courses at http://discoveryvip.com/
Brackets Editor Tools and Resources for web developers
Get the Course : https://www.udemy.com/course/brackets-io-tutorial/
Course instructor : Laurence Svekis -
providing online training to over
500,000 students across hundreds of
courses and many platforms.

More Related Content

What's hot (12)

PPTX
Ready the Technology
jhucte
 
PPT
How to Embed PowerPoint Presentation Using Slideshare
Joie Ocon
 
PPTX
Directions For Uploading The Tell Project
Jana Baxter
 
DOC
Slideshare
Beth Sockman
 
PPTX
A blog can be a fantastic teaching tool
Fiona Beal
 
DOCX
Microsoft html5 web camp june 15 in nyc notes
Isidore Gotto
 
PPT
How uploading a presentation on the blog?
pripri
 
PPTX
Whats New In Visual Studio 2010
Daniel Egan
 
PPTX
E portfolio's guide presentation
spike21
 
PDF
Shareist
Eleanor Trinidad
 
PPT
How To Make A Webpage Using PowerPoint
Meredith
 
Ready the Technology
jhucte
 
How to Embed PowerPoint Presentation Using Slideshare
Joie Ocon
 
Directions For Uploading The Tell Project
Jana Baxter
 
Slideshare
Beth Sockman
 
A blog can be a fantastic teaching tool
Fiona Beal
 
Microsoft html5 web camp june 15 in nyc notes
Isidore Gotto
 
How uploading a presentation on the blog?
pripri
 
Whats New In Visual Studio 2010
Daniel Egan
 
E portfolio's guide presentation
spike21
 
How To Make A Webpage Using PowerPoint
Meredith
 

Similar to Brackets code editor guide (20)

PDF
Web development resources brackets
Laurence Svekis ✔
 
PPTX
Adobe Brackets - Introduction/ walkthrough (some basic features)
Sahil Bansal
 
PPTX
Introduction to Adobe Brackets
Mihai Corlan
 
PDF
JavaScript debugging diagnostic web tools and firefox
Gennady Feldman
 
PPTX
PPT ON SEMINAR REPORT.pptx. bhvhvhchchvhchch
yashsharmaa0209
 
PDF
brackets
Ankur Chauhan
 
PPTX
Web design-1.pptx
RabiaAsif31
 
PPTX
Introduction to HTML+CSS+Javascript.pptx
wowiw65045
 
PPTX
Introduction to HTML+CSS+Javascript.pptx
yashsharmaa0209
 
PDF
Discover the power of browser developer tools
ylefebvre
 
PPT
Web Design 101
vegdwk
 
KEY
Getting to Grips with Firebug - Anthony Hortin - WordCamp Sydney
WordCamp Sydney
 
PPTX
Unit I- HTML, CSS, Bootstrap .pptx
dikshaahire256
 
PPTX
Brackets text editor
AsatbekKhalimjonov
 
PDF
Getting started with dev tools (4/10/17 DC)
Daniel Friedman
 
PPTX
Workflow Essentials for Web Development
Xavier Porter
 
PPTX
Tech Winter Break - GDG on Campus - PIET
khushi15250705
 
PPTX
Introduction to HTML+CSS+Javascript.pptx
SadiaBaig6
 
PPTX
Introduction to HTML+CSS+Javascript.pptx
PedroGonzalez915307
 
Web development resources brackets
Laurence Svekis ✔
 
Adobe Brackets - Introduction/ walkthrough (some basic features)
Sahil Bansal
 
Introduction to Adobe Brackets
Mihai Corlan
 
JavaScript debugging diagnostic web tools and firefox
Gennady Feldman
 
PPT ON SEMINAR REPORT.pptx. bhvhvhchchvhchch
yashsharmaa0209
 
brackets
Ankur Chauhan
 
Web design-1.pptx
RabiaAsif31
 
Introduction to HTML+CSS+Javascript.pptx
wowiw65045
 
Introduction to HTML+CSS+Javascript.pptx
yashsharmaa0209
 
Discover the power of browser developer tools
ylefebvre
 
Web Design 101
vegdwk
 
Getting to Grips with Firebug - Anthony Hortin - WordCamp Sydney
WordCamp Sydney
 
Unit I- HTML, CSS, Bootstrap .pptx
dikshaahire256
 
Brackets text editor
AsatbekKhalimjonov
 
Getting started with dev tools (4/10/17 DC)
Daniel Friedman
 
Workflow Essentials for Web Development
Xavier Porter
 
Tech Winter Break - GDG on Campus - PIET
khushi15250705
 
Introduction to HTML+CSS+Javascript.pptx
SadiaBaig6
 
Introduction to HTML+CSS+Javascript.pptx
PedroGonzalez915307
 
Ad

More from Laurence Svekis ✔ (20)

PDF
Quiz JavaScript Objects Learn more about JavaScript
Laurence Svekis ✔
 
PDF
JavaScript Lessons 2023 V2
Laurence Svekis ✔
 
PDF
JavaScript Lessons 2023
Laurence Svekis ✔
 
PDF
Top 10 Linkedin Tips Guide 2023
Laurence Svekis ✔
 
PDF
JavaScript Interview Questions 2023
Laurence Svekis ✔
 
PDF
Code examples javascript ebook
Laurence Svekis ✔
 
PDF
Javascript projects Course
Laurence Svekis ✔
 
PDF
10 java script projects full source code
Laurence Svekis ✔
 
PDF
Chrome DevTools Introduction 2020 Web Developers Guide
Laurence Svekis ✔
 
PDF
Web hosting get start online
Laurence Svekis ✔
 
PDF
JavaScript guide 2020 Learn JavaScript
Laurence Svekis ✔
 
PDF
Web hosting Free Hosting
Laurence Svekis ✔
 
PPTX
Google Apps Script for Beginners- Amazing Things with Code
Laurence Svekis ✔
 
PPTX
Local SQLite Database with Node for beginners
Laurence Svekis ✔
 
PDF
Introduction to Node js for beginners + game project
Laurence Svekis ✔
 
PPTX
JavaScript DOM - Dynamic interactive Code
Laurence Svekis ✔
 
PPTX
JavaScript Advanced - Useful methods to power up your code
Laurence Svekis ✔
 
PPTX
Monster JavaScript Course - 50+ projects and applications
Laurence Svekis ✔
 
PPTX
JavaScript Objects and OOP Programming with JavaScript
Laurence Svekis ✔
 
PPTX
JavaScript Core fundamentals - Learn JavaScript Here
Laurence Svekis ✔
 
Quiz JavaScript Objects Learn more about JavaScript
Laurence Svekis ✔
 
JavaScript Lessons 2023 V2
Laurence Svekis ✔
 
JavaScript Lessons 2023
Laurence Svekis ✔
 
Top 10 Linkedin Tips Guide 2023
Laurence Svekis ✔
 
JavaScript Interview Questions 2023
Laurence Svekis ✔
 
Code examples javascript ebook
Laurence Svekis ✔
 
Javascript projects Course
Laurence Svekis ✔
 
10 java script projects full source code
Laurence Svekis ✔
 
Chrome DevTools Introduction 2020 Web Developers Guide
Laurence Svekis ✔
 
Web hosting get start online
Laurence Svekis ✔
 
JavaScript guide 2020 Learn JavaScript
Laurence Svekis ✔
 
Web hosting Free Hosting
Laurence Svekis ✔
 
Google Apps Script for Beginners- Amazing Things with Code
Laurence Svekis ✔
 
Local SQLite Database with Node for beginners
Laurence Svekis ✔
 
Introduction to Node js for beginners + game project
Laurence Svekis ✔
 
JavaScript DOM - Dynamic interactive Code
Laurence Svekis ✔
 
JavaScript Advanced - Useful methods to power up your code
Laurence Svekis ✔
 
Monster JavaScript Course - 50+ projects and applications
Laurence Svekis ✔
 
JavaScript Objects and OOP Programming with JavaScript
Laurence Svekis ✔
 
JavaScript Core fundamentals - Learn JavaScript Here
Laurence Svekis ✔
 
Ad

Recently uploaded (20)

PDF
Characteristics, Strengths and Weaknesses of Quantitative Research.pdf
Thelma Villaflores
 
PPTX
How to Send Email From Odoo 18 Website - Odoo Slides
Celine George
 
PPTX
How to Create a Customer From Website in Odoo 18.pptx
Celine George
 
PDF
Stokey: A Jewish Village by Rachel Kolsky
History of Stoke Newington
 
PDF
Horarios de distribución de agua en julio
pegazohn1978
 
PDF
Is Assignment Help Legal in Australia_.pdf
thomas19williams83
 
PPTX
care of patient with elimination needs.pptx
Rekhanjali Gupta
 
PPTX
How to Manage Allocation Report for Manufacturing Orders in Odoo 18
Celine George
 
PPTX
HUMAN RESOURCE MANAGEMENT: RECRUITMENT, SELECTION, PLACEMENT, DEPLOYMENT, TRA...
PRADEEP ABOTHU
 
PDF
Reconstruct, Restore, Reimagine: New Perspectives on Stoke Newington’s Histor...
History of Stoke Newington
 
PPTX
Controller Request and Response in Odoo18
Celine George
 
PPTX
How to Configure Re-Ordering From Portal in Odoo 18 Website
Celine George
 
PPTX
Introduction to Biochemistry & Cellular Foundations.pptx
marvinnbustamante1
 
PDF
Exploring the Different Types of Experimental Research
Thelma Villaflores
 
PDF
Governor Josh Stein letter to NC delegation of U.S. House
Mebane Rash
 
PDF
Week 2 - Irish Natural Heritage Powerpoint.pdf
swainealan
 
PDF
Biological Bilingual Glossary Hindi and English Medium
World of Wisdom
 
PPTX
Post Dated Cheque(PDC) Management in Odoo 18
Celine George
 
PPTX
DIGITAL CITIZENSHIP TOPIC TLE 8 MATATAG CURRICULUM
ROBERTAUGUSTINEFRANC
 
PPTX
Difference between write and update in odoo 18
Celine George
 
Characteristics, Strengths and Weaknesses of Quantitative Research.pdf
Thelma Villaflores
 
How to Send Email From Odoo 18 Website - Odoo Slides
Celine George
 
How to Create a Customer From Website in Odoo 18.pptx
Celine George
 
Stokey: A Jewish Village by Rachel Kolsky
History of Stoke Newington
 
Horarios de distribución de agua en julio
pegazohn1978
 
Is Assignment Help Legal in Australia_.pdf
thomas19williams83
 
care of patient with elimination needs.pptx
Rekhanjali Gupta
 
How to Manage Allocation Report for Manufacturing Orders in Odoo 18
Celine George
 
HUMAN RESOURCE MANAGEMENT: RECRUITMENT, SELECTION, PLACEMENT, DEPLOYMENT, TRA...
PRADEEP ABOTHU
 
Reconstruct, Restore, Reimagine: New Perspectives on Stoke Newington’s Histor...
History of Stoke Newington
 
Controller Request and Response in Odoo18
Celine George
 
How to Configure Re-Ordering From Portal in Odoo 18 Website
Celine George
 
Introduction to Biochemistry & Cellular Foundations.pptx
marvinnbustamante1
 
Exploring the Different Types of Experimental Research
Thelma Villaflores
 
Governor Josh Stein letter to NC delegation of U.S. House
Mebane Rash
 
Week 2 - Irish Natural Heritage Powerpoint.pdf
swainealan
 
Biological Bilingual Glossary Hindi and English Medium
World of Wisdom
 
Post Dated Cheque(PDC) Management in Odoo 18
Celine George
 
DIGITAL CITIZENSHIP TOPIC TLE 8 MATATAG CURRICULUM
ROBERTAUGUSTINEFRANC
 
Difference between write and update in odoo 18
Celine George
 

Brackets code editor guide

  • 1. Brackets.io Tools and Resources for web developers
  • 2. INSTRUCTOR: LAURENCE SVEKIS Course instructor : Laurence Svekis - Over 300 courses in technology and web applications. - 20 years of JavaScript web programming experience - 500,000+ students across multiple platforms - Digital instructor since 2002 READY TO HELP YOU LEARN and ANSWER ANY questions you may have.
  • 3. Code Editor Brackets A modern, open source text editor that understands web design. http://brackets.io/ Adobe How to Wiki https://github.com/adobe/brackets Download and install brackets!
  • 4. Set Folder create working file index.html Select File > Open Folder Selects your root folder to open - good for projects so that you can see all the files you want to work with. Brackets considers this folder your "project" Select File > New Create a new file. Give the file a name index.html using File > Save As Add some HTML to your file. <h1>Hello World</h1> File > Save
  • 5. SHORTCUTS Once you are familiar with Brackets you can use shortcuts to speed up your development time. https://github.com/adobe/brackets/wik i/Brackets-Shortcuts Ctrl-+ Increase Font Size Ctrl-- Decrease Font Size Ctrl-C edit.copy Copy Ctrl-A edit.selectAll Select All Ctrl-H edit.replace Replace Ctrl-Shift-H view/hide Sidebar Ctrl-N file.new New File Ctrl-S file.save Save Ctrl-W file.close Close
  • 6. Customize View Split workspace - provides a view of 2 different files. Can be controlled within the menu. Shortcut to change view Set default space sizes and file type and see error messages. When you save the file if there are errors they will show. INS or OVR option will set behavior.
  • 7. Productivity Options And Debug Edit > Auto Close Braces Will automatically close braces “ View > Word wrap and Line numbers Viewing of code in editor Debug > Open Preferences File Opens JSON preferences for the editor. You can make updates here as well if needed to the editor settings.
  • 8. View options View options Lint Files on Save : Brackets runs ESLint on JavaScript files when you initially open them and whenever you save changes Quick View on Hover : CSS or HTML files hover over any color value or gradient Brackets will display a preview works with images as well.
  • 9. Themes Customs loaded with default themes. You can add more themes as desired. https://github.com/Brackets-themes/ Add new themes using extension manager and then select the themes tab.
  • 10. Extensions Add extensions to extend on brackets. Best place is the File > Extension Manager but you can also download and install from URL https://github.com/adobe/brackets/wik i/Brackets-Extensions https://registry.brackets.io/ Top 5 must have extensions Beautify.io - makes your code look nice. Documents Toolbar - tab toolbar to easily switch between open files. HTML5 Template - Starter template Lorem Pixel - add placeholder images CSSLint - CSS lint support Once active you need to reopen brackets and you will see the new extensions in the menu.
  • 11. Live Preview 1. Select File > Live Preview. 2. Lightning bolt icon (top right of the window) 3. Ctrl+Alt+P (Windows/Linux) or Command+Alt+P (Mac) https://github.com/adobe/brackets/wik i/Live-Preview-Overview Make changes to CSS and HTML and you'll instantly see those changes on screen. Also see where your CSS selector is being applied in the browser by simply putting your cursor on it.
  • 12. Inline Editors Instead of jumping between file tabs, Brackets lets you open a window into the code you care about most. Want to work on the CSS that applies to a specific ID? Put your mouse cursor on that ID, push Command / Ctrl+E and Brackets will show you all the CSS selectors with that ID in an inline window so you can work on your code side-by-side without any popups.
  • 13. Thank you for your support If you have any questions or comments please let me know. I’m always happy to hear from you!!! Find out more about my courses at http://discoveryvip.com/ Brackets Editor Tools and Resources for web developers Get the Course : https://www.udemy.com/course/brackets-io-tutorial/ Course instructor : Laurence Svekis - providing online training to over 500,000 students across hundreds of courses and many platforms.