HTML elementary

<div>

AMERICAN LAND Written by Bruce Springsteen Tonight we want to add our voices to the thousands of Americans who are protesting at airports around the country the Muslim Ban and the detention of foreign nationals and refugees. America is a nation of immigrants and we find this anti-democratic and fundamentally un-American. —Bruce Springsteen, Adelaide, Australia, 30 January 2017

AMERICAN LAND Written by Bruce Springsteen Tonight we want to add our voices to the thousands of Americans who are protesting at airports around the country the Muslim Ban and the detention of foreign nationals and refugees. America is a nation of immigrants and we find this anti-democratic and fundamentally un-American. —Bruce Springsteen, Adelaide, Australia, 30 January 2017 The McNicholas, the Posalskis, the Smiths, Zerillis, too The Blacks, the Irish, Italians, the Germans and the Jews Come across the water a thousand miles from home With nothing in their bellies but the fire down below They died building the railroads worked to bones and skin They died in the fields and factories names scattered in the wind They died to get here a hundred years ago they’re still dying now The hands that built the country we’re always trying to keep out

<div class=main> <div> AMERICAN LAND </div> <div class=credits> Written by Bruce Springsteen </div> <div class=quote> Tonight we want to add our voices to the thousands of Americans who are protesting at airports around the country the Muslim Ban and the detention of foreign nationals and refugees. America is a nation of immigrants and we find this anti-democratic and fundamentally un-American. <div class=quote-credits> —Bruce Springsteen, Adelaide, Australia, 30 January 2017 </div> </div> <div class=verse> The McNicholas, the Posalskis, the Smiths, Zerillis, too <br/> The Blacks, the Irish, Italians, the Germans and the Jews <br/> Come across the water a thousand miles from home <br/> With nothing in their bellies but the fire down below </div> <div class=verse> </div> They died building the railroads worked to bones and skin <br/> They died in the fields and factories names scattered in the wind<br/> They died to get here a hundred years ago they’re still dying now<br/> The hands that built the country we’re always trying to keep out </div>

✘

<div class=main> <h1> AMERICAN LAND </h1> <div class=credits> Written by Bruce Springsteen </div> <div class=quote> Tonight we want to add our voices to the thousands of Americans who are protesting at airports around the country the Muslim Ban and the detention of foreign nationals and refugees. America is a nation of immigrants and we find this anti-democratic and fundamentally un-American. <div class=quote-credits> —Bruce Springsteen, Adelaide, Australia, 30 January 2017 </div> </div> <div class=verse> The McNicholas, the Posalskis, the Smiths, Zerillis, too <br/> The Blacks, the Irish, Italians, the Germans and the Jews <br/> Come across the water a thousand miles from home <br/> With nothing in their bellies but the fire down below </div> <div class=verse> </div> They died building the railroads worked to bones and skin <br/> They died in the fields and factories names scattered in the wind<br/> They died to get here a hundred years ago they’re still dying now<br/> The hands that built the country we’re always trying to keep out </div>

<div class=main> <h1> American Land </h1> <div class=credits> Written by Bruce Springsteen </div> <div class=quote> Tonight we want to add our voices to the thousands h1 of Americans who are protesting at airports around the country the Muslim Ban and the detention of { foreign nationals and refugees. America is a nation text-transform: uppercase; of immigrants and we find this anti-democratic and } fundamentally un-American. <div class=quote-credits> —Bruce Springsteen, Adelaide, Australia, 30 January 2017 </div> </div> <div class=verse> The McNicholas, the Posalskis, the Smiths, Zerillis, too <br/> The Blacks, the Irish, Italians, the Germans and the Jews <br/> Come across the water a thousand miles from home <br/> With nothing in their bellies but the fire down below </div> <div class=verse> </div> They died building the railroads worked to bones and skin <br/> They died in the fields and factories names scattered in the wind<br/> They died to get here a hundred years ago they’re still dying now<br/> The hands that built the country we’re always trying to keep out </div>

