TOP 10 ONLINE RESOURCES OF WEB DESIGNING TRAINING

TOP 10 ONLINE RESOURCES OF WEB DESIGNING TRAINING

I found high-quality web design training, tutorials about HTML, CSS, HTML5, CSS3, JavaScript, Jquery on these sites. I feel these sites are the top 10 online training resources for web design. 

1.W3 Schools:

2. Google Code University

03. Treehouse

A better way to learn technology
From zero experience to job-ready

The extensive Treehouse library of step-by-step video courses and training exercises will give you a wide range of competitive, in-demand technology skills that will help you land your next dream job or build your startup idea. No experience? No problem!

04. Lynda.com

Learn software, creative, and business skills

• • High-quality, professional video production
• • Engaging instructors, carefully chosen for their expertise
• • Anywhere learning on Macs, PCs, tablets, and smartphones
• • Unlimited access to all 1,574 courses (more added every week)

05. Opera Web Standard Curriculum

The web standards curriculum has been donated to the W3C web education community group, to become part of a much bigger educational resource. It is constantly being updated so that it remains current with modern web design practices and technologies. To find the most up-to-date web standards curriculum, visit the web education community group Wiki. Please make changes to this Wiki yourself, or suggest changes to Chris Mills, who is also the chair of the web education community group.

06. Don't Fear the Internet

Are you a print designer, photographer, fine-artist, or general creative person? Do you have a shitty website that you slapped together yourself in Dreamweaver in that ONE web design class that you took in college? Do you not have a site at all because you’ve been waiting two years for your cousin to put it together for you? Well, we’re here to help. We know that you have little to no desire to do web design professionally, but that doesn’t mean that you want an ugly cookie-cutter site or to settle for one that hasn't been updated since Hackerswas in theaters.

07. netmagazine.com

.net is the world's best-selling magazine for web designers and developers. Each issue boasts a wealth of expert tips and advice, including over 30 pages of advanced step-by-step tutorials on subjects as diverse as CSS, HTML, JavaScript, web graphics and Flash. You'll also find in-depth features, not to mention interviews where major industry players impart their wisdom. If you're serious about web design or development, then .net is the magazine for you.

08. Mozilla School of Webcraft

At P2PU, people work together to learn a particular topic by completing tasks, assessing individual and group work, and providing constructive feedback.

P2PU is a different kind of learning experience–knowledge isn’t transmitted, broadcast, or transferred. Instead, learning evolves by working together on projects, sharing with each other, giving each other feedback, and iterating to improve. 

Backed by Mozilla

Mozilla's mission is to keep the web open, and to enable anyone to take part in building it's future. In School of Webcraft you can earn badges backed by Mozilla, that highlight your technical and community skills to your friends, colleagues and potential employers. School of Webcraft Badges are easy to display on your personal website, online profiles, and CV and use the Open Badges framework, a way to record, track, and display your skills and knowledge across the web.

09. Smashing Magazine

Founded in September 2006, Smashing Magazine delivers useful and innovative information to Web designers and developers. Our aim is to inform our readers about the latest trends and techniques in Web development. We try to persuade you not with the quantity, but with the quality of the information we present. Smashing Magazine is, and always has been, independent.

10. Codecademy

Codecademy is a team of hackers working hard to build a better way for anyone to teach, and learn, how to code. We're determined to succeed in realizing our mission to turn a world of tech consumers into one of empowered builders.

Keywords:
Top 10 Online Resources of Web Designing
Web Designing Online Training
Free Web Design Training
Best Resources for Web Design Online Training
Excellent Resources for Web Design Video Tutorials

How to wrap long lines without spaces in HTML? "word-wrap:normal | break-word;"

How to wrap long lines without spaces in HTML?

How to break long urls without spaces in span?

WORD WRAP CSS:

word-wrap: normal | break-word

Syntax

word-wrap: normal|break-word;

Description:

