Intelligentedu
Best New Free Computer IT Training Tutorial Resources


March 8, 2011

CSS Tutorials, Exercises, and Guide

Here are many CSS Tutorials, Exercises, Samples and a CSS Guide, at westciv.com, that provide good explanations of how to use Cascading Style Sheets for many types of web page elements and features. These CSS tutorials provide explanations and worked examples to help you quickly learn CSS and start creating your web pages and sites using style sheets.


14 CSS Tutorials

 - Logo Effect
 - Floated Layout
 - Validating CSS and HTML
 - CSS for Page Layout
 - Pure CSS Rollovers
 - Creating a Decorative Side Panel
 - Customising Link Appearance
 - Styling Visited Links
 - General Text Appearance
 - Create your own Bullet Points
 - Create a Simple Navigation Bar
 - Create a Navigation Bar Using Unordered Lists and List Item Elements
 - Integrate Text and Images
 - CSS Buttons


CSS Exercises and Code Samples
Learn how to apply CSS text styling, page appearance and layout, for your web pages. These exercises and coding examples will help you learn how to use CSS.

1. Introduction
2. A short intro to CSS
3. Tool checklist

4. My first style sheet

Create a style sheet, and then an HTML document which links to it.
5. Basic page appearance

Create your first style sheet rules and start using some basic properties.
6. More text properties

Learn more methods of styling text.
7. Class selectors

Use the HTML class attribute to apply styling to individual elements.
8. Styling links

Customize how hyperlinks are displayed in relation to your website design.
9. Page layout

Use CSS to create a smooth liquid layout.
10. Creative use of images

How to use background images.
11. Descendent selectors
Find out how to selectively style elements on your page.
12. Styling a navbar
How to apply styling the navigation bar.
13. Where to now?
A list of resources for more detailed information and tools about CSS.


Guide to CSS:

Introduction to CSS

 - CSS intro
 - why use css?
 - what's a style sheet?
 - how do they work?
 - linking & embedding
 - statements

Selectors
 - type
 - class
 - id
 - descendant
 - link pseudo class
 - pseudo element
 - selector groups
 - dynamic pseudo class
 - language pseudo class
 - child
 - first child
 - adjacent
 - attribute

Properties
 - text style
 - text layout
 - background
 - border
 - margin
 - padding
 - page layout
 - element type
 - user interface
 - values

Advanced
 - cascade & inheritance
 - generated content
 - media
 - printing
 - mobile profile



Tags for this post>> |


Filed under: Best New Free Computer IT Training Tutorial Resources — computer_teacher @ 10:06 pm


March 16, 2009

51 Web Development Tutorials

Given below are 51 Web Development Tutorials at devhood.mit.edu. Irrespective of whether you are a beginner learning the basics of Web Development, or an expert trying to find an innovative solution to a problem, these web development tutorials will essentially guide you in both aspects. The topics covered here are vast and varied, and include HTML, DHTML, CSS, CGI, ASP, PHP, Perl, Java, Javascript and XML. Each of these topic has multiple, easy-to-understand tutorials, and they should get you up to speed in no time.


General Web Development Tutorials:

 -  Calculating date differences using JavaScript
 -  Javascript Photo Album
 -  Using PHP To Create Dynamically Driven Templates
 -  Introduction to JavaScript: Rotating Banners on your web page
 -  How to log IP's (and some other http headers) with ASP/VB
 -  Introduction to SSL for IIS5
 -  A beginners approach to creating an online webcam.
 -  Dynamic tables using XML and Internet Explorer 5 (or better)
 -  Putting a cool border around a picture
 -  PHP/MySQL Announcements
 -  Troubleshooting TCP/IP Networks
 -  PHP/MySQL Safe Query
 -  Submitting a FORM to a new window
 -  Best Practices for Securing Microsoft IIS 5 and 5.1
 -  PHP and mySQL
 -  PHP Math Processor
 -  Put Messenger Contacts on Your Site
 -  How to create an army of remote network nodes for debugging network applications
 -  Hosting Multiple Domains With IIS
 -  Parsing XML - Wired News Reader
 -  Hosting Multiple Domains With One Machine
 -  Sending Email with JavaMail
 -  Overcoming "401 Access Denied"
 -  Perl - The Basics
 -  The Basics of SSI
 -  C and C++ Compiled CGI Scripts for the Web
 -  Creating a Graphical Hit Counter In Perl
 -  Using HTML and SSI to create templates
 -  Effective use of HTML Tables
 -  More non-web uses for JavaScript...
 -  Positioning With CSS
 -  Making Coloured Scroll-bars for IE 5.5 Using CSS
 -  Set up your own name server
 -  PHP: Generating Form Result
 -  Let's have fun with basic PHP II : File Uploading with PHP
 -  XML, Part 2: XML Schemas
 -  Partitioning Large Images to Reduce Download Time
 -  Setting up SSL for your Servers and Email
 -  XML, Part 1: XML and Namespaces
 -  Intro to PHP
 -  Beginner's HTML
 -  Using Tables To Make Your Website Look More Professional
 -  Let's have fun with basic PHP I: Email address validation
 -  Flash light effect using Macromedia Flash 4.0
 -  CGI script to send mail
 -  Using JavaScript for more than just web pages can be both fun and profitable....
 -  Random positioning with javascript.
 -  CSS: Why the need, and what can it do?
 -  Basic HTML
 -  JavaScript and the DOM
 -  How to put a JavaScript into an HTML document?



