Geertjan's Blog

  • October 22, 2013

Notes for a NetBeans IDE 7.4 HTML5 Screencast

Geertjan Wielenga
Product Manager

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
  • 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-R: instant rename
      • 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
      • Bookmarks window
    • 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
      • Vertical and horizontal split
      • Copy file path
      • Terminal Emulator
  • 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
  • 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
  • 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!

Join the discussion

Comments ( 5 )
  • guest Monday, October 21, 2013

    Sounds great, but maybe this is too big for just one screencast? Maybe this should be a little series?

  • Vignesh Arjunan Tuesday, October 22, 2013


  • fortruth Tuesday, October 22, 2013

    hi Geertjan. I am a nb hobby,

    Would I follow you in this series, and translate them to Chinese?

  • Djamel TORCHE Tuesday, October 22, 2013

    Excellent initiative,

    You might talk about the support of some web frameworks.


  • Brian Wednesday, October 23, 2013

    Looking forward to this Geertjan.

    Thumbs up and thanks

Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.