This property specifies whether the current rendered line should break if the content exceeds the boundary of the specified rendering box for an element (this is similar in some ways to the ‘clip’ and ‘overflow’ properties in intent.) This property should only apply if the element has a visual rendering, is an inline element with explicit height/width, is absolutely positioned and/or is a block element.

Examples

div { word-wrap: break-word }
<div style=”word-wrap: break-word”>Here is some content for the div element</div>

Value	Description
normal	Break words only at allowed break points
break-word	Allows unbreakable words to be broken

Javascript Syntax:

object.style.wordWrap="break-word"

Example

Issue in ie ?  Issue with SPAN tag ? Anchor tag?

Add display :block; property to style to fix the ISSUE:: ENJOY..

Reference: http://www.css3.com/css-word-wrap/

http://www.css3.com/css-word-wrap/

"viewport" meta tag to control layout on mobile devices

"viewport" meta tag to control layout on mobile devices

<meta name="viewport" content="width=device-width">

General Use of Viewport Tag
Viewport meta tag is generally used for responsive web design to set the viewport width and initial-scale on mobile devices.

The viewport is the logical window in which a web page is designed. We can set the width, height, and initial scale of the viewport for a web page using the viewport property in an HTML <meta> tag.

We can add viewport meta tag in Head tag like this:

<!doctype html>
<html>
<head>
  <title>Hello world!</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
  <p>Responsive Web Design!</p>
</body>
</html>

Know about Viewport Metatag basics: 
A typical mobile-optimized site contains something like the following:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

viewport meta tag supports a handful of other properties for the "content" attribute:

viewport meta tag "content" property attributes

Property	Description
width	The width of the virtual viewport of the device. Enter a number (pixels assumed), or the keyword "device-width" to set the viewport to the physical width of the device's screen.
height	The height of the virtual viewport of the device. Enter a number (pixels assumed), or the keyword "device-height" to set the viewport to the physical height of the device's screen.
initial-scale	The initial zoom of the webpage, where a value of 1.0 means no zoom.
minimum-scale	The minimum level the user is able to zoom out of a webpage, where a value of 1.0 means the user isn't able to at all.
maximum-scale	The maximum level the user is able to zoom in on a webpage, where a value of 1.0 means the user isn't able to at all.
user-scalable	Sets whether the user can zoom in and out of a webpage. Set to yes or no.

When optimizing a webpage for mobile devices, the first step is to add the viewport meta tag to the HEAD section of your page, so that mobile devices refrain from making changes to the zoom level of the webpage unilaterally. In most cases you'll simply want to set the meta tag's content property to "width=device-width", so that no scaling of the page occurs at all, and your CSS media queries will return the actual dimensions of the device, not the "zoomed out" version's. To also prevent the device from zooming in on a webpage when its orientation has been changed from portrait to landscape and visa versa, you can also throw in an initial-scale and maximum-scale property and limit both of them to 1:

Webpage rendering at 100% and Scaling Not working for Your web page in Mobile Device ?? 

Here is a solution : 

Generally we make a Common Mistake in Adding Viewport tag:

A common mistake is that people often apply initial-scale=1 on non-responsive design. It will make the page render at 100% without scaling. If design is not responsive, users would have to pan around or zoom out to see the full page. The worst case is combining user-scalable=no or maximum-scale=1 with initial-scale=1. It will disable the scaling and zooming capability of site. With scaling disabled, users have no way to zoom out to see the complete page. 

Note: if design is not responsive, do not reset the initial-scale or disable scaling!

Keywords:
viewport meta tag to control layout on mobile devices
viewport meta tag Tutorial
viewport meta tag- the key to preparing a page for mobile devices optimization
Webpage rendering at 100% and Scaling Not working for Your web page in Mobile Device ?? 
How to fix Webpage Scaling issue in Mobile  device?
Zooming capability of webpage disabled??

Reference urls:
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml 

Rounded Corners with CSS (With No Images)

Rounded Corners with CSS (With No Images)
Rounded corner CSS without images
Rounded Corners:
CSS Rounded Corners for Mozilla Firefox
CSS Rounded Corners for -WEBKIT BROWSERS

