More Related Content
What's hot
What's hot (20)
Similar to Intro to Front-End Web Devlopment
Similar to Intro to Front-End Web Devlopment (20)
Recently uploaded
Recently uploaded (20)
Intro to Front-End Web Devlopment
- 1. Intro to Front-end Web Development
- 2. Overview • Web Fonts • HTML5 • CSS3 • Mobile
- 3. Web Fonts: History • Traditional, common web fonts – Arial – Helvetica – Georgia – Times New Roman – Verdana – Lucida Grande
- 4. Web Fonts: History • What about other, nicer, fancier fonts? – Font foundries and legal issues – Workarounds • Text/image replacement • sIFR • @font-face • Web font services
- 5. Web Font Services Several others…
- 6. HTML5: What is it? • The next step in the evolution of HTML • Not a new language • WHATWG and W3C – Apple, Mozilla, Firefox…
- 7. HTML5: What’s new? • First, the old:
- 8. HTML5: What’s new? OLD: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> NEW: <!DOCTYPE html>
- 9. HTML5: What’s new? OLD: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> NEW: <meta charset=UTF-8">
- 10. HTML5: What’s new? OLD: <script language="JavaScript" src="file.js" type="text/javascript"></script> NEW: <script src="file.js"></script>
- 11. HTML5: What’s new? OLD: <link rel="stylesheet" href="styles.css" type="text/css" media="screen"> NEW: <link rel="stylesheet" href="styles.css">
- 12. HTML5: What’s new? • APIs – Build offline web apps (offline storage) • https://www.minutes.io/ – Drag and drop – Page visibility – Many more that are over my head… • http://www.html5rocks.com/en/features/nuts_and_ bolts
- 13. HTML5: What’s new? • Semantics and Structure <header> IE 8 and below do not like these new tags. <footer> Use ‘shim’ to force support: <section> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/ <article> trunk/html5.js"></script> <![endif]--> <aside> <nav> <audio> <video>
- 14. HTML5: Resources • caniuse.com • html5please.com • html5rocks.com • html5boilerplate.com • coding.smashingmagazine.com/tag/html5/ • Dissect your favorite sites to see how they’re using these techniques – Firebug extension for Firefox
- 15. CSS3: What’s new? • A lot! – css3please.com – leaverou.github.com/animatable/ – movethewebforward.org
- 16. CSS3 (and HTML5) : Support • Varies wildly between browsers html5please.com • Can use ‘polyfills’ and ‘shims’ to force HTML5 and CSS3 support or fallbacks, but understand the drawbacks – modernizr.com – yepnopejs.com – css3pie.com – selectivizr.com – github.com/scottjehl/Respond
- 17. Mobile • Responsive Web Design – Media Queries • http://mediaqueri.es/ • jQuery Mobile – http://jquerymobile.com/ • Recommended reading: – Mobile First by Luke Wroblewski – Responsive Web Design by Ethan Marcotte
- 18. Follow the Leaders • Google these Web Design Superstars. Follow their blogs, Twitter feeds, etc. – Luke Wroblewski – Ethan Marcotte – Dan Cedarholm – Jeremy Keith – Jeffrey Zeldman – Elliot Jay Stocks – Cameron Moll – Jonathan Snook