Brackets code editor guide
1 like150 views
Brackets.io is a free, open source text editor created by Adobe for web development. The document provides an overview of Brackets' features like code editing, live preview, extensions, and shortcuts to help speed up the development process. It also introduces the course instructor, Laurence Svekis, who has 20 years of JavaScript experience and has taught over 500,000 students online.
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.