Standard: CSS : 

CSS for Standard Corners:

.class {

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

border-radius: 15px; 

-khtml-border-radius: 15px; /* for old Konqueror browsers */ 

}

CSS for Individual Corners:

.class {

-moz-border-radius-topleft: 15px;

-moz-border-radius-topright: 25px;

-moz-border-radius-bottomright: 35px;

-moz-border-radius-bottomleft: 0;

-webkit-border-top-left-radius: 15px;

-webkit-border-top-right-radius: 25px;

-webkit-border-bottom-right-radius: 35px;

-webkit-border-bottom-left-radius: 0;

border-top-left-radius: 15px;

border-top-right-radius: 25px;

border-bottom-right-radius: 35px;

border-bottom-left-radius: 0;

}

Short CSS for Rounded Corners:

-moz-border-radius: [top-left] [top-right] [bottom-right] [bottom-left]

Example:  -moz-border-radius: 15px 25px 35px 0;

(Firefox 3.5+):

-moz-border-radius-topleft: [horizontal radius] [vertical radius];

Example: -moz-border-radius-topleft: 10px 40px;

We can write like this also 

-moz-border-radius-topleft: 15px 20px;

-moz-border-radius-topright: 25px 35px;

-moz-border-radius-bottomright: 35px 40px;

-moz-border-radius-bottomleft: 45px 65px;

CSS FOR WebKit Elliptical Rounding

All corners:

-webkit-border-radius: 33px 11px;

LEFTcorners only:

-webkit-border-top-left-radius: 52px 32px; 

-webkit-border-bottom-left-radius: 52px 32px;

Reference URL

Print Style Sheet : What is Print Style Sheet ? How to Set up Print Style sheet ?

Print Style Sheet : What is Print Style Sheet ? How to Set up Print Style sheet ?

What is Print Style Sheet ?

A print stylesheet formats a web page so when printed, it automatically prints in a user-friendly format. Print stylesheets have been around for a number of years and have been written about a lot. Yet so few websites implement them, meaning we're left with web pages that frustratingly don't properly print on to paper.

How to set up Print Style sheet ?

The best method is to start from scratch and rely on the default style sheet of the browser, which takes care of the printed output pretty well by default. In this case, insert all declarations for printing at the end of your main style sheet, and enclose them with this distinct rule:

@media print {
   …
}







For this we have to do two things 

1. Include all screen styles in the separate @media screen {…} rule;
2. Omit the media type for the condensed style sheet: 
<link rel="stylesheet" href="css/style.css"/>

or we can write like this :

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

 Now ready to add print style sheet ? Thinking about how to write styles?? 
Check the below example: 

   * Remove unwanted elements */
#header, #nav, .noprint
{
display: none;
}

/* Ensure the content spans the full width */
#container, #container2, #content
{
width: 100%; margin: 0; float: none;
}

/* Change text colour to black (useful for light text on a dark background) */
.lighttext
{
color: #000
}

/* Improve colour contrast of links */
a:link, a:visited
{
color: #781351
}

Every thing done, Still have an issue with printing background colors  & Images ?
Here is the solution :

How to get Background Colors & Images in Pirnt ? 
How to get Background Colors & Images in Print pdf file created in Chrome ? 

It's simple,

Add 
"-webkit-print-color-adjust:exact; " property in body styles.

