In the Libraries (for CSU Libraries Staff only)

• Web authoring procedures: FrontPage, Dreamweaver, and Libraries templates
• Drupal authoring procedures
• General tips

At CSU

• Computer Applications Training handouts (login with your eID; includes Dreamweaver, Photoshop and InDesign)
• Web hosting services provided by Academic Computing and Networking Services

On the Web

General Tutorials

• W3Schools: concise web authoring tutorials including HTML, CSS, JavaScript, PHP and SQL
• Web development cheat sheets - printable quick references

Editors

• Free HTML/Web Editors
• Web page WYSIWYG editors
  • Adobe Dreamweaver
    • Adobe Dreamweaver CS6 new and improved features - fluid grid layout, CSS3 transitions, Live View, Multiscreen Preview, mobile development, and Business Catalyst site integration
    • Adobe Dreamweaver CS6 video tutorials
  • Free/Open Source
    • Amaya: a free open-source editor/browser from W3C; WYSIWYG is basic
    • BlueGriffon: a free basic editor with Gecko rendering, requires commercial add-on for CSS
    • KompoZer: based on Nvu, latest version is from 2007
    • Nvu: a free open-source editor for Linux, Windows and Macintosh
• Web page HTML/code editors for Windows
• • Microsoft Visual Studio: large commercial tool for software development (3GB)
    • Visual Studio 2012 release candidates (10GB)
    • Microsoft Visual Web Developer Express: free version of Microsoft Visual Studio for ASP.NET Web applications using Visual Basic, C# and HTML (3GB)
  • Microsoft Expression Web: lower-cost WYSIWYG and code editor; supports PHP, ASP.NET, HTML5 and CSS3 (2GB)
  • Microsoft WebMatrix: free (v. 2 release candidate) and simple, manages sites, files, databases and reports; code editor is not WYSIWYG
  • Aptana Studio: free
  • HTML-Kit: free
  • Notepad++: free
  • notepad2: free
  • TextPad: 30-day trial
  • Eclipse and NetBeans are Java editors that can edit HTML and PHP files with suitable plugins.
  • WinDiff: find differences between two files (similar to Unix diff command)
• Linux text editors (the following are installed on our Web servers)
  • Nano - a simple editor for Unix beginners (commands are listed at the bottom)
  • Vi - for Linux system administrators (installed on all Unix systems)
  • Vim - an improved version of Vi for programmers
  • Emacs - a powerful editor for programmers

Browser Tools

• Internet Explorer Developer Center
  • Developer Toolbar (Internet Explorer 7)
  • F12 Developer Tools (Internet Explorer 8+ )
  • • Change Browser or Document mode to IE7-9, compatibility view or quirks mode, validate HTML, CSS, feeds or links, inspect HTML or CSS, disable images or CSS, resize, color picker
• Firefox add-ons for web developers
  • Page diagnostics
  • • Web Developer - Adds a menu and a toolbar with various web developer tools.
      Disable JavaScript, CSS or images, view and edit CSS and HTML, view cookies, view element information, resize window, view generated source, and view CSS and JavaScript errors
    • Firebug - Development tools to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
    • View Formatted Source - Displays formatted and color-coded source for each element.
    • View Source Chart - Draws a color-coded chart of a Web page's source code
    • CSS Viewer - View CSS properties
    • IE Tab 2 - Simulate Web browsing through Internet Explorer
  • Page validation
    • Web Developer - Validate HTML, CSS, feeds or accessibility
    • Link Checker - Checks validity of links on any page
    • Spell Checker - Check spelling of a published Web page
    • Total Validator - Check HTML (even XHTML5), accessibility, links, spelling, and CSS.
  • Site information
    • FlagFox - Website physical location, safety checks, translation, validation, etc.
  • Designer utilities
  • • ColorZilla - Advanced Eyedropper, ColorPicker, Page Zoomer and other color tools.
    • MeasureIt - Draw out a ruler to get the pixel width and height of any elements
    • FireShot - Screen captures
    • Greasemonkey - Customize the way a web page displays using small bits of JavaScript.
    • Stylish - Customize the way a web page displays using user styles.
• Google Chrome
  • Chrome Developer Tools
    • Right-click any element and click Inspect Element to see and edit its HTML and CSS.
    • Click the Network tab and refresh to see file sizes and load times of all files for the page.
    • Click the console and reload the page to debug or execute JavaScript from the command line.
  • Chrome extensions for web developers
    • Web Developer - same tools as the Firefox add-on, but without the toolbar clutter
    • Wappalyzer - quickly identify a website's software (web server, operating system, content management systems, JavaScript frameworks, analytics)
    • Check My Links
    • Page diagnostics: Web Developer Checklist, Firebug Lite, YSlow, jsError, HTML5 Outliner, IE Tab or IE Tab Multi
    • Site information: SEO for Chrome, Alexa Traffic Rank, PageRank, PageRank Status, IP Address and Domain Info
    • Designer utilities: Stylish, Screen Capture, MeasureIt, Page Ruler, ColorPicker, Window Resizer, Alt CSS
  • Other Chrome extensions I find indispensable
    • Xmarks - cross-browser bookmark synchronizer
    • LastPass - cross-browser password manager
    • AdBlock - automatically hide all ads on web pages
    • Speed Dial 2 - visual bookmarks for new page tab

Online Tools

• Webmaster Tools
  • Google Webmaster Central
  • Bing Webmaster Center
• Web Developer Tools
  • Google Code
  • Yahoo! Developer Network
  • Microsoft TechNet
  • Microsoft Developer Network
• DynamicDrive FavIcon Generator
• Scott Hanselman's 2014 Ultimate Developer and Power Users Tool List for Windows