Tags for this post>> | | | |


Filed under: Best New Free Computer IT Training Tutorial Resources — computer_teacher @ 6:43 pm


January 21, 2009

The Woork Handbook: Web Dev, CSS, and Ajax

Here is the Woork Handbook which is an ebook by Antonio Lupetti covering web design and web programming. This 133-page ebook teaches and demonstrates these web development technologies: CSS, AJAX, PHP, MooTools, Scriptaculous, SQL, and Web Database. Here is the direct download link for this ebook in pdf format.


Table of Contents of the Woork Handbook:

Cascade Style Sheets:
 - Useful guidelines to improve CSS coding and maintainability
 - Write a well structured CSS file without becoming crazy
 - CSS coding: semantic approach in naming convention
 - Three column fixed layout structure using CSS
 - Top Down approach to simplify your CSS code
 - Perfect pagination style using CSS
 - Clean CSS Form using CSS
 - Clean and pure CSS FORM design
 - Liquid layer with rounded corners using css
 - Liquid expandable section with rounded corners using CSS
 - Liquid styled input element with CSS
 - Clean Tab Bar Digg-like using CSS
 - Digg-like navigation bar using CSS
 - Organize and design a navigation bar for your site using CSS,
 - PHP and URL variables
 - Nice login and signup panel Newsvine-like using CSS
 - Tips to design your site for mobile devices

Database:
 - Introduction to design a Entities-Relationship Model
 - Create tables and relationships with SQL
 - Using PHP and SQL to create tables and relationships
 - Create relationships between database table using phpMyAdmin

Ajax:
 - Ajax basic: create your first XMLhttpRequest file
 - How to solve Internet Explorer cache issue in Ajax
 - Insert record into a database table using Ajax and PHP
 - Insert record into a database table using Ajax and Coldfusion
 - Edit in place with Scriptaculous and PHP
 - Delete record with Ajax using prototypejs and PHP
 - Simple search engine in Ajax and PHP

MooTools, Scriptaculous and other Javascript frameworks:
 - MooTools basic tips for web designer part
 - MooTools basic tips for web designer part
 - Nice vertical menu with motion and opacity effect
 - Simple ul list with a nice slide-out effect for <li> elements
 - Lightbox using mootools and pathfusion multibox
 - Interaction with HTML FORM
 - Super elastic effect to design high impact web menu
 - Nice vertical menu with motion and opacity effect
 - Toggle effect using Scriptaculous
 - Drag and drop to order list elements with Scriptaculous
 - Simple sort script using Stuart Langridge's sortabejs

Blogger (blogspot):
 - Add delicious button with counter in your blogger posts
 - Add DZone button on Blogger template
 - Add Technorati blog reaction on your Blogger Template
 - Add Yahoo! Buzz button on Blogger Template
 - Add Digg vote button on Blogger Template (update)
 - Place Google AdSense below post's title on Blogger
 - Some Blogger Tips you probably don't know
 
Various:
 - Twitter: send message from a PHP page using Twitter API
 - Parsing Feed RSS to HTML using MagpieRSS and PHP
 - Five optimal online Photo Editors you may try
 - Free tools to create your own social network Facebook-like
 
Fonts:
 - Interesting font for web design



Tags for this post>> | | |




Powered by WordPress