View source for Web Development - Websites

[[Main Page]] >> [[Web Development resources]] >> Web Development - Websites

Here is a list of useful web resources on the topic of web development. Don’t hesitate to contact me if you spot any broken links, or if you can think of resources worth adding.

[mailto:alix.bergeret@wlv.ac.uk Alix Bergeret]

==General==

*[http://docs.webplatform.org/wiki/beginners Web development for beginners] This set of articles is for complete beginners to work through in confidence, building up their essential skills at the beginning of the journey to becoming a web designer or developer.
*[http://www.webplatform.org/ WebPlatform Docs] We are an open community of developers building resources for a better web, regardless of brand, browser or platform. Anyone can contribute and each person who does makes us stronger. Together we can continue to drive innovation on the Web to serve the greater good. It starts here, with you.

==PHP==

===General===

*[http://www.php.net/manual/en/ PHP manual]
*[http://phpbuddy.com/ PHPbuddy.com] This site is designed to help you learn PHP programming
*[http://www.netmagazine.com/tutorials/get-started-php Get started with PHP]

===PHP Frameworks===

*[http://codeigniter.com/ CodeIgniter] CodeIgniter is a powerful PHP framework with a very small footprint, built for PHP coders who need a simple and elegant toolkit to create full-featured web applications.
*[http://www.yiiframework.com/ Yii] Yii is a high-performance PHP framework best for developing Web 2.0 applications.
*[http://cakephp.org/ CakePHP] CakePHP makes building web applications simpler, faster and require less code.
*[http://symfony.com/ Symfony] Symfony is a PHP framework for web projects.
*[http://www.akelos.org/ Akelos PHP Framework] The pragmatic way to get Productive on PHP
*[http://framework.zend.com/ Zend Framework] - based on simplicity, object-oriented best practices, corporate friendly licensing, and a rigorously tested agile codebase.

==JavaScript==

===General===

*[http://www.w3schools.com/js/default.asp W3Schools JavaScript page]
*[http://www.learningjquery.com/ Learning jQuery] Tips, techniques, and tutorials for the jQuery JavaScript library
*[http://jqueryfordesigners.com/ jQuery for Designers] Learn how easy it is to apply web interaction using jQuery

=== JavaScript libraries ===

*[http://processingjs.org/ Processing.js] Processing.js is the sister project of the popular Processing visual programming language, designed for the web.
*[http://www.createjs.com/#!/EaselJS EaselJS] A Javascript library that makes working with the HTML5 Canvas element easy.
*[http://raphaeljs.com/ Raphaël] Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web.
*[http://www.kineticjs.com/ KineticJS] KineticJS is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling high performance event detection for desktop and mobile applications.

===JavaScript Frameworks===

*[http://jquery.com/ jQuery] is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
*[http://jqueryui.com/ jQuery UI] provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library
*[http://www.prototypejs.org/ Prototype] is a JavaScript Framework that aims to ease development of dynamic web applications.
*[http://mootools.net/ MooTools] is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. 
*[http://knockoutjs.com/ Knockout] Simplify dynamic JavaScript UIs by applying the Model-View-View Model (MVVM) pattern
*[http://twitter.github.com/bootstrap/index.html Bootstrap, from Twitter] Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.
*[http://angularjs.org/ AngularJS - by Google] Lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

===Tutorials===
*[http://www.netmagazine.com/tutorials/getting-most-out-jquery-selectors Getting the most out of jQuery selectors]
*[http://www.netmagazine.com/tutorials/create-jquery-tab-system Create a jQuery tab system]
*[http://www.netmagazine.com/tutorials/create-image-slideshow-mootools Create an image slideshow with MooTools]

==HTML5==

===General===

*[http://www.w3schools.com/html5/default.asp W3Schools HTML5 page]
*[http://html5doctor.com/ HTML5 Doctor]
*[http://html5boilerplate.com/ HTML5 Boilerplate]
*[http://html5please.com/ HTML5 Please] Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.
*[http://www.netmagazine.com/features/developer-s-guide-html5-apis The developer's guide to the HTML5 APIs]

===Canvas===

*[http://www.netmagazine.com/tutorials/learning-basics-html5-canvas Learning the basics of HTML5 canvas]
*[http://www.netmagazine.com/tutorials/create-page-flip-effect-html5-canvas Create a page flip effect with HTML5 canvas]
*[http://www.netmagazine.com/tutorials/create-whirling-timer-html5-canvas-and-prototypejs Create a whirling timer with HTML5 canvas and Prototype.js]

===Web Sockets===
*[http://www.netmagazine.com/tutorials/code-real-time-survey-html5-websockets Code a real-time survey with HTML5 WebSockets]

===Geolocation===
*[http://www.netmagazine.com/tutorials/getting-started-html5-geolocation Getting started with HTML5 geolocation]

===Drag-and-Drop===
*[http://www.html5rocks.com/en/tutorials/dnd/basics/ A tutorial]

==CSS==

===General===

*[http://www.w3schools.com/css/ W3Schools CSS page]
*[http://www.cssplay.co.uk/ CSS play] Experiments with Cascading Style Sheets
*[http://css3generator.com/ CSS3 Generator]
*[http://css3maker.com/  CSS3 Maker]

===CSS frameworks===

*[http://www.blueprintcss.org/ Blueprint] Blueprint is a CSS framework, which aims to cut down on your development time.
*[http://yuilibrary.com/yui/docs/cssgrids/ CSS Grids] The foundational CSS Grids provides a simple system for laying out content.
*[http://960.gs/ The 960 Grid System] is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.
*[http://978.gs/ The 978 Grid System]
*[http://lessframework.com/ Less Framework 4] is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.
*[http://www.getskeleton.com/ Skeleton] is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.
*[http://cssgrid.net/ The 1140 grid] fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.
*[http://twitter.github.com/bootstrap/index.html Bootstrap, from Twitter] Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.
*[http://foundation.zurb.com/ Foundation 3] "The most advanced responsive front-end framework in the world."
===Tutorials===

*[http://www.netmagazine.com/tutorials/create-progressively-enhanced-3d-css-rollovers Create progressively enhanced 3D CSS rollovers]
*[http://www.netmagazine.com/tutorials/chain-css-animations-together-javascript Chain CSS animations together with JavaScript]
*[http://www.netmagazine.com/tutorials/take-advantage-css-background-size-property Take advantage of the CSS background-size property]
*[http://www.netmagazine.com/tutorials/build-rotating-3d-carousel-css Build a rotating 3D carousel with CSS]
*[http://www.netmagazine.com/tutorials/master-css-gradients Master CSS gradients]
*[http://www.netmagazine.com/tutorials/create-diagonal-rotation-css-transitions Create a diagonal rotation with CSS transitions and jQuery]
*[http://www.netmagazine.com/tutorials/masterclass-css-animations A masterclass in CSS animations]

==Mobile==

=== General ===

*[http://validator.w3.org/mobile/ W3C mobileOK Checker] This checker performs various tests on a Web Page to determine its level of mobile-friendliness.
*[http://mobiforge.com/ mobiForge] - the world's largest independent mobile development community

=== Mobile frameworks===

*[http://jquerymobile.com/ jQuery Mobile] Touch-Optimized Web Framework for Smartphones & Tablets
*[http://www.winktoolkit.org/ Wink Toolkit] is a lightweight JavaScript toolkit which will help you build great mobile web apps.
*[http://www.jqtouch.com/ jqTouch] A jQuery plugin for mobile web development on the iPhone, Android, iPod Touch, and other forward-thinking devices.
*[http://www.sencha.com/ Sencha Touch] is a high-performance, mobile HTML5 application framework. 
*[http://www.phonegap.com/ PhoneGap] Easily create apps with the only free open source framework that supports 7 mobile platforms.

=== Tutorials ===

*[http://www.netmagazine.com/tutorials/create-mobile-website-jquery-mobile Create a mobile website with jQuery Mobile]
*[http://www.netmagazine.com/tutorials/build-login-form-your-mobile-app-dhtmlx-touch Build a login form for your mobile app with DHTMLX Touch]

==APIs==

*[http://www.netmagazine.com/tutorials/integrate-google-maps-and-flickr-real-time-app Create a custom-themed, real-time Google Maps application]
*[http://www.netmagazine.com/tutorials/discover-facebook-s-developer-tools Discover Facebook’s developer tools]
*[http://www.netmagazine.com/tutorials/create-beautiful-data-visualisations-svg-google-charts-api Create beautiful data visualisations with the SVG Google Charts API]