At the MADLab we have compiled several basic reference links for those who are just getting started with HTML5 (responsive design). Click through to the full post to see the list. We are compiling ever more links for all major mobile platforms, so please share your favourite tutorials, references and developer blogs with mad.lab@utoronto.ca!
HTML5 Basics
http://www.w3schools.com/html/html5_intro.asp
It’s one of the most popular websites for learning any popular programming language. w3schools.com provides basic – but detailed – tutorials on HTML5/CSS3. All aspects of HTML5/CSS3 programming are covered, from Canvas, Audio, Drag/Drop to Forms, App Cache and more. The site includes examples in each chapter and even a Try-It-Yourself Editor: Type in code and click to see the result immediately. It’s especially helpful for people who have little experience with HTML5 coding.
In a similar tutoring style, http://www.w3.org/standards/webdesign/htmlcss is also a good place to begin learning HTML5.
This post is full of essential tips and techniques for HTML5.
net.tutsplus.com also has lots of tutorials available on a variety of topics, however the content of tutorials is not as basic as of w3schools – previous experience with HTML5 might be helpful.
http://www.html5rocks.com/en/tutorials/?page=1
This page provides tutorials on HTML5, sometimes in an article format. A plus for this website is the amount of sample code and screenshots.
Dive Into HTML5 by Mark Pilgrim (online version available at http://diveintohtml5.info/)
This is a great book on HTML5 programming, covering main aspects/features in great details. Easy to understand and not too ‘technical’, this book has clearly divided sections and also pictures/cartoons to make learning fun. Lots of sample code provided.
CSS3
http://coding.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/
Introduces some of the latest and coolest features that CSS3 can offer, including border-radius, border-image, box-shadow, @font-face, etc. These features have not been released as a final specification but web designers can start using them to design innovative and amazing websites.
http://www.css3.info/
Covers everything you need to know about CSS3, from news, status of CSS3 modules, to brief tutorials on different CSS3 features. Examples are provided in each tutorial.
http://www.1stwebdesigner.com/css/45-useful-css3-tutorials-and-techniques/
47 tutorials on different cool techniques of CSS3 that could make your website look amazing. Demos are provided.
http://v1.jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work
A brilliant article on the new @font-face feature of CSS3 and how to make it work on Internet Explorer.
http://www.w3.org/International/articles/css3-text/
Assuming basic understanding of CSS, this article gives a general idea of what lies in the future with regard to CSS support for non-Latin text. These new features have not been finalized.
http://dev.opera.com/articles/view/css-text-shadows-and-background-sizing/
An article on CSS3’s new features text-shadow and background-size.
FRAMEWORKS
HTML5 FRAMEWORKS FOR MOBILE WEB APPLICATION:
http://www.gajotres.net/top-7-mobile-application-html5-frameworks/
http://blog.mobpartner.com/2013/06/24/top5-html5-frameworks-web-apps/
These pages list the best and most popular frameworks for building HTML5 mobile web applications with details about pros and cons for each. Most frameworks are available for free use. The lists include:
- jQuery Mobile
- Kendo UI
- Titanium
- Sencha Touch
- Intel App Framework – ex jQMoby
- Zepto.js
- jQTouch
- DaVinci Studio, WINK, and more
http://webdesign.tutsplus.com/tutorials/complete-websites/twitter-bootstrap-101-introduction/
“Twitter’s Bootstrap is an excellent set of carefully crafted user interface elements, layouts, and JavaScript tools, freely available to use in your next web design project. This video series aims to introduce you to Bootstrap; taking you all the way from downloading the resources, to building a complete Bootstrap-based website.”
JAVASCRIPT RESOURCES
http://www.codecademy.com/tracks/javascript
Code Academy is a great place to start learning JavaScript (as well as other languages), as it provides basic tutorials. Similarly to w3schools, on Code Academy learners can practice scripting right on the page and check their answers. It is easy for learners to keep track of how many exercises/topics they have covered and badges or points are rewarded after certain stages (e.g. after completing 5 exercises).
Professional JavaScript for Web Developers by Nicholas C. Zakas (electronic version available here for U of T students http://search.library.utoronto.ca/details?8229533)
This book provides a thorough guide to JavaScript.
“Besides covering the JavaScript language, it also gives you a good handle on using JavaScript in the browser.”- http://net.tutsplus.com/tutorials/javascript-ajax/the-best-way-to-learn-javascript/
It is recommended to be read after you have gained some basic experience with JS from Code Academy.
JavaScript 24-hour Trainer by Jeremy McPeak (http://search.library.utoronto.ca/details?7400530)
“This awesome resource was put together by Jeremy McPeak, who writes for Nettuts+ as well. It’s not just a book: it comes with over 4 hours of video tutorials on DVD. There are 43 lessons, covering everything from syntax to coding guidelines and code optimization.” -http://net.tutsplus.com/tutorials/javascript-ajax/the-best-way-to-learn-javascript/
MOBILE APP IDEAS
http://blog.hubspot.com/blog/tabid/6307/bid/30056/10-Innovative-Ideas-for-B2B-Mobile-Apps.aspx
This page provides a list of 10 general ideas for people who are interested in making B2B Mobile Apps, including Event Apps, Networking Apps and many more.
http://www.animhut.com/articles/other-topics/ideas-to-develop-killer-mobile-apps/
Some advice on how to develop a great mobile app.
http://mashable.com/2012/03/28/mobile-app-development-advice/
This article gives you some advice on how to avoid common pitfalls when developing a mobile app.
https://www.scoutzie.com/blog/how-to-design-a-mobile-app
A step-by-step guide to developing a good mobile app.
And don’t forget
UofT offers courses covering web and mobile app design – find the right course for you at:
http://coursefinder.utoronto.ca
https://mobile.utoronto.ca/explore/courses