Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Intro to Front-End Web Devlopment

•Download as PPTX, PDF•
•
D
damonras

This document provides an overview of introductory front-end web development topics including web fonts, HTML5, CSS3, and mobile development. It discusses the history of web fonts and font services, what's new in HTML5 like semantic elements and APIs, an introduction to CSS3 features, considerations for mobile and responsive design using media queries and frameworks like jQuery Mobile, and recommends following leaders in the field.

1 of 18
Intro to Front-end Web Development
Overview • Web Fonts • HTML5 • CSS3 • Mobile
Web Fonts: History • Traditional, common web fonts – Arial – Helvetica – Georgia – Times New Roman – Verdana – Lucida Grande
Web Fonts: History • What about other, nicer, fancier fonts? – Font foundries and legal issues – Workarounds • Text/image replacement • sIFR • @font-face • Web font services
Web Font Services Several others…
HTML5: What is it? • The next step in the evolution of HTML • Not a new language • WHATWG and W3C – Apple, Mozilla, Firefox…
HTML5: What’s new? • First, the old:
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>
HTML5: What’s new? OLD: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> NEW: <meta charset=UTF-8">
HTML5: What’s new? OLD: <script language="JavaScript" src="file.js" type="text/javascript"></script> NEW: <script src="file.js"></script>
HTML5: What’s new? OLD: <link rel="stylesheet" href="styles.css" type="text/css" media="screen"> NEW: <link rel="stylesheet" href="styles.css">
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
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>
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
CSS3: What’s new? • A lot! – css3please.com – leaverou.github.com/animatable/ – movethewebforward.org
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
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
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

More Related Content

Intro to Front-End Web Devlopment

  • 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