In this “Collection of HTML5 and CSS3 Resources“, you will find articles and tutorials covered on different websites. Demos and examples are also included in this list. I tried my best to collect all useful and related information to put at one place. Still if you find something missing, kindly share it in the comments below. Read More
Post your Job openings and expose them to quality web developer and web designer candidates.
Find your next Web Professional. Find your next gig or job. Powered by front-end-developer.com
XHTML is dead, long live HTML 5! According to W3C News Archive, XHTML 2 working group is expected to stop work end of 2009 and W3C is planning to increase resources on HTML 5 instead. And even although HTML 5 won’t be completely ready until 2022, it doesn’t mean that it won’t be widely adopted within the foreseeable future.
So in the spirit of the upcoming change we decided to release a handy printable HTML 5 Cheat Sheet that lists all currently supported tags, their descriptions, their attributes and their support in HTML 4.
Please notice that the specification is an ongoing work, and is expected to remain so for many years, although parts of HTML 5 are going to be finished and implemented in browsers before the whole specification reaches final Recommendation status. We’ll do our best to update the cheat sheet when new changes will become known. The cheat sheet was created by our friends from Veign.com and released exclusively for the readers of Smashing Magazine.
More than just a plugin, WPtouch is an entire theme package for your WordPress website. Modeled after Apple’s app store design specs, WPtouch makes your WordPress website load lightning fast on touch mobile devices, show your content beautifully, all while not interfering with your regular theme.
WPtouch automatically transforms your WordPress blog into a web-application experience when viewed from an iPhone, iPod touch or Android touch mobile device. It comes complete with all the standard WordPress blog features: search, login, categories, tags, archives, photos & more. WPtouch also offers many customization features through a beautifully designed WordPress admin panel.
Falcon is a blazing fast visual markup tool that was designed to work with Aviary’s new Firefox Extension (Talon) for screen capture, as well as for stand-alone image preparation. Read More
This is the showcase for icon collections, that web developers and designer can use them for their work. The requirements of the icons for web will be more about simplicity, understandable metaphor and also light weight. I have collected the icons link below, these collection is strictly for web developer and its free.
A handy collection of bullets for your webdesign needs – these icons can add that little extra to your design and make your site stand out from the crowd.
You may use these icons as you wish, but since the bullets are uploaded by anonymous users, some of them might be subject of copyright law.
Paul Hayes has been playing with CSS transformations and making 3D cubes:
-moz-transform(documentation) and Safari 3.2+
This resulted in:
A 3D cube created with CSS
Supported browsers: Safari 3.2+, Google Chrome, Firefox 3.5+
Supported browsers: Safari 4+, Google Chrome
WebKit initially put this in (iPhone needed it after all!) and it will be interesting to see what users come out of it. The full CSS for the simple example is below:
There are many advantages to designing with Cascading Style Sheets. CSS is extremely easy to learn and rework once a basic site framework has been established. Websites, or website components can easily be changed into something totally different just by swapping a single CSS file, or a line within a CSS file.
CSS designers always seem to have a few different elements that they commonly use over and over in all designs, these can include navigation elements and form fields, among other items. Smashing Magazine has compiled a list of 53 CSS Techniques that you couldn’t live without, linking out to tutorials on CSS navigation, tabbed navigation, bar graphs, rounded corners, hover effects, image map, submit buttons, custom bullets, and sidenotes. Whether you are new to CSS, or have been in it for a while, these are some great tutorials to have archived as reference materials.
Here’s a nice top ten of things not to do when building accessible sites:
- Don’t use verbose ALT text. ALT text for information-based images
should be short and succinct. Decorative images should never have ALT
- Don’t use random characters, such as vertical bars, to separate links
- Don’t insert text into form fields
- Don’t use access keys as they can override keyboard shortcuts for screen readers
- Don’t use table summaries (unless there isn’t sufficient information provided about the table on the page)
- Don’t forget content organisation. Structure text properly with short
paragraphs, headings, lists and plain and simple language.
- Don’t worry too much about writing accessibility help pages since they won’t really be read
- Don’t agonise over acronyms and abbreviations
- Don’t change the tab order (unless you have a very good reason)
- Don’t forget to listen with a screen reader
Sites with long, multiple tutorials on CSS.
- CSS Basics.com : Learn everything you ever wanted to know about the basics of CSS
- CSS Tutorials : at EchoEcho
- CSS Tutorials : Eric Meyer / Meyerweb
- CSS Tutorials : at Tizag
- CSS Tutorials : at Tutorialized
- CSS Tutorials : at W3 Schools
- CSS Tutorials : CSS guide, Tutorials, Articles at WestCiv
- CSS Tutorials/Examples : Position Is Everything
- CSS Demonstrations and Tutorials : at DoMedia
- Floatutorial : CSS Tutorials on Float
- Listutorial : CSS Tutorials on Lists
- Selectutorial : CSS Tutorial on Selectors
- CSS Beginner’s Guide : at HTMLDog.com
- CSS Intermediate Guide : at HTMLDog.com
- CSS Advanced Guide : at HTMLDog.com
- Stylesheets : at HTMLSource
- Project Cool: Web Development Basics : CSS Tutorials at DevX
CSS techniques to overlay images on a webpage.
- Lightbox JS : Original; a simple, unobtrusive script used to overlay images on the current page.
- Greased Lightbox : Greasemonkey/Creammonkey/Opera user script designed to enhance browsing on websites that link to images such as Google Image Search, Flickr, Wikipedia, Facebook, MySpace, and deviantART.
- GreyBox : A pop-up window that doesn’t suck.
- Leightbox : uses inline div’s instead of AJAX calls.
- Lightbox Plus : by Takuya Otani
- Lightbox Gone Wild : at ParticleTree
- The Lightbox Effect without Lightbox : by PJ Hyett
- LITBox 2.0 : modified Thickbox made into a Prototype class based off of the Scriptaculous.
- Multifaceted Lightbox : at GregPhoto
- Prototype Window Class : at Xilinus
- Suckerfish HoverLightbox : hover + gallery + lightbox at MondayByNoon
- Thickbox – One box to rule them all. : by Cody Lindley
- Slightly ThickerBox : Thickbox with Prev and Next links at Jasons Toolbox
- WP lightbox JS WordPress plugin : WordPress Plugin by Safirul Alredha
- Lightbox2 : WordPress Plugin at m3nt0r – beyond the net
- GreyBox Plugin : WordPress Plugin at aNieto2K