Text Editors
- TextWrangler (Mac, recommended for this class)The program “Text Wrangler” on the Macintosh computer makes it quite easy to write and edit XHTML code for your webpages. It is much easier to use than “Note Pad” on the Windows side. However, there can be a problem when you create code using “Text Wrangler” and then try to edit it using “Note Pad.” To be able to work with your code at both school and home, using both “Text Wrangler” and “Note Pad,” follow these steps:
- Select “Preferences” > > > “Text Files”
- Select the “Default Line Breaks: Windows (CRLF)” setting (not default)
Now, you should be able to create code at school using “Text Wrangler” on a Macintosh computer, save it onto your portable storage device, take it home, open it with “Note Pad” on a PC, and work with no trouble
- NOTEPAD ++
Web Design / Basics
- Castro Website: Book Examples
- Tutorials – Online Training – lynda.com
- Entities Special Characters
- W3 SchoolsThe largest web developer’s site on the net. All the web-building tutorials you will need, and all free. Study what you want, learn what you need, in an accessible, handy format.
Cascading Style Sheets (CSS)
- CSS Zen Garden
- CSS Beauty
- Pure CSS Popups
- Pure CSS Popups 2
- How To Create a Horizontally Scrolling Site | CSS-Tricks
- CSS: Innovative Techniques and Practical Solutions – Smashing Magazine
Designing with the Grid
- Five Simple Steps to Designing with a Grid
- Web Page Layout Grid | Smiley Cat Web Design
- Designing With Grid-Based Approach | How-To | Smashing Magazine
- A List Apart: Articles: Thinking Outside the Grid
- Fibonacci number – Wikipedia, the free encyclopedia
- Golden Ratio Calculator
- Grid Calculator
- The Golden Ratio in Web Design – Nettuts+
- resizeMyBrowser
Photoshop
- Design Website with Photoshop
- How To Learn Photoshop In 24 Hrs | Design Reviver
- How to Create a Unique Colorful Site Layout – Psdtuts+
- Elements of Great Web Design: The Polish – Psdtuts+
- Design A Clean And Fresh Company Website In Photoshop | PV.M Garage
- Adobe Dreamweaver Tutorial | Image Slice in Photoshop
- 27 Best Photoshop Web Layout Design Tutorials to Design Decent Web Layouts
Public Domain Images
- Flickr: Creative Commons- Free Pictures
- Flickr: The Commons
- Public domain image resources
- WebMuseum: Famous Artworks exhibition
- Vintage Pixels – Your Source for FREE vintage and antique photos
Testing and Debugging
- The W3C Markup Validation Service
- Check Browser Compatibility, Cross Platform Browser Test – Browsershots
- Marketcircle | iPhoney
Tools & Widgets
Javascript Galleries and Lightbox
- 35+ Best JavaScript Image Gallery Plugins and Scripts
- Javascript Image Galleries
- 40 Free Javascript Image Galleries
- Video LightBox – Embed video to your website with beautiful Lightbox effect!
- Videobox
- Lightview
- Lightbox 2
Typography
- Typetester
- Ellen Lupton: Thinking w/Type
- Six type faces
- Lorem Ipsum – All the facts – Lipsum generator
- Fillerati – Faux Latin is a Dead Language
- Typographic Sins → Teaching → Ray Elder
- Entity Code – A Clear and Quick Reference to HTML Entities Codes
- Best Practices of Combining Typefaces – Smashing Magazine
- Typedia: A Shared Encyclopedia of Typefaces
- The Grammar Cheat Sheet | Retinart
- Ask H&FJ: Four Ways to Mix Fonts
- Good Web Fonts for Online Text
- With beautiful type comes great responsibility
- MyFonts: Webfonts & Desktop Fonts
Color
Video Capture
- iShowU
- http://clipnabber.com/
- http://www.jdownloader.org/
- https://addons.mozilla.org/en-US/firefox/addon/easy-youtube-video-downl-10137/
- https://addons.mozilla.org/en-US/firefox/addon/video-downloadhelper/
- http://www.videolan.org/vlc/
Video Compression
HTML5/CSS3
HTML5 and CSS3 Tutorials & Resources
- 22 Handy HTML5 & CSS3 Tools, Resources And Guides | Graphic and Web Design Blog
- HTML 5 and CSS 3: The Techniques You’ll Soon Be Using | Nettuts+
- Safari Dev Center – Apple Developer
- HTML5 Visual Cheat Sheet (Reloaded) – woorkup.com
- 70 Must-Have CSS3 and HTML5 Tutorials and Resources | Web Resources | WebAppers
HTML5 Video & Audio
Personal Portfolio Websites
- 50 Fresh Portfolio Websites for Your Inspiration « Smashing Magazine
- Online portfolios for photographers, artists and creative professionals
- Creative Portfolio: Designer and artist online portfolios
- 20 Inspiring Personal Portfolio Sites You Should Explore | FreelanceFolder
- Best Web Site Designs
Narrative Design
Theory
- Manovich: Database as a Symbolic Form
- YouTube – Ira Glass on Storytelling #1
- Use of Narrative in Interactive Design – Boxes and Arrows: The design behind the design
- A List Apart: Articles: Beyond Usability and Design: The Narrative Web
- Visible Narratives: Understanding Visual Organization – Boxes and Arrows: The design behind the design
Examples
0