I.

Books



II.

Articles & Talks




III.

Software

Web Editors

Choose your HTML editor carefully.  Your choice depends in part on what you want to do with this class in the future.  I know we're pressed for time, but this is one of those times that early decisions have long-term consequences.  It's like impulsively going on a date and winding up married for 50 years.  I'm still using the same basic editors I was using 15 years ago--Seamonkey, the modern incarnation of Netscape, and NoteTab Light, a souped-up text editor.
  1. AptanaStudio. Develop and test your entire web application using a single environment. With support for the latest browser technology specs such as HTML5, CSS3, JavaScript, Ruby, Rails, PHP and Python.
  2. Atom.  Atom is a desktop application based on web technologies. Like other desktop apps, it has its own icon in the dock, native menus and dialogs, and full access to the file system.
  3. CKEditor.  "CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. It's a WYSIWYG editor that brings common word processor features directly to your web pages. Enhance your website experience with our community maintained editor." Standard, Full feature, and Inline Editing versions.
  4. Codekit  - THE Mac App for Web Developers.  Free to try, $25 to buy.
  5. CoffeeCup Free HTML Editor. This one is good.  Text editor with auto-complete.   "Only $69."
  6. Drupal - Open Source CMS  (Runs on Apache)
  7. Haml.  Beautiful, DRY, well-indented, clear markup: templating haiku.  Haml functions as a replacement for inline page templating systems such as PHP, ASP, and ERB, the templating language used in most Ruby on Rails applications.
  8. Kirby CMS (Content Management System).  Generates static web sites (no PHP, no database).  Free to try, $39 to buy.
  9. Microsoft Expression Web 4.  This one works. Pagebreeze  Split screen.  HTML on top, WYSIWYG below.  Can edit in either screen.
  10. NoteTab Light.  This is a free text editor with a sidebar that lets you click on HTML and other codes to enter them quickly.  It's the program I use the most in editing HTML.  The Pro version costs $39.95 and brings some more functions.
  11. Perch.  CMS system.  It can manage complex web sites.  It needs PHP, MySQL, PHP image library (GD or ImageMagick).
  12. PageBreeze Free HTML Editor.  This one works.Pagebreeze  Can edit WYSIWYG or direct HTML, linked CSS files, etc.
  13. Penflip.  Online book editor.  Save to PDF, ePub, HTML, etc.  You can collaborate with others using this site.
  14. Seamonkey.  The SeaMonkey project is a community effort to develop the SeaMonkey all-in-one internet application suite. Such a software suite was previously made popular by Netscape and Mozilla.  Contains an Internet browser, email & newsgroup client with an included web feed reader, HTML editor, IRC chat and web development tools.
  15. Sublime Text.  Fancy text editor for Windows and Apple.  Nice auto-complete features.
  16. Tackk.  "Every once in a while, I come across a service that leaves me speechless. This is exactly what happened when I first started using Tackk: It took my breath away. Tackk is a free website maker currently in beta, and will help you create any single-page website (or Tackks) in minutes."  PC World review.  Online software; build your page & download it. 

Other

  • Blender 3D open source image software
  • Compass: Open-source CSS Authoring Framework (Runs on Ruby)
  • CSScomb  Online & downloadable utility for organizing CSS code.
  • Gimp  GNU Image Manipulation
  • Inkscape Draw Freely.  Free vector graphics editor.
  • jQTouch.  A Zepto/jQuery plugin for mobile web development on the iPhone, Android, iPod Touch, and other forward-thinking devices.
  • Node.js.  JavaScript.  "Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices."
  • Sigil.  Free epub editor from Google.  BTW, if you rename a file from .epub to .zip, you can work with the files directly.  It can be really handy.


IV.