<div class=main> <h1> <header> ✘ American Land </h1> Written by Bruce Springsteen </header> <div class=quote> Tonight we want to add our voices to the thousands of Americans who are protesting at airports around the country Muslim A header typically contains a the group of Ban and the detention of foreign nationals and refugees. America is a nation introductory or navigational aids. of immigrants and we find this anti-democratic and fundamentally un-American. <div class=quote-credits> —Bruce Springsteen, Adelaide, Australia, 30 January 2017 </div> </div> <div class=verse> The McNicholas, the Posalskis, the Smiths, Zerillis, too <br/> The Blacks, the Irish, Italians, the Germans and the Jews <br/> Come across the water a thousand miles from home <br/> With nothing in their bellies but the fire down below </div> <div class=verse> </div> They died building the railroads worked to bones and skin <br/> They died in the fields and factories names scattered in the wind<br/> They died to get here a hundred years ago they’re still dying now<br/> The hands that built the country we’re always trying to keep out </div>

<div class=main> <h1> <footer> American Land </h1> Written by Bruce Springsteen </footer> <div class=quote> Tonight we want to add our voices to the thousands A footer typically contains information of Americans who are protesting at airports around the as country Muslim about its section such whothe wrote it,Ban and the detention of foreign nationals and refugees. America is a nation links to related documents, copyright of immigrants and we find this anti-democratic and data, and the like. fundamentally un-American. <div class=quote-credits> —Bruce Springsteen, Adelaide, Australia, 30 January 2017 </div> </div> <div class=verse> The McNicholas, the Posalskis, the Smiths, Zerillis, too <br/> The Blacks, the Irish, Italians, the Germans and the Jews <br/> Come across the water a thousand miles from home <br/> With nothing in their bellies but the fire down below </div> <div class=verse> </div> They died building the railroads worked to bones and skin <br/> They died in the fields and factories names scattered in the wind<br/> They died to get here a hundred years ago they’re still dying now<br/> The hands that built the country we’re always trying to keep out </div>

<div class=main> <h1> <footer> <blockquote> American Land </h1> Written by Bruce Springsteen </footer> Tonight we want to add our voices to the thousands of Americans who are protesting at airports around the country the Muslim Ban and the detention of foreign nationals and refugees. America is a nation of immigrants and we find this anti-democratic and fundamentally un-American. <div class=quote-credits> —Bruce Springsteen, Adelaide, Australia, 30 January 2017 </div> </blockquote> <div class=verse> The McNicholas, the Posalskis, the Smiths, Zerillis, too <br/> The Blacks, the Irish, Italians, the Germans and the Jews <br/> Come across the water a thousand miles from home <br/> With nothing in their bellies but the fire down below </div> <div class=verse> </div> They died building the railroads worked to bones and skin <br/> They died in the fields and factories names scattered in the wind<br/> They died to get here a hundred years ago they’re still dying now<br/> The hands that built the country we’re always trying to keep out </div>

<div class=main> <h1> <footer> <blockquote> <footer> </blockquote> <div class=verse> <div class=verse> </div> American Land </h1> Written by Bruce Springsteen </footer> Tonight we want to add our voices to the thousands of Americans who are protesting at airports around the country the Muslim Ban and the detention of foreign nationals and refugees. America is a nation of immigrants and we find this anti-democratic and fundamentally un-American. —Bruce Springsteen, Adelaide, Australia, 30 January 2017 The McNicholas, the Posalskis, the Smiths, Zerillis, too The Blacks, the Irish, Italians, the Germans and the Jews Come across the water a thousand miles from home With nothing in their bellies but the fire down below </footer> <br/> <br/> <br/> </div> They died building the railroads worked to bones and skin <br/> They died in the fields and factories names scattered in the wind<br/> They died to get here a hundred years ago they’re still dying now<br/> The hands that built the country we’re always trying to keep out </div>

