Categories
Introduction
01. Creativity
02. CSS techniques and examples
02 a. CSS techniques03. Web design
02 b. Tabs & Navigation Menus
02 c. CSS- & HTML-Web-Tools
02 d. CSS/HTML-Specifications
02 e. Other useful Web-Tools
03 a. Written & unwritten rules04. Ajax Applications
03 b. Color Tools, Mixers etc.
03 c. Web Design magazines
03 d. Royalty free photos
05. Usability
06. Blogging Tools
07. Freelancers resources
08. Search engines & SEO
09. Other catalogs
10. Bookmarks: Maxi version
11. bookmarks: "pocket" edition
Submit a link
Support the project
Archive
Legend
new link
my personal favourite
english
german
russian
spanish
Where am I?..
You are visiting a list of essential web-sites, tutorials, references and examples (related to CSS Navigation Menus, CSS- & HTML-Techniques, Layouts, Accessibility, Usability, Search Engine Optimization (SEO) etc.), which make the life of web developers easier.
The list includes over 730 manually selected resources, is updated weekly and is compiled by Vitaly Friedman.
Submit your link
Fill out the form to submit a site for web-dev-bookmarks. You do not have to be the designer or owner of the site, it could be any site on the web. It is OK to submit your own site. Submit a link
Who is Vitaly Friedman?
Vitaly Friedman is a freelancing web designer from Saarbruecken, Germany, who creates simple, accessible and user-friendly web design. learn more
XML Feeds
Syndicate Web-Dev-Bookmarks (RSS) (updated once a week)
Donate
This web-site is being updated and edited by vitaly.friedman, prompted only by his motivation and his passion for web-development. If you appreciate his work and would like to support the project, you are welcome to donate money via Paypal (using a credit card, bank account, or existing Paypal balance).
» More Information / Support
For more useful and inspiring content related to design and web-development visit Smashing Magazine — a magazine dedicated to web design and development.
If you think this web-project is useful, please consider making a donation using the button "Donate via PayPal". Support the further development of the project!
» 116 new resources // 24/02/2006
- XHTML Character Entity Reference
- sIFR: Two Color sIFR Take Two
- Typetester - Compare fonts for the screen: is an amazing web-based application that allows you to compare how different fonts will display on a screen.
- PDF, DOC, ZIP Links Labeling
- Super Stripes
- Let visitors decide whether or not they will open links in a new window
- Webucator CSS Reference
- WordPress Plugin Repository: provides a rich environment for developers to create and share their work on WordPress-related plugin development
- WordPress Plugins Database: contains over 500 WordPress Plugins
- Examples in sIFR
- Design Shack: Inspirational CSS and Blog Design
- gallerize.: is a simple concept that grabs the latest gallery entries from various css galleries using their rss feeds
- Manfred Klein @ typOasis - 2003: about 70 professional license-free text fonts
- Take Command with AJAX [JavaScript & DHTML Tutorials]: guides you through the AJAX basics and through the process of building a simple AJAX application
- 80x15 Collection (ru): 3221 images
- DOM Scripting: The Blog
- scanR - Mobile Scan, Copy, Fax: uses advanced imaging technologies to convert pictures into readable PDF files and faxes
- In search of the One True Layout: @ positioniseverything.net
- moo.fx: is a javascript effects library, which includes useful javascripts for every-day use.
- Creating Badges and Stars: + http://erraticwisdom.com/2005/11/13/bargain-star-tutorial
- Web Creme | Web design inspiration
- How to create Firefox extensions
- .htaccess Cheatsheet
- Design Shack - Inspirational CSS and Blog Design
- Web Creme | Web design inspiration
- How the CSS Table Gallery works: is a detailed tutorial about the system similar to the CSS Zen Garden, written by Chris Heilmann
- Replicating a Tree table
- The Elements of Typographic Style Applied to the Web - a practical guide to web typography
- iSpot.com: contains portfolios of over 1,000 of the world's top illustrators
- Apples To Oranges - CSS For Bar Graphs
- Introduction to Eyetracking: Seeing Through Your Users
- Step by Step to AJAX
- Changingman layout | And all that Malarkey
- FeedFeeds(BETA): Ajax Feed TV
- Rapid Web Development and Testing with Mozilla Firefox
- Basics of search engine optimisation | 456 Berea Street
- Website Layouts Cookbook
- CSS Photo-Caption Zoom
- CSS Blast: (ru)
- CSS tricks for custom bullets
- Dynamic Resolution Dependent Layouts
- CSSHilfe Galerie
- Frog Family Standards
- Well-Designed Weblogs Volume 2 | mono
- Digitalrefueler
- Netdiver is a new media design portal and digital culture magazine ->Â Feed your eyes
- plasticpilots
- CSS-Mania
- css collection web sites without tables
- LOUNGE72 - Design portal & ezine
- CSS Reference Sites | Cascading Style Sheets Standards and Reference
- Typography for Headlines
- Internet Vibes
- Dark Eye - Search
- StyleReactor.net
- Open Web Design
- Vertical-Align Revealed
- morguefile.com
- Netdiver
- Simple, accessible "more" links
- Form Help without Popups
- Ten more CSS tricks you may not know
- Ten more CSS tricks you may not know
- CSS 2.1 selectors @ 456 Berea Street
- Content with Style: Playing Nice with the Other CSS Kids
- Simple CSS Image Switcher
- Simply Accessible
- CSSVista: Live CSS editing with Internet Explorer and Firefox simultaneously
- the css and web standards news compilation site
- Resizable Underlines
- Image floats, without the text wrap
- 0° CSS Shadow Technique: apply shadows to block elements with the shadow appearing below and on both sides of the object.
- Pandora's Box (Model) of CSS Hacks And Other Good Intentions
- Single Image Multi Replacement
- Div thinking cap: Stop thinking of how you'll slice your layout, start thinking on how to put each graphic into a container
- Changingman layout
- CSS Layout Tutorial
- image map for detailed information
- Faruk's Animated CSS Enhancements
- Simple, accessible external links
- The Elements of Typographic Style Applied to the Web - a practical guide to web typography
- CSS Basics - Making Cascading Style Sheets Easy to Understand
- CSS For Bar Graphs
- Yahoo! Design Pattern Library
- Semantic horizontal Forms
- Designing for the Web: These constraints can be based on a variety of different things including materials, technology, processes and standards in the industry. The Web is no different. Designing for a Web-based environment enacts a set of unique issues that need to be considered before implementation can be successful.
- CSS tricks for custom bullets
- 14 Free Vertical CSS Menus
- Unobtrusive Degradable Ajax Style Sheet Switcher!
- Zebra Stripes: Splintered Striper
- Tables with Style
- Javascript Image transitions
- Firefox extensions I couldn't live without
- Drawing a Good Logo
- CSS For Bar Graphs
- Full-time freelancing: 10 things learned in 180 days
- The Anatomy of Web Fonts
- Ajaxian
- AJAX Magazine
- Beautifully Numbered Lists with CSS
- Example of collapsing tables
- Online CSS Editor
- CSS smooth operator // Tite site collection.
- CSSelite
- Tree Navigation Menu: Destroydrop Javascripts Tree: dTree is a free JavaScript tree menu which generates XHTML 1.0 strict validated output and is supported in all major browsers
- Ajax Design Patterns: Fading Roses & Raging Viruses
- Forms Markup and CSS
- Fix Your Site With the Right DOCTYPE!
- Background Image Maker: creates stripped, dotted and slashed backgrounds with few clicks.
- CSS Cursors: an overview of cursor properties
- CSS Flexible Box With Four Custom Corners
- CSS Menu Generator
- Form Help without Popups
- AJAX-S: An Ajax-based slideshow system: is an Ajax-based slideshow system which stores slideshow data in an XML file and uses Ajax to retrieve it.
- Naughty or Nice? CSS Background Images
- CSS Vertical Bar Graphs by Eric Meyer
» 37 new resources // 19/09/2005
- Cheat Sheet Roundup - Over 30 Cheatsheets for developers
- Be Creative!: Creativity portal
- Acrobot - Abbreviation and Acronym Generator; automatically create and tags at the push of a button
- famfamfam.com: Icons
- webdev:webdesign [pf-wiki] a German catalog of Web Design references
- 195 Manually selected Style Sheet Resources
- Overture Keyword Selector Tool
- SEO-united.de Tutorial – Nach Themen geordnetes Online-Tutorial zum Thema "Suchmaschinenoptimierung"
- Why Blogs Rank High In Search Engines
- Revised image replacement @ mezzoblue
- CSS Syntax Checker for BBEdit and TextWrangler
- Essential Browsing Firefox Extensions
- Ten more CSS tricks you may not know
- Rapid Web Development and Testing with Mozilla Firefox
- OneLook Reverse Dictionary lets you describe a concept and get back a list of words and phrases related to that concept
- The definitive collection of idea generation methods
- Top 10 Ajax Applications : Kiko, Backbase’s RSS Reader, Backpack, Writely, Amazon Zuggest, TimeTracket etc.
- WallpaperStock: creative quality desktop wallpapers
- FreeStyle Menus - TwinHelix
- How to create Firefox extensions
- CSS Reference a reference describing the interpreting of selectors, data types, pseudo-classes and -elements, color and background properties, font properties, @font-face properties, box properties, visual formatting properties etc. by different browsers
- Toys - dhtml and javascript libraries, demos and applications @ Cross-Browser.com
- Eight things I wish I'd known when I started: Details a great designer maketh. There’s a point at which quality becomes too costly. Find that point with every project. Communicate, don’t decorate.
- e-CREATIVE AWARDS an exhibition of creative freelancers' works
- cssQuery Version 2
- Cascading Style Sheets - ein Tutorial: die Kapiteleinteilung hält sich an das Buch von Eric A. Meyer: Cascading Style Sheets, The Definitive Guide, O'REILLY, 2004
- CSS Footnotes revisited: Sidenotes
- Constants in CSS - several ways how to simulate
- SimpleViewer v1.7 is a free, customizable Flash image viewing application.
- Textile Reference
- XHTML/CSS - 3 column layouts - Netscape 4 compatible
- How To Nail A Sexy Layout
- ajax instant messanger
- Creativity techniques and creative tools for problem solving
- Free online image photo editor: Resize, change dimensions, scale, crop, add text, optimize, color correction, adjust brightness, contrast, grayscale, rotate, flip, mirror, add clipart, and set transparency online with no image editing software to download or install
- Steps to Becoming a Freelance Web Developer: learn how to start and where get the inspiration to go on, becoming a freelance web developer
» 95 new resources // 04/09/2005
- Ping-o-Matic! : Pinging lets dozens of services know you've updated your site and increases traffic to your blog
- Google Ranking Factors alleged positive and negative on- & off-Page SEO Google Ranking Factors in an overview
- Thierry Image Placement: Image Placement vs. Image Replacement (FIR)
- Words List - Extelligence archaic and Creative Word Dictionary
- "Not Found" Is Not An Option: Error Handling and User Experience
- Abbreviations, Acronyms, and Shortened Words an interesting outlook on and
- Styling abbreviations, acronyms and definitions @ Maxdesign
- Influence of Training and Exposure on the Usage of Breadcrumb Navigation
- yDSF - Robust CSS Drop Shadows a method of applying soft alpha-blended drop shadows that scale with the size of the box
- CSS Scale Image Html Tutorial
- NiceForms another technique for presenting nice web forms, based on javascript, xhtml, and CSS.
- Quick Online Tips: Free Essential Tools for Blogger: Feedburner, Haloscan, Imageshack, Technorati, Bloglet, AudioBlogger, My Blog Let etc.
- AJAX - Devmo @ Mozilla.org
- Flickr Badge Maker
- FREE 80x15 Button Maker and Generator - Blog Flux
- E-Mail Icon Generator: for GMail, Hotmail, MSN, Yahoo!, AOL users and others
- How to Develop Web Applications with Ajax @ WebReference.com
- The Amazing Rolloverer a tool for generating Javascript-free, accessible, flicker-free menubars.
- Gecko DOM Reference
- Creating a Pullquote with Javascript and CSS
- Web development mistakes, redux @ 456 Berea Street
- What is in a name?: learn how to call containers, divs etc. in order to make the source code readable and transparent
- CSS element hover effect
- Float: Die Theorie: eine ausführliche Beschreibung des Begriffs "Float" und dessen Anwendung in CSS
- Drunkey Love Icons an icon set consists of over 100 16x16 icons from categories Actions, Flags, Media & devices, Things, Weather
- JavaScript Cheat Sheet @ ILoveJackDaniels.com
- JavaScript Core Guide 1.5 a reference manual for the core JavaScript language for version 1.5
- Problems in life | Getting things to work | Being Efficient | And More... - LifeHut
- Ajax Mistakes a list of the many mistakes developers using Ajax often make
- CSS tests @ Brunildo.org: CSS experiments, tricks, hacks and tips
- webusability - accessibility & usability services: provides excellent referenced standards on usability
- AJAX: Usable Interactivity with Remote Scripting [JavaScript & DHTML Tutorials]
- Google AdSense Stop Words
- Accessible Form Guidelines, examples and accessible JavaScript tricks
- How to Find a Great Domain Name
- htaccess code generator - disable hotlinking
- wellvetted.com - inspirational gathering
- AjaxAC - Open-source PHP framework for creating AJAX / JavaScript applications
- Web Developer Extension for Mozilla and Firefox adds a menu and a toolbar to the browser with various web developer tools
- CSS Teaser Box
- The CSS and XHTML Lab @ 456 Berea Street
- The ThrashBox - Sliding Doors Box - Rounded Corner for All
- JavaScript Reference
- JavaScript Cheat Sheet
- JavaScript @ Developer.mozilla.org
- Feed Digest: mix, convert, and syndicate RSS and Atom feeds
- Design Snack a Deliciously Different Website Design Link Portal
- DesignPacks.com: offers royalty free, high quality image collections
- Designologue
- pattern4u
- Dynamic Ajax Tables
- Mask Email Image Generator: creates a JPG image of your email address
- doblepixel (spanish)
- screenspire.com | full( )screen inspiration
- Andy Budd :: Well Designed CSS Sites
- An Overview of Current CSS Layout Techniques
- CSS: the white-space property @ veerle.duoh.com
- Free Form for All - The Subtraction Good Form 0.1
- Creating a Star Rater using CSS
- AJAX Login System Demo: creating a secure login system using XMLHttpRequest
- All CSS Properties Listed Alphabetically
- 10 Big Myths about copyright explained
- 30 Things You Didn't Know You Could Do On The Internet
- 9 Javascript(s) you better not miss!
- Basic AJAX Examples: Track Changes, Drop Downs & Form Handling, Get Customers By State (Parse Plain Text), Get Customers By State (Parses XML), Google Suggest Hack, Activity Log.
- Color Shades: Colors and Lighter Hexadecimal Codes and Swatches
- Netcocktail :: Get Color
- Pixsy - photos and videos from blogs and social networks
- State of Ajax: Progress, Challenges, and Implications for SOAs
- Web Badges / Buttons | ZwahlenDesign
- 10 Tips That Every PHP Newbie Should Know
- 10 Tips That Every PHP Newbie Should Know [ Part 2 ]
- footerStickAlt a more robust method of positioning a footer
- Airtight Corners
- Ajaxariffic Autocomplete with Scriptaculous
- The AJAX Tag Library is a set of JSP tags that simplify the use of Asynchronous JavaScript and XML (AJAX) technology in JavaServer Pages
- Get Cooking with Photoshop and CSS - 3 Low-fat Recipes [Design Practice]
- Dislexicon v0.3: generates creative words out of prefixes, suffixes and root words
- TaskList.org: list of Windows Proccesses and Descriptions
- Understanding XML: The Future of SVG and the Web
- Gigadesign.be - Website maken, maar dan wel juist a Dutch resource about xhtml and css
- Truly Free Stock
- Web Accessibility Toolbar: was developed to aid manual examination of web pages for a variety of aspects of accessibility. Following functions are included: - identify components of a web page; - facilitate the use of 3rd party online applications; - simulate user experiences; - provide links to references and additional resources
- A List Apart: Web magazine for people who make websites. Fresh every Friday.
- Webmascon: Russian "A List Apart". Multiple articles about webdesign, webdevelopment etc
- Search Free Fonts: over 7000 free fonts available for download
- Table Sort @ BrainJar.com
- CSS Tables alerts Box Template, Services or Links box template, Contact Template, Data table template, e.g., software list etc
- HOWdesign.com: Links to Graphic Design Firms, Design Resources, and more
- Dogpile: Search Comparison Tool
- CSS Table Gallery: Data Tables and Cascading Style Sheets Gallery
- cssQuery() is a powerful cross-browser JavaScript function that enables querying of a DOM document using CSS selectors
- Dexigner Design Portal: Design News and Competitions
- Eyetools Eyetracking Analysis
- Making a CSS-based layout start to finish @ design in-flight
- [kak) - a journal about graphic design
- Desert Island Fonts: Round 1, Round 2, Round 3, Final Round
- Movable Type Style Generator
- CSS Zoom layout
» 66 new resources // 26/07/2005
- DOMSlides: Yet another DOM/CSS based presentation slides system
- CSS Switching: Stuff and Nonsense: Strategies for CSS Switching
- Time to check is are you using the right blogging tool?
- Image (Replacement) Maps: Using CSS for menu or image maps that have different X and Y co-ordinates
- Textpattern and Textpattern Resources
- praegnanz.de - Free Professional Fonts: Freie Schriften im Portrait
- CSS From the Ground Up is an extensive tutorial on how to start with developing CSS-based sites
- Iconico: Online CSS Scrollbar Color Changer
- Iconico - Online Email Protector
- PANTONE Universe - Fashion ColorView: Color Your Life and choose from nine, beautiful in-season palettes
- color combinations is a list of harmonic colors, which includes over 200 entries.
- Return of Design - Web Color Schemes: beautiful, harmonic web color schemes provided by Forty Media Corporation
- Alter Table Row Background Colors Using JavaScript
- Color converter (RGB/CMYK/HSV)
- ColourMod :: DHTML Color Picker/Selector
- Colour Scheme Chooser
- Fontsmack: sIFR, TrueType (sans-serif, serif) and PostScript fonts
- Accessible Data Tables
- ColorBlender.com | Your free online color matching toolbox: calculates a 6-color matching palette (a "blend") automatically
- Pantone's top ten fashion colors for fall 2005
- Benjamin Moore: Personal Color Viewer
- Create compatible HTML email
- Das Logodesign Portal - Logodesign einfach erklärt!
- 100 Random Colors - Need a Color? is primarily a random color generator that's intended to help designers to get out of the "creative block"
- Color In Motion is an animated and interactive experience of color communication and color symbolism
- Sprachen im Umfeld des Internets (pdf) - Cheat Sheet
- Der XHTML-Standard (pdf) - Cheat Sheet
- Cascading Stylesheets (pdf) - Cheat Sheet
- Annotating images with CSS
- CSS, XHTML Templates: dynamic and fixed width, 3-columns-layout
- Drop-Down Menus, Horizontal Style @ nickrigby.com
- 300 Images From 1800 Sites is arrows, posts, comments, mail, bullets, print, carts and bags
- Format Footnotes with Javascript & CSS
- CSS Remote Rollover Demo: you take a regular unordered list and wrap an extra, non-semantic span around the link text
- CssCreator -> Page Layout: this generator will create a CSS layout that has fixed width left and/or right columns with a dynamic width center column, all the same height with header and footer
- Forms with CSS: trimming form fields
- CSS footerStick: how to force the footer of a webpage to stick to the bottom of the viewport
- CSS footerStickAlt is a more robust method of positioning a footer
- Adsense Optimizer: lets you analize what is the best color combination for your adsense code
- Adsenselogger, Open Source PHP Adsense Tracker: open source php adsense tracker
- Google AdSense Optimization Webinar: top tips from Google Adsense staff to help you make more money.
- CSS Visited Links: Ticked-off visited links Reloaded
- Prototype JavaScript Framework: featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for Web 2.0 developers everywhere.
- Pajatti.net | Community for Creaters: Web Design Archives (chinese)
- CSS für alle Browser: von Kristof Lipfert
- EffectsPack - Prototype/Effects based javascript effects is activeMenu, ActiveTab
- Customized borders and corners in flexible layouts
- Portfolio Exhibition (The Best of Portfolio Design)
- Rico - Demos: Javascript + Ajax for Rich Internet Applications is ajax Demos, Drag & Drop Demos, Cinematic Demos, Behaviour Demos
- Scalable Inline Image Replacement - Inline Image Replacement Technique (siir)
- Höhe berechnen und Zusammenfallende Ränder : ..oder: das wundersame Schrumpfen von CSS Behältern!
- The Form Assembly Garden is a Collection of CSS Stylesheets For Web Forms
- Three Column Layouts @ css-discuss
- Nemesis Project: CSS table-less design templates
- DOM-Scripted Lists, Revisited
- ZVON.org - The Guide to the XML Galaxy: cheatsheets (XHTML, XSL, MathML) and XML / HTML References
- Unordered List Rollover Gallery
- Language specific styling: quotation marks
- CSS Image Text Wrap Tutorial
- CSS: Bullet-Proof Rounded Corners
- Blogger Templates : is a template for my blog: here you can find original skins to personalize your own weblog
- Accesible DOM DropDown Menu
- korhoen typeviewer is a viewer which helps you to take a look at CSS typesetting and adjust it to a better readability
- CSS image replacement for submit buttons
- Dynamic thumbnails and preview images with DOM, CSS
and PHP - Blog Tips - ProBlogger: Helping Bloggers Earn Money
- CSS Page Layout Templates @ SSI-Developer.net
- slayeroffice - web experiments gone horribly awry: Favelets, Web Based Dev Tools, DOM/Javascript, Javascript Functions etc.
- Design Directory | made by designers for designers: made by designers for professionals, who are involved in different spheres of design
- Bid Start Scripting Services - custom freelance programming and design work
- The Designers Network: Designers Forum, Designer Directory & Design Community
- Infohound Color Schemer: click around within the shaded box to set the saturation and brightness, or within the rainbow to set the hue. Matching colors will be automatically chosen
- gapingvoid: how to be creative (latest version): "So you want to be more creative, in art, in business, whatever. Here are some tips that have worked for me over the years"
- Layers Magazine: Design, Photography and Video. The How-To Magazine for Everything Adobe
» The "pocket edition" is finally released
updated/SaturdayJuly26th
Although the "pocket edition" of Web-Dev-Bookmarks wasn't officially released one week ego, it has already been tagged, linked and bookmarked by thousands of users. Over the last few months the amount of links on this page was constantly growing, making the list less readable and more overflooded. Therefore I've decided to create - apart from the maxi edition - the so-called "pocket edition", which presents the same links, but better categorized and on a one single page. So the official release (updated, actualized and corrected) is finally available now. Just like "Web-Dev-Bookmarks" it will be actualized once a week. Any suggestions, ideas and donations are welcome.
» Covering enormous traffic costs...
updated/MondaySeptember19th
Since the project "Web-Dev-Bookmarks" was slashdotted, digged, furled, mentioned on Del.icio.us, Stumble Upon, 456bereastreet, CSS Beauty, Lifehacker, remarked by Cameron Moll, Jeffrey Zeldman and linked on 1688 pages, it was literally overflooded with visitors and traffic.
Over 31,000 users came across "Web-Dev-Bookmarks" over the last 7 weeks, more than 130,000 hits were made. More than 1,300 people come to this site every day. Such "floods" may seem dwarfish for huge web-portals, but they make quite a difference if you host a web-site on a small private web-server.
Therefore if you appreciate my work and you would like to support the project, please donate via Paypal (using a credit card, bank account, or existing Paypal balance; s. the button below).
Every donation counts. Every donation will be helpful for covering the traffic costs and improving the web-site for the future. Thank you!