Ex:
body {background-color:#fff; font-family:arial; font-size:15px; background:white; -webkit-print-color-adjust:exact; } 

 

HTML5: The figure & figcaption elements

HTML5: The figure & figcaption elements

Definition and Usage

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.

The <figure> tag also supports the Global & Event Attributes in HTML5.

The <figure> element

W3C Says :

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.


The <figure> element is intended to be used in conjunction with the <figcaption> element to mark up diagrams, illustrations, photos, and code examples (among other things). The spec says this about <figure>:
 

The <figcaption> element

 W3C Says :

The figcaption element represents a caption or legend for a figure.

The <figcaption> element is optional and can appear before or after the content within the <figure>. Only one <figcaption> element may be nested within a <figure>, although the <figure> element itself may contain multiple other child elements (e.g., <img> or <code>). 

Using <figure> and <figcaption>

Want to know how to use ?? Code Examples?

<figure>
  <img src="/image-name.jpg" alt="Figue Example display">
</figure>

Figure with caption Like :

<figure>
  <img src="/macaque.jpg" alt="Macaque in the trees">
  <figcaption>Lorem Ipsum starts form here. Dummy text. <a href="http://www.google.coml">Google</a></figcaption>
</figure> 

Multiple Images with Caption :

<figure>
  <img src="/image1.jpg" alt="Kooaburra">
  <img src="/iamge2.jpg" alt="Pelican stood on the beach">
  <img src="/image3.jpg" alt="Cheeky looking Rainbow Lorikeet">
  <figcaption>Signle Caption for multiple Images <a href="http://www.google.com">Fig Caption</a></figcaption>
</figure> 

Differences between <figure> and <aside>

If the content is simply related and not essential, use <aside>.
If the content is essential but its position in the flow of content isn’t important, use <figure>. 

Text Source:

W3schols, W3C,  

20 MooTools Tutorials and Examples

Getting Started with MooTools

1. The "Mootorial"

The Mootorial at //clientside is a comprehensive, practical tutorial on the MooTools framework. The tutorial allows you to execute the sample code either by Firebug or the website's built-in console.

2. MooTools Overview Video Tutorial

Here's an excellent screencast that introduces the MooTools framework. It covers the basics such as the concept of chaining, customizing MooTools to your needs, and where to find documentation for MooTools code.

3. Increasing User Experience With Javascript

Beauty By Design provides a nine-part video series on improving user interaction using JavaScript (primarily MooTools). A couple of topics covered in the lessons include: using mooTabs, creating sliding sub menus, and using Fx.styles to control font size.

4. Understanding Mootools Selectors

One of the most powerful features of MooTools (as well as other frameworks/libraries like jQuery and Prototype) is the ability to easily select page objects for you to work on. This tutorial covers the basics of selectors in MooTools: $(), $$(), $E(), and $ES() functions.

5. MooTools MooTools Classes: How to use them

This tutorial is an entry-level introduction on working with classes in MooTools. The tutorial works with a hypothetical scenario (buying a car from a car store) to illustrate the concept of classes. The last section of the article discusses the differences of MooTools and script.aculo.us classes.

Intermediate/Advanced Topics

6. Mootools: Ajax and XHR classes

MooTools' Ajax/XHR classes provides developers a much simpler way of working with XMLHTTPRequests by reducing the amount of code you have to write and by handling browser differences for you. This tutorial talks about the Ajax and XHR classes in brief.

7. Ajax Responder in MooTools

This article delves into the use, extension, and capabilities of the Ajax class in MooTools. It discusses chaining Ajax requests and events, and how you can extend the Ajax class for your needs (also applicable to other MooTools classes).

8. How well do you know Mootools?

Getting started with MooTools is easy, and it won't be long until you can create wonderful effects and increase user interactivity in your web pages. To help you become a MooTools master, here's a checklist of common coding mistakes and its corresponding correct usage.

9. Mootools Short-cuts

This is a follow-up article from the one above, focusing more on MooTools syntax usage. Examples involve using shorter code for selection of objects, shorthand for the Ajax class, and creating new elements.

10. Mootools: JSON explained

Here's an excellent introduction to using JSON with MooTools to provide server-side interaction to your web applications. Topics covered include converting a JSON string into a JavaScript object and vice versa.

11. Using MooTools' Hash.Cookie API

This article explains how to take advantage of MooTools' powerful Hash.Cookie API to make working with complex cookie utilization a cinch. The example showcases a working example of how you can store the number of times a user visits a page.

12. Chaining with MooTools 1.2

Chaining is beneficial for several reasons including the ability to sequentially execute events ("in a chain") as well as reduce the number of lines of code you have to write. If you're wondering about the "who, what, where" of chaining in MooTools, check out this brief but informative tutorial.

Practical/Working Tutorials and Examples

13. AJAX mootools secure contact form

Learn how to protect your public web forms from spam and SQL injections with this tutorial on how MooTools can be used to make safer public web forms.

14. Using CSS and Mootools to simulate Flash horizontal navigation effect

Create a navigation area that smoothly scrolls left or right depending on where you hover your mouse.

15. Facebook Sliders With Mootools and CSS

Check out this nifty tutorial on how to build a Facebook-inspired set of slider controls that manipulate the opacity, width, and height of an image.

16. MooTools Gone Wild: Element Flashing

In this tutorial, you'll learn how to make page elements flash. It's an effective way of drawing attention to a particular section of a web page or alerting users of status changes.

17. Nice Ajax effect for message box using Mootools

Here's a tutorial on how to display messages that fades in after the user clicks on the submit button. It's designed for use with web forms, but it can be modified into similar applications.

18. Two CSS vertical menu with show/hide effects

This tutorial shows you how to build a navigation menu that slides up and down smoothly using MooTools. The article also covers how to make a similar effect using plain JavaScript.

19. Mootools Content Slider With Intervals

Here's an excellent step-by-step tutorial on how to make a content area that slides left-to-right at set intervals – great for slideshows.

20. Jazz Up Your Forms With MooTools

This is a two-part series that goes over how to make your web forms fancier. The first part shows you how to add animated field highlighting and how to display instructions to users. In the second part, you'll step it up a notch by adding live comment previewing and auto-resizing of text areas.

Have you got your own personal MooTools resources to share? Got an interesting MooTools application you want to show us? Talk about it in the comments!

text source: 

http://sixrevisions.com/javascript/mootools_tutorials_and_example/

14 jQuery Plugins for Working with Images

14 jQuery Plugins for Working with Images

JavaScript frameworks have become very popular in the recent years by making the creation of dynamic effects much easier. Lightweight, used in the WordPress andDrupal core, jQuery is now one of the most used JavaScript libraries around.

The following list of jQuery plugins will help you to improve the usability of your website or web applications by enhancing the display of your images.

1. s3 Slider

s3 Slider Demonstration page.

A simple way to add smooth image slideshows and showcases on your website.

2. jQuery Image Strip

jQuery Image Strip Demonstration page.

Nice little image viewer that uses fancy visual effects. This can be of great use for displaying various views of a product in an e-commerce website.

3. jQuery Thumbs

Easy thumbnails creation with jQuery, jQuery Thumb dynamically wraps images and/or link images with a div.

4. jCrop

jCrop Demonstration page.

Quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine.

5. Image preview

Image preview Demonstration page.

Create image previews with this accessible and easy to implement script.

6. EOGallery

Web animated slideshow gallery made with jQuery.

7. jCarousel Lite

jCarousel Lite Demonstration page.

Carousel script with jQuery. Navigate images or HTML in a carousel-style widget, lightweight and flexible, customizable to fit most needs.

8. Thickbox

Thickbox Demonstration page.

Webpage UI dialog widget using the jQuery library, it shows any type of content in a modal box.

9. PanView

To let your visitors view details of a big image. Great for letting them have a better view of an artwork, map or panorama. PanView creates a fixed size div in which the user can move the bigger image.

10. jQuery Cycle plugin

The jQuery Cycle Plugin is a lightweight slideshow plugin that supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects.

11. Coda Slider

A jQuery script that emulates the effect used on the gorgeous Coda website.

12. Rounded Corners

Easy rounded corners creation. Tons of effects are available for fixed or fluid divs.

13. ImageCube

Cool effect to rotate your image as if they were the faces of a cube.

14. jQZoom

jQZoom Demonstration page.

Javascript image magnifier to give a better view of your images.

text source:
http://sixrevisions.com/resources/14-jquery-plugins-for-working-with-images/