yensdesign – Tutorials, Web Design and Coding

Daily free tutorials about web design, coding, jquery and more

Posts Tagged ‘html’

Cheat Sheets Pack for Webmasters

Monday, December 22nd, 2008

If you are very forgetful as I am and sometimes when you are “in the flow” and you cann’t remember a javascript function, a CSS property you know, it can be very helpful take your cheat sheet and remember it with a simple glance. You can read your desired cheat sheet in your screen or maybe just print it as a lot of people used to do, with the time you will find it faster and faster because you know the specific area where you must look to find that CSS property that you forgot (remember that visual memory it’s very powerful!).

You can download the Full Cheat sheets pack for Webmasters or download one by one the cheat sheets:

I hope it be useful for those forgetful heads :P


How to create a stylish loading bar as Gmail in javascript

Monday, November 17th, 2008

Hi folks! long time ago from last tutorial, eh? Sorry for that but now you know that I spent last days working hard on a new online jukebox (for people who love music you know :P ). If you want to try it I will give you some invitations for the private beta to get feedback from you (post in comments!).

Well, let’s focus on the new tutorial called: “How to create a stylish loading bar as Gmail in javascript“. As you can suppose it will be about how to create the famous loading bar from gmail or other sites as (“the spanish facebook“), etc.

But the magic on this tutorial isn’t the loading bar, it’s the way to load all resources like javascript, css, and other static files that our web application will need, to delete user waiting times during his visit.

You can test a working live example over here:

Check out the final result!

Tested in: Firefox, Internet Explorer 6 & 7, Opera, Safari & Chrome.

As always, the rest of the tutorial after the jump ;)


Create a professional interface for your web applications using jQuery

Tuesday, October 21st, 2008

I am very excited to see that a lot of people are linking our tutorials and this the best way to get the motivation to continue writing more and more tutorials. So thanks all for the comments, referrals and for visit daily :)

In this tut we will create a professional interface for your web applications using the killer javascript library jQuery, as we used to create the stunning and smooth popup in jQuery.

As always here you have a demo of the final result:

Image preview of the interface

Tested in: Firefox, Internet Explorer 6 & 7, Opera (old and 9.52) , Safari & Chrome (file menu doesn’t works well).

Let’s begin the tutorial guys!


How to create a stunning and smooth popup using jQuery

Friday, September 26th, 2008

Nowadays, websites are more and more rich and interactive and users are becoming more and more critical with all things in websites. Using windows popup to show important information are in the air and We are going to learn how to create a stunning and great window popup from the scratch using jQuery in a simple and clean tutorial, the first one of this new blog. Just enjoy it and tell me uf you can not understand something because my english sucks…

You can test the tutorial working overhere.

Tested in: Firefox, Internet Explorer 6 & 7, Opera (old and 9.52) , Safari & Chrome.