Notes for a NetBeans IDE 7.4 HTML5 Screencast
- by Geertjan
I'm making a screencast that intends to thoroughly introduce NetBeans IDE 7.4 as a tool for HTML, JavaScript, and CSS developers.
Here's the current outline, additions and other suggestions are welcome.
Getting Started
Downloading NetBeans IDE for HTML5 and PHP
Examining the NetBeans installation directory, especially netbeans.conf
Examining the NetBeans user directory
Command line options for starting NetBeans IDE
Exploring NetBeans IDE
Menus and toolbars
Versioning tools
Options Window
Go through whole Options window
Change look and feels
Adding themes
Syntax coloring
Code templates
Plugin Manager and Plugin Portal
Dark Look and Feel Themes
Toggle line wrap
Emmet
HTML Tidy
NetBeans Cheat Sheets
Creating HTML5 projects
From scratch
From online template, e.g., Twitter Bootstrap
From ZIP file
From folder on disk
From sample
Editing
Useful shortcuts
Alt-Enter: see the current hints
Alt-Shift-DOT/COMMA: expand selection (CTRL instead of Alt on Mac)
Ctrl-Shift-Up/Down: copy up/down
Alt-Shift-Up/Down: move up/down
Alt-Insert: generate code (Lorum Ipsum)
View menu | Show Non-printable Characters
Source menu
Show keyboard shortcut card
Useful hints
Surround with Tag
Remove Surrounding Tag
Useful code completion
Link tag for CSS, show completion
Script tag for JavaScript, show completion
Create code templates in Options window
Useful HTML Palette items
Unordered List
Link
Useful code navigation
Navigator
Navigate menu
Useful project settings
Project-level deployment settings
CSS Preprocessors (SASS/LESS)
Cordova support
Useful window management
Dragging, minimizing, undocking
Ctrl-Shift-Enter: distraction-free mode
Alt-Shift Enter: maximization
Debugging
JavaScript debugger
Deploying
Embedded browser
Responsive design
Inspect in NetBeans mode
Chrome browser with NetBeans plugin
Android and iOS browsers
Cordova makes native packages
On device debugging
On device styling
Documentation
PHP and HTML5 Learning Trail: https://netbeans.org/kb/trails/php.html
Contributing
Social Media: Twitter, Facebook, blogs
Plugin Portal
Planning to complete the above screencast this week, will continue editing this page as more useful features arise in my mind or hopefully in the comments in this blog entry!