<div class=main> <h1> <footer> <blockquote> <footer><cite> </blockquote> <div class=verse> <div class=verse> </div> American Land </h1> Written by Bruce Springsteen </footer> Tonight we want to add our voices to the thousands of Americans who are protesting at airports around the country the Muslim Ban and the detention of foreign nationals and refugees. America is a nation of immigrants and we find this anti-democratic and fundamentally un-American. —Bruce Springsteen, Adelaide, Australia, 30 January 2017 The McNicholas, the Posalskis, the Smiths, Zerillis, too The Blacks, the Irish, Italians, the Germans and the Jews Come across the water a thousand miles from home With nothing in their bellies but the fire down below </cite></footer> <br/> <br/> <br/> </div> They died building the railroads worked to bones and skin <br/> They died in the fields and factories names scattered in the wind<br/> They died to get here a hundred years ago they’re still dying now<br/> The hands that built the country we’re always trying to keep out </div>

<div class=main> <h1> <footer> <blockquote> <footer><cite> </blockquote> <p> <p> </div> American Land </h1> Written by Bruce Springsteen </footer> Tonight we want to add our voices to the thousands of Americans who are protesting at airports around the country the Muslim Ban and the detention of foreign nationals and refugees. America is a nation of immigrants and we find this anti-democratic and fundamentally un-American. —Bruce Springsteen, Adelaide, Australia, 30 January 2017 The McNicholas, the Posalskis, the Smiths, Zerillis, too The Blacks, the Irish, Italians, the Germans and the Jews Come across the water a thousand miles from home With nothing in their bellies but the fire down below </cite></footer> <br/> <br/> <br/> </p> They died building the railroads worked to bones and skin <br/> They died in the fields and factories names scattered in the wind<br/> They died to get here a hundred years ago they’re still dying now<br/> The hands that built the country we’re always trying to keep out </p>

<main> <h1> <footer> <blockquote> <footer><cite> </blockquote> <p> <p> </main> American Land </h1> Written by Bruce Springsteen </footer> Tonight we want to add our voices to the thousands of Americans who are protesting at airports around the country the Muslim Ban and the detention of foreign nationals and refugees. America is a nation of immigrants and we find this anti-democratic and fundamentally un-American. —Bruce Springsteen, Adelaide, Australia, 30 January 2017 The McNicholas, the Posalskis, the Smiths, Zerillis, too The Blacks, the Irish, Italians, the Germans and the Jews Come across the water a thousand miles from home With nothing in their bellies but the fire down below </cite></footer> <br/> <br/> <br/> </p> They died building the railroads worked to bones and skin <br/> They died in the fields and factories names scattered in the wind<br/> They died to get here a hundred years ago they’re still dying now<br/> The hands that built the country we’re always trying to keep out </p>

<main> <h1> <footer> <aside> <blockquote> American Land </h1> Written by Bruce Springsteen </footer> Tonight we want to add our voices to the thousands of Americans who are protesting at airports around the country the Muslim Ban and the detention of foreign nationals and refugees. America is a nation of immigrants and we find this anti-democratic and fundamentally un-American. <footer><cite> —Bruce Springsteen, Adelaide, Australia, 30 January 2017 </cite></footer> </blockquote> </aside> <p> The McNicholas, the Posalskis, the Smiths, Zerillis, too <br/> The Blacks, the Irish, Italians, the Germans and the Jews <br/> Come across the water a thousand miles from home <br/> With nothing in their bellies but the fire down below </p> <p> </main> They died building the railroads worked to bones and skin <br/> They died in the fields and factories names scattered in the wind<br/> They died to get here a hundred years ago they’re still dying now<br/> The hands that built the country we’re always trying to keep out </p>

