250 Quick Web Design Tips (Part 1) As web professionals, we’re always looking for ways to improve our knowledge and skills. Tips, tricks and checklists are often one of the most underused yet potentially useful models of providing great, quick and easy to follow pieces of useful information. You may or may not know some of the tips below — and you may or may not agree with everything listed — but hopefully it will give you some ideas for your own sites or motivate you to create a checklist to help cover your bases. Perhaps a few items may even inspire you investigating a subject further, and that would be pretty awesome too. This is the first part of a 2-part series. Part 2: 250 Quick Web Design Tips (Part 2) Planning and Getting Into the Web Design Profession Planning what your website needs to contain can help you scale the project size. One fundamental aspect of creating a website is the planning stage. Picking Domain Names 1. 2. 3. 4. 5. 6. 7. 8. 9. Web Hosting 10. 11. 12. 13. Development Platform 14. 15. 16. Tools 17. 18.
100 Shadows Set + PSD Sources A very used trend these days is enhancing web elements with huge shadows, so that pages kind of look more deep therefore pleasant to the eye. In this post we’ve created four very complete sets of shadows, ideal for you to use in your elements, additionally within the set there are a lot of elegant boxes so that you can use your own or the set boxes as well. Each set has Source Files and it’ll be very easy for you to incorporate the shadows in your own elements or modify the elements in there. On the other hand you can also change shadows color, to accomplish that you just have to turn a color layer visible, from the 10 different color layers. Feel free to tell us how do you like them. If you’d like you can also subscribe to our newsletter hence receive fresh freebies. Closer view: See shadows in high detail Color Schemes: 10 different shadow colors Shadows Set 1 Preview Shadows Set 2 Preview Shadows Set 3 Preview Shadows Set 4 Preview
Home / Galen Gidman Mega Collection Of Cheatsheets for Designers And Developers | Sp Cheatsheets and various quick reference guides are available for almost any type of software and language these days. Unfortunately they’re not always easy to find when you actually need them. This is why I decided to take some time to gather up as many as possible and share them with you here! Hopefully this can be a timesaver for you, along with teaching you a new trick or two. The resources have been divided into various categories to make them easier to find. CSS3 Cheat Sheet ↓ CSS2 Visual Cheat Sheet ↓ CSS Cheat Sheet (V2) ↓ Css Property Index ↓ BluePrint CSS ↓ HTML 5 Cheat Sheet ↓ HTML5 Canvas Cheat Sheet ↓ HTML5 Glossary ↓ HTML Character Entities Cheat Sheet ↓ Color Codes Matching Chart HTML (Convert CMYK, RGB Hex) ↓ Javascript JavaScript Cheat Sheet ↓ Javascript DOM ↓ JavaScript Reference Card ↓ jQuery 1.4 API Cheat Sheet ↓ jQuery selectors ↓ jQuery 1.3.2 ↓ jQuery 1.3 ↓ jQuery 1.2 ↓ Mootools 1.2 Cheat Sheet ↓ Prototype Cheat Sheet ↓ PHP & MySQL for dummies ↓ PHP 5 Online Cheat Sheet v1.3 ↓ MySQL
Decorative CSS Gallery ? Part 2 Long ago I wrote a tutorial on how to make decorative image galleries using an extra <span> tag. It requires jQuery to append the span tag which isn't quite user friendly. Today I'm going to share a better method without using Javascript. The same result can be achieved by using :before or :after pseudo element. View DemoDecorative Gallery Below is a sample image gallery markup in a <ul> list. Below is the base style for the .gallery. :before element Now I'm going to specify a 30 x 60px container with the paper clip background image to the a:before element. Art Frame You can use this trick to add any overlay graphic element on top. HTML5 Gallery Let's create a more advanced gallery using HTML5 markups. In the CSS, I added two :before elements: one on the <figure> element and another one on the <li> element. CSS3 Transform In this gallery, I added a cork pattern background on the gallery and use transform property to rotate the images. Nth-of-Type Update:
Backbone.js Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. The project is hosted on GitHub, and the annotated source code is available, as well as an online test suite, an example application, a list of tutorials and a long list of real-world projects that use Backbone. Backbone is available for use under the MIT software license. You can report bugs and discuss features on the GitHub issues page, on Freenode IRC in the #documentcloud channel, post questions to the Google Group, add pages to the wiki or send tweets to @documentcloud. Backbone is an open-source component of DocumentCloud. Downloads & Dependencies (Right-click, and use "Save As") Backbone's only hard dependency is Underscore.js ( >= 1.5.0). Introduction Many of the examples that follow are runnable. Upgrading to 1.1
Free Web Resources – Web Resources Depot d3 Getting beyond hello world with d3 20 November, 2013 (07:26) | d3, data visualization, tips | By: jerome About a year ago I proposed a very simple template to start working with d3. But is that the way I actually work? Of course not. Making the game of thrones visualization 13 May, 2013 (09:07) | d3, data visualization | By: jerome So I made this interactive visualization about the 5 Game of Thrones books. Selections in d3 – the long story 5 March, 2013 (12:20) | d3, data visualization, tips | By: jerome This past week, Scott Murray and I presented a tutorial at Strata on d3 (of all things!) Gun murders in America 29 December, 2012 (10:40) | charts, d3, data visualization | By: jerome Click for interactive visualization I have created this map of every homicide in the USA using firearms for the latest year where detailed information was available. Events in the Game of Thrones 9 December, 2012 (19:40) | d3, data visualization | By: jerome La nuit blanche Some simulation models
WebPlatform.org — Your Web, documented Paul Irish OverAPI.com | Collecting all the cheat sheets Pixel-in-Gene Web Culture: Grid-based Layout Designs The semantic web has brought on a new generation of Internet technology. As designers and developers work together to redefine the rules of the web, the number of open-source projects and third-party APIs continues to grow. The opinions of web scholars differ on the use of grid systems. Many argue that setting grid points limits the creativity of designers. Others contend that a grid provides a scientific basis for a design to be perfected. Both sides provide interesting arguments. The grid isn’t a master key to perfect design. A Comparison to the Classic Web Older generations used design as a control mechanism. In their wake, a new web culture is stirring. One reason for this development is the significant increase in the number of people working on the semantic web. Working for a pay day is satisfying, but not something to be passionate about. Where Grids Have Evolved There hasn’t been a major study comparing pre-standards and post-standards web design techniques. Visual Grid Designs