HTML5 : How to start learning HTML5 (easy and fast)

•Transferir como PPTX, PDF•

0 gostou•776 visualizações

Bhathiya Nuwan

How to start learning HTML5 (easy and fast)

Software

Can I see some code please ?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
This is here to say that its HTML5

Things you should know.
HTML5Shiv/HTML5Shim
Respond.js
Modernizer
You should understand what these do, or you will be in trouble. Once you understand what these
are used for you can start using a prebuilt template (like html5-boilerplate).

HTML5Shiv and HTML5Shim
HTML5Shiv == HTML5Shim, It’s the same thing.
The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and
provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.
URL : https://code.google.com/p/html5shiv/

Respond.js
The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to
enable responsive web designs (http://alistapart.com/article/responsive-web-design) in browsers
that don't support CSS3 Media Queries - in particular, Internet Explorer 8 and under.
URL : https://github.com/scottjehl/Respond

Modernizer
It is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
It is a way to stop using browser specific code.
URL : http://modernizr.com/
Modernizer ships with HTML5Shiv. So you don’t need to include both. But you still need Respond.js

Can I start coding now ?
Not yet, It’s better to get a complete template first.
Head on to http://html5boilerplate.com/ or to http://www.initializr.com/ these websites give
you a prebuild or custom-build templates for your new HTML5 project.
 What’s Included here
HTML5Shiv/HTML5Shim or Modernizer
Respond.js
Bootstrap (maybe!)
And some other cool stuff (Apple touch icons).

Tutorials ?
http://www.html5rocks.com/en/ - A cool project by Google.
http://www.webplatform.org/
http://www.w3.org/community/webed/
https://developer.mozilla.org/en-US/docs/Web
http://webdesign.tutsplus.com/
http://tutorialzine.com/
http://msdn.microsoft.com – search for ‘html5’
http://www.awwwards.com/ (Not a tutorial site but really cool)

Front-end Frameworks (Responsive
CSS3)
http://getbootstrap.com/ - Twitter Bootstrap, http://bootswatch.com/ - Themes
http://foundation.zurb.com/ - Foundation
http://firezenk.github.io/zimit/ - Zimit Framework
http://purecss.io/ - Pure (This one is really small !)
http://ink.sapo.pt/ - INK

JavaScript MV* frameworks (For Web
Applications)
http://www.angularjs.org/ - AngularJS (by Google)
http://canjs.com/ - CanJS
http://backbonejs.org/ - Backbone.js
http://emberjs.com/ - Ember.js
http://todomvc.com/ - This website will help you select a suitable framework.
This is not HTML5 or CSS3 but will come in handy when you want to build a HTML5 web
application.

Mais conteúdo relacionado

Mais procurados

Node.js exception handlingMinh Hoang

Real solutions, no tricksJens Grochtdreis

Six reasons to learn JavaScriptOtto Kekäläinen

Building an open source python application the right wayKiran Gangadharan

Selenium Clinic Eurostar 2012 WebDriver TutorialAlan Richardson

High Performance JavaScript (CapitolJS 2011)Nicholas Zakas

Automating Software Releases (Dallas/Ft. Worth Perl Mongers 2004)brian d foy

SpecFlow and some things I've picked upMarcus Hammarberg

Java script hello worldsanket kulkarni

Introduction to Javascript - College LectureZac Gordon

Resisting The Feature CreatureChristian Heilmann

Testdarkrai1947

11 tips for HTML5Bart De Waele

Google guiceDiego Pacheco

Mais procurados (14)

Node.js exception handling

Real solutions, no tricks

Six reasons to learn JavaScript

Building an open source python application the right way

Selenium Clinic Eurostar 2012 WebDriver Tutorial

High Performance JavaScript (CapitolJS 2011)

Automating Software Releases (Dallas/Ft. Worth Perl Mongers 2004)

SpecFlow and some things I've picked up

Java script hello world

Introduction to Javascript - College Lecture

Resisting The Feature Creature

Test

11 tips for HTML5

Google guice

Semelhante a HTML5 : How to start learning HTML5 (easy and fast)

Sitepoint.com a basic-html5_templateDaniel Downs

Web development todayJaydev Gajera

INTRODUCTIONS OF HTMLSURYANARAYANBISWAL1

Fundamentals of HTML5St. Petersburg College

HTML5 and Joomla! 2.5 TemplateMarvelic Engine Co., Ltd.

WordPress Theme Design - Rich Media Institute WorkshopBrendan Sera-Shriar

Building for real standards (includes notes)Christian Heilmann

WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentEvan Mullins

Html5 tutorialHarikaReddy115

Shifting GearsChristian Heilmann

Essential Javascript -- A Javascript <b>Tutorial</b>tutorialsruby

Essential_Javascript_--_A_Javascript_Tutorialtutorialsruby

<img src="../i/r_14.png" />tutorialsruby

Essential_Javascript_--_A_Javascript_Tutorialtutorialsruby

HTML5: An IntroductionClearPivot

Wa html5-pdfrcobos_fireworks

Wa html5-pdfOlivier Eeckhoutte

Wa html5-pdfSelvaraj V

Wa html5-pdfMassoudmAlShareef

[In Control 2010] HTML5Christopher Schmitt

Semelhante a HTML5 : How to start learning HTML5 (easy and fast) (20)

Sitepoint.com a basic-html5_template

Web development today

INTRODUCTIONS OF HTML

Fundamentals of HTML5

HTML5 and Joomla! 2.5 Template

WordPress Theme Design - Rich Media Institute Workshop

Building for real standards (includes notes)

WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development

Html5 tutorial

Shifting Gears

Essential Javascript -- A Javascript <b>Tutorial</b>

Essential_Javascript_--_A_Javascript_Tutorial

Essential_Javascript_--_A_Javascript_Tutorial

HTML5: An Introduction

Wa html5-pdf

[In Control 2010] HTML5

Último

Call Us🔝>༒+91-9711147426⇛Call In girls karol bagh (Delhi)jennyeacort

Salesforce Implementation Services PPT By ABSYZABSYZ Inc

Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...confluent

VK Business Profile - provides IT solutions and Web Developmentvyaparkranti

Unveiling the Future: Sylius 2.0 New FeaturesŁukasz Chruściel

SensoDat: Simulation-based Sensor Dataset of Self-driving CarsChristian Birchler

Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...Natan Silnitsky

Introduction Computer Science - Software Design.pdfFerryKemperman

SpotFlow: Tracking Method Calls and States at Runtimeandrehoraa

How To Manage Restaurant Staff -BTRESTROmotivationalword821

Precise and Complete Requirements? An Elusive GoalLionel Briand

Folding Cheat Sheet #4 - fourth in a seriesPhilip Schwarz

Unveiling Design Patterns: A Visual Guide with UML DiagramsAhmed Mohamed

CRM Contender Series: HubSpot vs. SalesforceBrainSell Technologies

Intelligent Home Wi-Fi Solutions | ThinkPalmSujith Sukumaran

UI5ers live - Custom Controls wrapping 3rd-party libs.pptxAndreas Kunz

Post Quantum Cryptography – The Impact on Identityteam-WIBU

Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...Cizo Technology Services

Implementing Zero Trust strategy with AzureDinusha Kumarasiri

What is Advanced Excel and what are some best practices for designing and cre...Technogeeks

HTML5 : How to start learning HTML5 (easy and fast)

1. How to start learning HTML5 (easy and fast) By Bhathiya perera

2. Can I see some code please ? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body> Content of the document...... </body> </html> This is here to say that its HTML5

3. Things you should know. HTML5Shiv/HTML5Shim Respond.js Modernizer You should understand what these do, or you will be in trouble. Once you understand what these are used for you can start using a prebuilt template (like html5-boilerplate).

4. HTML5Shiv and HTML5Shim HTML5Shiv == HTML5Shim, It’s the same thing. The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x. URL : https://code.google.com/p/html5shiv/

5. Respond.js The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs (http://alistapart.com/article/responsive-web-design) in browsers that don't support CSS3 Media Queries - in particular, Internet Explorer 8 and under. URL : https://github.com/scottjehl/Respond

6. Modernizer It is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. It is a way to stop using browser specific code. URL : http://modernizr.com/ Modernizer ships with HTML5Shiv. So you don’t need to include both. But you still need Respond.js

7. Can I start coding now ? Not yet, It’s better to get a complete template first. Head on to http://html5boilerplate.com/ or to http://www.initializr.com/ these websites give you a prebuild or custom-build templates for your new HTML5 project.  What’s Included here HTML5Shiv/HTML5Shim or Modernizer Respond.js Bootstrap (maybe!) And some other cool stuff (Apple touch icons).

8. Tutorials ? http://www.html5rocks.com/en/ - A cool project by Google. http://www.webplatform.org/ http://www.w3.org/community/webed/ https://developer.mozilla.org/en-US/docs/Web http://webdesign.tutsplus.com/ http://tutorialzine.com/ http://msdn.microsoft.com – search for ‘html5’ http://www.awwwards.com/ (Not a tutorial site but really cool)

9. Front-end Frameworks (Responsive CSS3) http://getbootstrap.com/ - Twitter Bootstrap, http://bootswatch.com/ - Themes http://foundation.zurb.com/ - Foundation http://firezenk.github.io/zimit/ - Zimit Framework http://purecss.io/ - Pure (This one is really small !) http://ink.sapo.pt/ - INK

10. JavaScript MV* frameworks (For Web Applications) http://www.angularjs.org/ - AngularJS (by Google) http://canjs.com/ - CanJS http://backbonejs.org/ - Backbone.js http://emberjs.com/ - Ember.js http://todomvc.com/ - This website will help you select a suitable framework. This is not HTML5 or CSS3 but will come in handy when you want to build a HTML5 web application.

HTML5 : How to start learning HTML5 (easy and fast)

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (14)

Semelhante a HTML5 : How to start learning HTML5 (easy and fast)

Semelhante a HTML5 : How to start learning HTML5 (easy and fast) (20)

Último

Último (20)

HTML5 : How to start learning HTML5 (easy and fast)