<main> <h1> <footer> <aside> <blockquote> American Land </h1> Written by Bruce Springsteen </footer> Tonight we want to add our voices to the thousands of Americans who are protesting at airports around the country the Muslim Ban and the detention of foreign nationals and refugees. America is a nation of immigrants and we find this anti-democratic and fundamentally un-American. <footer><cite> —Bruce Springsteen, Adelaide, Australia, 30 January 2017 </cite></footer> </blockquote> </aside> <div> The McNicholas, the Posalskis, the Smiths, Zerillis, too <br/> <p> The Blacks, the Irish, Italians, the Germans and the Jews <br/> Come across the water a thousand miles from home <br/> With nothing in their bellies but the fire down below </p> <p> </div> </main> They died building the railroads worked to bones and skin <br/> They died in the fields and factories names scattered in the wind<br/> They died to get here a hundred years ago they’re still dying now<br/> The hands that built the country we’re always trying to keep out </p>

http://img.youtube.com/vi/vqeVGnWwnxM/maxresdefault.jpg

http://codepen.io/gunnarbittersmann/pen/QdmZQQ

http://codepen.io/gunnarbittersmann/pen/GrQVEV http://codepen.io/gunnarbittersmann/pen/RKyjGV

http://codepen.io/gunnarbittersmann/pen/OWxYBq

Custom Elements

<table> <caption>Bruce Springsteen’s studio albums</caption> <thead> <tr> <th>title</th> <th>release date</th> </tr> </thead> <tbody> <tr> <td>Greetings from Asbury Park, N.J.</td> <td> <time>1973-01-05</time> </td> </tr>

<table sortable> <caption>Bruce Springsteen’s studio albums</caption> <thead> <tr> <th>title</th> <th sorted>release date</th> </tr> </thead> <tbody> <tr> <td>Greetings from Asbury Park, N.J.</td> <td> <time>1973-01-05</time> </td> </tr> ▼

<table sortable> ✘ ✘ ✘ ✘ ✘

✘ <x-sortable-table> <caption>Bruce Springsteen’s studio albums</caption> <thead> <tr> <th>title</th> <th sorted>release date</th> </tr> </thead> <tbody> <tr> <td>Greetings from Asbury Park, N.J.</td> <td> <time>1973-01-05</time> </td> </tr> ▼

<table is=”x-sortable-table”> <caption>Bruce Springsteen’s studio albums</caption> <thead> <tr> <th>title</th> <th sorted>release date</th> </tr> </thead> <tbody> <tr> <td>Greetings from Asbury Park, N.J.</td> <td> <time>1973-01-05</time> </td> </tr> ▼

var XSortableTableElementPrototype = Object.create(HTMLTableElement.prototype); var XSortableTableElement = document.registerElement(‘x-sortable-table’, { prototype: XSortableTableElementPrototype, extends: ‘table’ });

http://codepen.io/gunnarbittersmann/pen/XXwZpP

https://www.etsy.com/de/shop/jessman5Stuff

There’s a common misconception that progressive enhancement means that you’ll spend your time dealing with older browsers, but in fact the opposite is true. Putting the basic functionality into place doesn’t take very long at all. And once you’ve done that, you’re free to spend all your time experimenting with the latest and greatest browser technologies, secure in the knowledge that even if they aren’t universally supported yet, that’s okay: you’ve already got your fallback in place. —Jeremy Keith

The key to thinking about web development this way is realising that there isn’t one final interface— there could be many, slightly different interfaces depending on the properties and capabilities of any particular user agent at any particular moment. And that’s okay. Websites do not need to look the same in every browser. —Jeremy Keith

Once you truly accept that, it’s an immensely liberating idea. Instead of spending your time trying to make websites look the same in wildly varying browsers, you can spend your time making sure that the core functionality of what you’re building works everywhere, while providing the best possible experience for more capable browsers. —Jeremy Keith

An escalator can never break, it can only become stairs. You would never see an “Escalator Temporarily Out Of Order” sign, just “Escalator Temporarily Stairs. Sorry for the convenience. We apologize for the fact that you can still get up there.” —Mitch Hedberg

progressive enhancement

HTML elementary

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41