Wednesday, November 9, 2011

TSG HTML5 Class Part 3

Today's our talk is focusing on CSS3, and here is the slide we have used in the class.



Readings
For those of you who wants a brush up on your css, you can take a look of this site -  http://www.htmldog.com/guides/cssbeginner/ , they have beginner, intermediate and advance level topics on html and css.

Samples
Here are some samples we've used in the class, feel free to change anything you want

Note
Some people asked how come in chrome and firefox the animation is reversed?
That's because of the vendor prefix, I hope you all remembered.  You can make different browser use different css3 by using the vendor prefix.
  • -moz-    (firefox)
  • -webkit- (chrome)
  • -o- (opera)
  • ... etc
We have introduced another tool yesterday, it is http://jsfiddle.net/ , it is similar to cssdesk, but it will let you do javascript also and it is a good tool for developer to write testing code and play around with stuff.

There is a good link Edward has mentioned, take your time to take a brief look even though it's a little bit lengthy - http://html5center.sourceforge.net/building-apps-in-html5

Next Tuesday is our field trip to Linkedin, no class next week.
How to Make Your JavaScript Fast ( Linkedin Campus )
http://www.meetup.com/SF-Web-Performance-Group/events/37966322/


Homework! Homework!
Since we have quite a long time in between until the next class, and thus I have changed my mind and assign you some homework.

Your homework is - without using the cssdesk, try to create a simple page from scratch using HTML and CSS.  You can do whatever you want with only one limitation, your css must be less than 150 lines of code.

Feel free to ask any questions in the email thread or through the blog. Thanks and enjoy :)

No comments:

Post a Comment