Monday, August 23, 2010

11 Useful Sources To Learn and Improve HTML Skills

If You are graphic designer, You should learn also some simple coding too. If You are new to this simple coding, You could find this resources useful. I listed few resources, I prefer to learn from and hopefully You’ll learn something too. This article isn’t very long, because I think You should choose just one place, where to learn from.

Okay, no more long discussions – enjoy!

1. HTML Dog

HTML Dog has been dishing out healthy code treats since 2003, and currently serves up around 1,500,000 page views a month. The idea is to take the somewhat convoluted official specs for XHTML and CSS and present them in a much more readable fashion.

Very useful HTML and CSS tutorial place, teaching You everything step by step – best practices, standards and code with “easy to understand” example. Give it a shot, You won’t regret it! I am only sorry about that, I didn’t knew about this place at the first time, when I tried to learn how to do simple coding. My favorite.

htmldog

2. W3Schools

W3Schools is the largest web developers site on the Internet. This was the first place where I started to learn basics. Personally I think those tutorials are a bit outdated, but W3C is founding place where just everything started.

w3schools

3. HTML Code Tutorials

Excellent site providing really helpful and complete guide to creating web pages. There is bunch of other useful resources like HTML Quick List with complete list of HTML tags, forum where to ask unclear questions and of course wide range of tutorial list.

htmlcodetutorial

4. HTML Goodies

HTML Goodies intended purpose is to help new and growing website developers learn their trade, and to provide them with tips, guides and reference sets for their use as they become more accomplished. If You are interested in HTML, MySpace HTML, learning the basics and also..colors, how to create buttons and much, much more. A huge resource roundup.

htmlgoodies

5. Tizag Tutorials

Tizag was designed to teach beginner web programmers how to use HTML and CSS. Also if You are getting deeper in web development, You can learn also JavaScript, PHP, Perl, AjaX, ASP, VBScript, XML, SQL, MySql, some useful tools and much, much more.

tizag

6. HTML Playground

Great site allowing You to play with HTML online – check out demo, do everything in 5 steps – choosing tag, read description, select tag from sample code, modify the atributes and finally see demo online. Pretty handy.

htmlplayground

7. Your HTML Source

I wanted to highlight this resource page, because of its well written language in easy to understand way. Everything is clearly listed on “Full Index” page teaching You not only how to create Your very first homepage, but also how to style it with CSS, add spice with Javascript and create it accessible and SEO friendly.

htmlsource

8. EchoEcho

This is one more site You must have in Your bookmarks, if You are web developer. You can not only learn whole coding basics there, but also You will find everything from free webspace to host your site to graphics, programs, online developer tools and applets that will help you make it look nice.

echoecho

9. Davesite

DaveSite also offers comprehensive overview how to use HTML, but this one is special because guide also teach You how to set up Your domain and hosting.

davesite

10. BraveNet

BraveNet offers a huge list of different useful resources, widgets, tools. This site has been over the web for about 10 years, so I am sure You’ll find out something useful too. And yes, that’s not all, of course, You can get HTML, CSS and FTP tutorials over there too.

bravenet

11. AListApart

A List Apart Magazine explores the design, development, and meaning of web content, with a special focus on web standards and best practices.

Excellent page to check on the latest web development news and also find out some nifty codes. Must subscribe web page!

alistapart


300+ Jquery, CSS, MooTools and JS navigation menus

If You are web developer great navigation menus always comes handy. I united this list for people like me, who sometimes wants to do job fast and choose from already prepared examples, which are easy to use. So here are many resources starting from very simple HTML and CSS navigation menus, until very complicated and advanced jQuery, JavaScript and MooTools techniques used to get maximal control with fading, sliding, dragging etc. effects. Be sure to bookmark this site for later use!

1.Fancy menu – very cool navigation menu:

orange-menu

2. Excellent CSS dock menu for MAC lovers made with jQuery:

css-dock-menu

Download dock menu

3. 37 different CSS navigation techniques:

navigation-6

4. Almost 5 years old menu, but looks great:

nav-7

5. Nice jQuery sliding effect menu with 4 different examples:

jquery-nav

6. Updated JQuery Nested Tab Set with Demo;

7. Vertical Flyout JavaScript Menu;

8. 13 hand-picked Vertical and horizontal CSS Menus ;

9. Different tutorials for CSS menu creation;

10. Big library of vertical CSS menus from dynamicdrive.com;

11. Nice collection of ~150 different CSS menus from CSSplay.com – regularly updated.

I really recommend You to visit this site:

cssplay

12. Menu with simple show/hide effect – 2 examples with CSS and MooTools;

13. Superfish v1.4.8 – jQuery menu plugin;

14.Accessible Image-Tab Rollovers;

15. Simple CSS vertical menu Digg-like;

16. Simple Javascript Accordions;

17. Unique navigation menu using jQuery and MooTools:

nav-jquery

18.CSSmenumaker.com – offers professional CSS menus;

19. Cool JavaScript menus from JavaScriptkit.com;

20. Create a multilevel Dropdown menu with CSS and improve it via jQuery

21. jdMenu Hierarchical Menu Plugin for jQuery – vertical multilevel dropdown list;

22. Amazing apple style navigation menu:

apple-nav

23. Accordion style jQuery menu:

accordion-menu

24. Cool animated navigation with CSS and jQuery:

nav-8

25. jQuery Treeview Plugin:

treeview

26. 35 different unique Jquery demos with different features

27. Jquery fastfind menu – click toogle menu, to get popup navigation menu:

quick-navi

28. jQuery idTabs – 8 different cool jQuery examples:

jquery-cool

29. jQuery ContextMenu – lightweight jQuery plugin that lets You selectively override the browser’s right-click menu with a custom one of your own:

contextmenu

30. jQuery UI tabs – different tab effects as simple tab, start with custom tab, slide effect, fade effect and much more;

31. iconDock jQuery – one more similar navigation to MAC OS X dock effect;

32. SlidingMenu – very simple sliding menu using the effects provided by Interface (think Script.aculo.us for Prototype)

33. Tabbed navigation

These eleven menus are created using the Sliding Doors technique, these menus work also correctly in Internet Explorer.

navigation-1

Download all menus

34. Another CSS tabbed navigation:

tabbed-navigation

35. 9 different CSS block menus:

block-navigation

Download all menus

36. 12 more different CSS menus.

navigation-2

37. ADxMenu – 4 different examples of cool navigation menus:

navigation-3

Download

39. At CSSmenubuilder is huge list of different and modern look menus, take Your best pick:

navigation-4

navigation-5

40. Huge list of different menu examples:

listamatic

listamatic2

41. CSSmenus: horizontal and vertical:

css-menu-vertical

42. Great navigation and little more, one of the popular accordion versions:

accordion

Download accordion menu

CSS menu generators:

List-u-Like CSS Generator