Online Aids

  • Brainshark.  With Brainshark’s cloud-based software, you can easily transform static content such as PowerPoint® documents into voice-enriched video presentations that can be accessed anytime, on-demand...and tracked so you can measure the effectiveness of your communications.  Has a free option.
  • browserbite. This tests the way your site looks on several browsers and shows you the results.
  • Canva.  Create a design online.
    Canva Design School.  Tutorials on using Canva
    Canva: A Glossary of Typographic Terms.  A nice list of font terms and definitions with illustrations.
  • Chrome Developer Tools.  Debug your website.  The Developer Tools are heavily based on the WebKit Web Inspector, a part of the open source WebKit project.
  • CG Textures: "Textures for 3D, graphic design, and Photoship!"
  • Codecademy: Learn to Code
  • CodePen is a playground for HTML, CSS, and JavaScript. Build demos with our in-browser code editor. Share what you build. Explore and learn from other's code.
  • Color Scheme Designer.  Use a color wheel to pick matching colors for a web site.
  • A complete guide to Grid. Grid is the very first CSS module created specifically to solve the layout problems we've all been hacking our way around for as long as we've been making websites.
  • The CSS Layout Workshop.  Learn CSS layout with straightforward and practical examples. A course designed to remove layout confusion for good!
  • CSS Lint. CSS Lint cleans up your CSS. It points out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don't want.
  • CSS Tricks.  A website for writing CSS.
  • CSS Zen Garden: The Beauty of CSS Design.  See one web page with dozens of different css styles.  Download the HTML and CSS and create your own version. "The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web."
  • Draw.io is an online application that allows users to create diagrams right from the browser. It provides functionality similar to that of a diagram drawing desktop application and even integrates with Dropbox and Google Drive to save all work.
  • Easelly.  Create and share visual ideas.  Easel.ly is a website that features thousands of free infographic templates and design objects which users can customize to create and share their visual ideas online. Using the site is as easy as dragging and dropping design elements, and users can either choose a template from our extensive library, or they can upload their own background image and start from scratch. Over 300,000 users have already registered with Easel.ly, and thousands of infographics are produced using the site every month.
  • Edublogs.  Free educational WordPress sites.  Dr. Bruce R. Magee's Blog
  • Filament Group.  They have articles and downloadable code to help write web pages.
  • Fonts
    • Google Web Fonts. Similar to Typekit but FREE!  Also has CSS for 3D fonts, shadow fonts, etc.
    • Typekit Typekit is now free also.  (online fonts.  You can use fonts on your website that aren't on the viewers' computers)
  • Fontsinuse.  An archive of typography (fonts) in use on the web.
  • Google App Engine.  Create apps on Google's platform that are easy to manage and scale. Benefit from the same systems and infrastructure that power Google's applications. Build fast and secure websites on Google App Engine and never worry about servers or machines.
  • Google Design. Google Design is a cooperative effort led by a group of designers, writers, and developers at Google. We work across teams to create tools, resources, events, and publications that support and further design and technology both inside and outside of Google. Sign up for our newsletter.
    • Resources. Links to Google Design resources
    • Material.io. Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences.
    • Material Design. We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.
    • Material Design for Wearables.
    • Google Fonts. Free fonts that can be used on web pages.
    • Material Icons. Visit our library of over 900 material system icons and learn more about our icon font.
    • Device Metrics. A comprehensive resource for sizing, resolution, and more across multiple devices.
    • Resizer. An interactive viewer that helps designers test material design breakpoints across desktop, mobile, and tablet.
    • Color Palette. Download.  Our material design palette helps you amplify your UI with color, providing guidance around primary and accent colors, as well as theming.
    • Layout Templates. Iterate quickly with our handy set of device-specific material design templates.
    • Roboto & Noto. Get all the latest updates and additions to our Android fonts, Roboto & Noto.
    • Sticker Sheets. Our sticker sheets make it easy to get started with material design components, system icons, and product icons.
    • Material Design for Android. Android includes support for material design apps.
    • Polymer Paper Elements. Paper elements are a set of visual elements for Polymer that implement material design.
    • Material Design Lite. A standalone library for adding a material design look and feel to your website.
    • Angular Material. Angular Material is the AngularJS implementation of material design.
    • Making Material Design. A behind-the-scenes look at building Google's visual framework.
    • Palette Perfect. A video for cyolor design theory.
  • "Grid Based Web Design Resources" from Awwwards (Home page has award-winning web sites.
  • Grid by example. This is a new kind of grid standard, operating along the lines of flexbox. The CSS Grid Layout specification is one of a few new specifications that are redefining how we approach layout for the web. Alongside Flexbox and the Box Alignment Module it will become part of a modern layout system for websites and web applications. This site is growing collection of examples, with the aim of helping people understand how Grid Layout works. 
  • HTML and CSS Table Border Style Wizard
  • HTML Code Tutorial.  Welcome to the HTML Code Tutorial. Our goal is to provide the most helpful and complete guide to creating web pages anywhere. If you're just beginning, start learning HTML here.
  • HTML Tutorial
  • HTML5 Doctor.  Scroll down the page to see a list of HTML elements; click on the one you choose to learn when and how to use it.
  • HTML5 Periodic Table. " Oh, and I wanted to tell you that I've built this nice little tool that I call the 'HTML5 Periodical Table' you may be interested in as it's super useful for anyone coding in HTML such as yourself, and best of all it's completely free!"
  • Interneting Is Hard. A free online tutorial for HTML and CSS.
  • Job Board.  A service from ShopTalk.  They list several jobs involving building web sites from around the country.
  • Learn Flexbox with Webflow. A game to teach you how use flexbox with Webflow.  No direct coding used.
  • Lonely Planet Style Guide.  The site's colors, typography, etc.  A Maintainable Style Guide.
  • Mixture.  Online web page development.  Compile SASS, use boilerplates, Liquid template engine, etc. Seems free.
  • MooTools.  MooTools is a compact, modular, Object-Oriented JavaScript framework. 
  • Nellie McKesson. A List Apart includes  articles by her.  @NellieMcKesson Twitter. O'Reilly Group articles.  
  • One Month.  What if you could learn anything in one month?  On-line training.  Courses you can finish in 30 days at 15 minutes a day.
  • Pattern Tap.  Pattern Tap collects "specific designs and patterns of user interaction. It’s a living classroom, where designers learn what is working well on the Web and why. "A collection of designers' web sites.
  • PhotoPin.  Search millions of Creative Commons photos and add them to your blog posts easily. Images you can use on your web site.
  • Podio.  "A collaborative work platform."  Free for up to 5 people. "Podio users create workspaces to collaborate with specific groups of people, use an Employee Network for company-wide communication across departments and locations, and get their work done using Podio Apps."
  • Prezi.  “Because Ideas Matter. . . Prezi is helping reinvent the art of presentation. Farewell, one-dimensional thinking. Welcome instead the power of inter-connection, flexibility, and the unexpected ‘Aha!’ ” Free and discount accounts for education.
  • Reactor.  Build a moblile app for your WordPress-based business.  Convert a WordPress site into a mobile app.
  • Screenfly.  Test your website at different screen resolutions.  Can test how it will look on desktop, laptop, reader, mobile phones like iPhone.
  • SlideRocket.  Build presentations online.  Has a free option.  You can add audio as well. 
  • Starbucks Style Guide.  Design a nice web site while you sip Starbucks coffee and borrow their style guide.
  • Things I've Learned about CSS Grid Layout. Guide to using the new Grid CSS for designing layouts.
  • THINKIN' TAGS.  "Rapid Prototyping, on a production-ready code basis." Develop YAML pages on it.
  • Thinking with Type. Web version of the book with Ellen Lupton. “Type is the foundation of print and web design. Everything you need to know about thinking with type, you will find here. This richly detailed update to the classic text belongs on the shelf of every designer, writer, editor, publisher, and client.” -Jefferey Zeldman-
    Free online tutorial by Ellen Lupton. "Typography That Works: Typographic Composition and Fonts."
  • TOC: Tools of Change for Publishing. O'Reilly Media site.  HTML5, EPUB, Ebooks, JavaScript, CSS
  • Treehouse.  Learn HTML, CSS, iPhone apps, write code, or start a business.  $25.00 per month for a basic account.
  • Typecast. Site to help choose fonts in combination for websites. It's an online service.
  • Typedia. Typedia is a community website to classify typefaces and educate people about them. Think of it like a mix between IMDb and Wikipedia, but just for type.
  • Universal Typography Demo.  This is a useful online tool that helps you set the typographical variables for your web page -- font size, line height, margin, container width, average line width.  It has sample text already, but you can paste your text in it also.
  • Visual CSS Flexbox Builder. The first visual flexbox builder.  Easily build flexible, responsive layouts - without writing code.  Only in Webflow.
  • YAML: 4.  CSS Framework.  A modular CSS framework for truly flexible, accessible and responsive websites.
  • WebComponents.org.  A place to discuss and evolve web component best-practices.  WebComponents.org is where pioneers and community-members of the Web Components ecosystem (like Polymer, X-tags, and other interested parties) document web components best practices so that others can follow the same path instead of needlessly striking out on their own.
  • Webflow.  A Y Combinator-backed startup offering creative professionals an easier, more visual way to design and host responsive websites, is launching out of its closed beta, with already some 10,000 users signed up. It’s an idea whose time has come, as more of the world now interacts with the web through a variety of devices and screen sizes, including desktops, laptops, tablets and smartphones – the latter two of which can also be turned and viewed in either portrait or landscape modes.
  • Webfont Generator. Font Squirrel service to embed fonts in a web page.
  • Windows Azure Web Sites.  "Build highly scalable web sites on Windows Azure.  Quickly and easily deploy sites to a highly scalable cloud environment that allows you to start small and scale as traffic grows. Use the languages and open source apps of your choice (like WordPress, Drupal, etc.) then deploy with FTP, Git and TFS. Easily integrate Windows Azure services like SQL Database, Caching, CDN and Storage."  10 free low-traffic web sites, then you can start a pay plan.
  • WordPress. Online web development. Started as a blogging site; now people develop all kinds of web sites there. Free version available.
    • Manage Wordpress. WordPress Dashboard. Control your WordPress websites from one dashboard.
    • MobilePress.  MobilePress is a plugin for WordPress that renders a mobile friendly version of your WordPress website or blog.
    • WordPress Mobile Pack.  The WordPress Mobile Pack is a complete toolkit to help mobilize your WordPress site. It has a mobile switcher, themes, widgets, and mobile admin pane.
    • WP Mobile Detector.  The best way to mobilize wordPress websites for mobile phones.  Can detect over 5,000 mobile devices & display a compatible mobile theme.
    • WPtouch.  Transform any WordPress site for mobile.
  • WTF Mobile Web.  Examples of sites that malfunction on mobile devices.  Examples of what not to do.
  • Wufoo.  The software Wufoo is an online form builder that creates forms including contact forms, online payments, online surveys and event registrations. It allows people without a coding background to build their own forms and surveys.
  • Your Website Engineer. "Hey, Dustin Hartzler here, and welcome to Your Website Engineer. This website is devoted to helping you create a high quality of a website without having to hire a web guru."


V.

Downloadable Aids

  • 3 x 4 grid builder.  Creates css that you can copy and paste into your code. Download a free poster of the 892 partitions to a 3 x 4 grid.
  • "30 Free User Interface Kits." from Awwwards
  • Accessibility Posters. Posters with tips for designing accessible websites and documents.
  • AngularJS.  "AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. Read on to find out how. "
  • Apple's Guidelines for Creating Great Mac Apps.  "Mac OS X Human Interface Guidelines describes the characteristics of the OS X platform and the guidelines and principles that help you design an outstanding user interface and user experience for your Mac app."
  • Awwwards.  Resources & Tools for building websites.
  • Barebones.  Initial directory setup, style guide, and pattern primer.  By Paul Robert Lloyd.
  • Best CSS Snippet Sites.
  • CSScomb  Online & downloadable utility for organizing CSS code.
  • CSS-Tricks
  • D3.  Data-driven documents using a downloadable javascript file.  D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
  • Ember.js.  "Ember.js is built for productivity. Designed with developer ergonomics in mind, its friendly APIs help you get your job done—fast."
  • FreeCSStemplages.org.  First of all, welcome to our site :) Here you'll find a number of free CSS templates we've created, all of which are:
    • Released for FREE under the Creative Commons Attribution license
    • Very lightweight (ie. minimal use of images) and fast loading
    • Tables-free (ie. no tables used for layout purposes)
    • W3C standards compliant and valid (XHTML Strict)
    • Provided with public domain photos, generously provided by PDPhoto.org and Fotogrph [why?]
  • "Grid Based Web Design Resources" from Awwwards (Home page has award-winning web sites.
  • Hack Design. A list of downloadable tools for designing.  Most of them are free.  This link is for interactive design; there are several other categories you can choose.
  • HOR:RATIO.  Here's something Horatio never dreamt of in his philosophy: a slide rule for designing rectangles for your page.  Bring order to height and width.  Download the instructions here.  Created by Matthew Mattingly.
  • HTML5 Boilerplate.  "The web's most popular front-end template. HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package."
  • Meyerweb.  A CSS authority has some guides and applets.
  • Origami. Origami is a free tool for designing modern user interfaces. Quickly put together a prototype, run it on your iPhone or iPad, iterate on it, and export code snippets your engineers can use.  Apple only.
  • Pattern Lab and Atomic Design.  Build a web site from atoms to molecules to organisms to templates to pages.
  • Public Domain Sounds.  Free sound effects.
  • Rocheleau, Jake.  Coding A Responsive Resume In HTML5/CSS3.  Article + downloadable code for creating a responsive resume that looks good on computers AND smart phones.
  • Suit CSS.  SUIT CSS is a reliable and testable styling methodology for component-based UI development. A collection of CSS packages and build tools are available as modules. SUIT CSS plays well with React, Ember, Angular, and other component-based approaches to UI development.
  • Style Tiles.  Like swatches for web sites.  A Photoshop template. I tried it but couldn't figure it out.
  • Tachyons. Built for designing. Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible.
  • Tablesaw: A Flexible Tool for Responsive Tables.  Various ways to manage tables in responsive web pages.
  • Unheap - A tidy repository of jQuery plugins. Unheap was assembled in 2010 as an internal team resource for staying on top of the latest jQuery plugins.
  • WebSlides: Create Beautiful HTML Presentations.
  • YAML: 4.  CSS Framework.  A modular CSS framework for truly flexible, accessible and responsive websites. THINKIN' TAGS.  "Rapid Prototyping, on a production-ready code basis." Develop YAML pages on it.