├── .gitignore ├── fundamentals ├── codelabs │ └── your-first-multi-screen-site │ │ ├── OPcx1E5O.png │ │ ├── addcontent.html │ │ ├── addform.html │ │ ├── addheadline.html │ │ ├── addimages.html │ │ ├── addstructure.html │ │ ├── addtable.html │ │ ├── addvideo.html │ │ ├── alterpadding.html │ │ ├── chriswilson.png │ │ ├── constrainwidth.html │ │ ├── content-with-styles.html │ │ ├── content-without-styles.html │ │ ├── firstbreakpoint.html │ │ ├── fixingfirstbreakpoint.html │ │ ├── floattheform.html │ │ ├── floatthevideo.html │ │ ├── helloworld.html │ │ ├── hero.jpg │ │ ├── instructors.png │ │ ├── mattgaunt.jpg │ │ ├── peterlubbers.png │ │ ├── seanbennett.png │ │ ├── tiletheimages.html │ │ ├── udacity.png │ │ ├── updatingtablehtml.html │ │ ├── viewport.html │ │ └── withform.html ├── design-and-ux │ ├── animations │ │ ├── box-move-custom-curve.html │ │ ├── box-move-ease-in-out.html │ │ ├── box-move-ease-in.html │ │ ├── box-move-ease-out.html │ │ ├── box-move-elastic.html │ │ ├── box-move-js.html │ │ ├── box-move-keyframes.html │ │ ├── box-move-linear.html │ │ ├── box-move-quintic-ease-out.html │ │ ├── box-move-simple.html │ │ ├── box-move-wa.html │ │ ├── curve-playground.html │ │ ├── inter-view-animation.html │ │ └── modal-view-animation.html │ ├── input │ │ ├── forms │ │ │ ├── order.html │ │ │ └── rac.html │ │ └── touch │ │ │ ├── forced-states-example.html │ │ │ ├── states-example.html │ │ │ ├── touch-demo-1.html │ │ │ ├── touch-demo-2.html │ │ │ └── user-select-example.html │ └── responsive │ │ ├── 100.png │ │ ├── 1000.png │ │ ├── 1100.png │ │ ├── 1200.png │ │ ├── 1400.png │ │ ├── 1600.png │ │ ├── 1800.png │ │ ├── 200.png │ │ ├── 2000.png │ │ ├── 300.png │ │ ├── 400.png │ │ ├── 500.png │ │ ├── 600.png │ │ ├── 700.png │ │ ├── 800.png │ │ ├── 900.png │ │ ├── ada_lovelace-300-q90.jpg │ │ ├── ada_lovelace-600-q30.jpg │ │ ├── body.png │ │ ├── breakpoints.html │ │ ├── checker.png │ │ ├── chrome-subtitles-en.vtt │ │ ├── cloudy.png │ │ ├── column-drop.html │ │ ├── compressive.html │ │ ├── conditional-mq.html │ │ ├── credit.svg │ │ ├── fragment.html │ │ ├── fullscreen.html │ │ ├── head-2x.jpg │ │ ├── head-fb-2x.jpg │ │ ├── head-fb.jpg │ │ ├── head-small-2x.jpg │ │ ├── head-small.jpg │ │ ├── head.jpg │ │ ├── icon-font.html │ │ ├── icon-svg.html │ │ ├── icon1x.png │ │ ├── icon2x.png │ │ ├── image-set.html │ │ ├── image-sprite.html │ │ ├── landscape.css │ │ ├── large-2x.png │ │ ├── large.png │ │ ├── layout-shifter.html │ │ ├── layouts-common.css │ │ ├── lighthouse-100.jpg │ │ ├── lighthouse-1000.jpg │ │ ├── lighthouse-1400.jpg │ │ ├── lighthouse-1800.jpg │ │ ├── lighthouse-200.jpg │ │ ├── lighthouse-400.jpg │ │ ├── lighthouse-800.jpg │ │ ├── margins.css │ │ ├── max-640px.css │ │ ├── media-queries.html │ │ ├── media-query-dppx.html │ │ ├── media.html │ │ ├── min-640px.css │ │ ├── mostly-fluid.html │ │ ├── notype.html │ │ ├── off-canvas.html │ │ ├── partly_cloudy.png │ │ ├── portrait.css │ │ ├── poster.jpg │ │ ├── rain.png │ │ ├── rain_s_cloudy.png │ │ ├── reading.html │ │ ├── scripted.html │ │ ├── sizes.html │ │ ├── small-2x.png │ │ ├── small.png │ │ ├── sprite-sheet.png │ │ ├── sunny.png │ │ ├── thunderstorms.png │ │ ├── tiny-tweaks.html │ │ ├── unyt.html │ │ ├── vp-fixed.html │ │ ├── vp-no.html │ │ ├── vp.html │ │ ├── vpdemo.css │ │ ├── weather-1.css │ │ ├── weather-1.html │ │ ├── weather-2-large.css │ │ ├── weather-2-small.css │ │ ├── weather-2.html │ │ ├── weather-large.css │ │ ├── weather-small.css │ │ ├── weather.css │ │ └── weather.html ├── discovery │ └── social-discovery │ │ ├── social-sites.html │ │ └── social-sites2.html ├── media │ ├── mobile-web-video-playback.css │ ├── mobile-web-video-playback.html │ ├── mobile-web-video-playback.js │ ├── responsive_embed.html │ ├── tiny-fullscreen-shim.js │ ├── track.html │ └── video-main.html ├── native-hardware │ └── device-orientation │ │ ├── dev-orientation.html │ │ ├── html5-logo.svg │ │ └── jump-test.html ├── performance │ ├── critical-rendering-path │ │ ├── analysis_with_css.html │ │ ├── analysis_with_css_js.html │ │ ├── analysis_with_css_js_async.html │ │ ├── analysis_with_css_nb_js_async.html │ │ ├── app.js │ │ ├── awesome-photo.jpg │ │ ├── basic_dom.html │ │ ├── basic_dom_nostyle.html │ │ ├── measure_crp.html │ │ ├── measure_crp_async.html │ │ ├── measure_crp_inlined.html │ │ ├── measure_crp_timing.html │ │ ├── nested.html │ │ ├── script.html │ │ ├── split_script.html │ │ ├── split_script_async.html │ │ ├── split_script_print.html │ │ ├── style.css │ │ └── timing.js │ └── optimizing-content-efficiency │ │ ├── minified.html │ │ └── minify.html ├── primers │ ├── async-all-example.html │ ├── async-best-example.html │ ├── async-example.html │ ├── async-generators-example.html │ ├── chapter-1.json │ ├── chapter-2.json │ ├── chapter-3.json │ ├── chapter-4.json │ ├── chapter-5.json │ ├── promise-2.0.4.min.js │ ├── story.json │ ├── styles.css │ ├── sync-example.html │ └── utils.js └── security │ └── prevent-mixed-content │ ├── active-mixed-content.html │ ├── image-gallery-example.html │ ├── passive-mixed-content.html │ ├── puppy-thumb.jpg │ ├── puppy.jpg │ ├── simple-example.html │ ├── simple-example.js │ ├── sleep.mp3 │ ├── style.css │ ├── xmlhttprequest-data.js │ └── xmlhttprequest-example.html └── tools └── chrome-devtools ├── beginners └── final.html ├── console └── primes.html └── rendering-tools ├── forcedsync.html └── particle.png /.gitignore: -------------------------------------------------------------------------------- 1 | *~ 2 | *.pyc 3 | *.swp 4 | *.csv 5 | .DS_Store 6 | node_modules/* 7 | -------------------------------------------------------------------------------- /fundamentals/codelabs/your-first-multi-screen-site/OPcx1E5O.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/codelabs/your-first-multi-screen-site/OPcx1E5O.png -------------------------------------------------------------------------------- /fundamentals/codelabs/your-first-multi-screen-site/addform.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CS256: Mobile Web Development - adding content 5 | 6 | 7 | 8 |
9 |
10 |
11 |

Mobile Web Development

12 |

Building Mobile Web Experiences

13 |
14 |
15 |

So you've heard mobile is kind of a big deal, and you're not 16 | sure how to transform your traditional desktop-focused web apps 17 | into fast, effective multi-device experiences.

18 |

This course is designed to teach web developers what 19 | they need to know to create great cross-device web 20 | experiences.

21 |

This course will focus on building mobile-first web apps, 22 | which will work across multiple platforms including:

23 |
    24 |
  • Android, 25 |
  • iOS, 26 |
  • and others. 27 |
28 |
29 | 30 |
31 |

Register for the launch

32 | 33 | 35 | 36 | 38 | 39 | 41 | 42 |
43 | 44 |
45 |
46 |
47 | 48 | 49 | 50 |
51 | 52 |
53 | 54 | 55 | 56 |
57 | 58 |
59 | 60 | 61 | 62 |
63 | 64 |
65 | 66 | 67 | 68 | 71 | 72 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /fundamentals/codelabs/your-first-multi-screen-site/addheadline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CS256: Mobile Web Development - adding content 5 | 6 | 7 | 8 |
9 |
10 |
11 |

Mobile Web Development

12 |

Building Mobile Web Experiences

13 |
14 |
15 |

So you've heard mobile is kind of a big deal, and you're not 16 | sure how to transform your traditional desktop-focused web apps 17 | into fast, effective multi-device experiences.

18 |

This course is designed to teach web developers what 19 | they need to know to create great cross-device web 20 | experiences.

21 |

This course will focus on building mobile-first web apps, 22 | which will work across multiple platforms including:

23 |
    24 |
  • Android,
    • 25 |
  • iOS,
    • 26 |
  • and others.
    • 27 |
28 |
29 |
30 |
31 |
32 |
33 | 34 | 35 | 36 |
37 | 38 |
39 | 40 | 41 | 42 |
43 | 44 |
45 | 46 | 47 | 48 |
49 | 50 |
51 | 52 | 53 | 54 | 57 | 58 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /fundamentals/codelabs/your-first-multi-screen-site/addimages.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CS256: Mobile Web Development - adding images 4 | 5 | 6 | 7 |
8 |
9 |

Mobile Web Development

10 |

Building Mobile Web Experiences

11 |
12 |
13 |

So you’ve heard mobile is kind of a big deal, and you’re not sure how to transform your traditional desktop-focused web apps into fast, effective mobile experiences. This course is designed to teach web developers what they need to know to create great cross-device mobile web experiences. This course will focus on building mobile web apps, which will work across multiple platforms including Android, iOS, and others.

14 |
15 |
16 |

Register for details of the launch

17 | 18 | 20 | 21 | 23 | 24 | 26 | 27 | 29 | 30 |
31 |
32 |
33 | 34 | 35 | 36 |
37 |

What will I learn?

38 |

After completing this class, you'll have built a web application with a first-class mobile experience.

39 |

You'll understand what it takes to:

40 | 45 | 52 |
53 |
54 | 55 | 56 | 57 |
58 |

Who will teach me?

59 |

The world's leading mobile web developers.

60 | 61 |
62 | Chris Wilson: Course Instructor 63 | Peter Lubbers: Course Instructor 64 | Sean Bennet: Course Developer 65 |
66 | 67 |
68 |
69 | 70 | 71 | 72 |
73 | 74 |
75 | 76 | 77 | 78 | 81 | 82 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /fundamentals/codelabs/your-first-multi-screen-site/addstructure.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CS256: Mobile Web development - structure 7 | 8 | 9 |
10 |
11 |

12 |

13 |
14 |
15 |

16 | 19 |
20 |
21 |
22 |
23 |
24 |

25 |

26 | 29 | 30 |
31 |
32 |

33 |

34 |
35 | 36 |
37 |
38 |
39 |

40 |

41 |
42 | 45 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /fundamentals/codelabs/your-first-multi-screen-site/addvideo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CS256: Mobile Web Development - Adding a video 5 | 6 | 7 | 8 |
9 |
10 |

Mobile Web Development

11 |

Building Mobile Web Experiences

12 |
13 |
14 |

So you've heard mobile is kind of a big deal, and you're not sure how to transform your traditional desktop-focused web apps into fast, effective multi-device experiences.

15 |

This course is designed to teach web developers what they need to know to create great cross-device web experiences.

16 |

This course will focus on building mobile-first web apps, which will work across multiple platforms including:

17 | 22 |
23 |
24 |

Register for the launch

25 | 26 | 28 | 29 | 31 | 32 | 34 | 35 |
36 |
37 |
38 | 39 | 40 |
41 |

What will I learn?

42 |

After completing this class, you'll have built a web application with a first-class mobile experience.

43 |

You'll understand what it takes to:

44 | 49 | 50 | 57 | 58 |
59 |
60 | 61 | 62 |
63 | 64 |
65 | 66 | 67 | 68 |
69 | 70 |
71 | 72 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /fundamentals/codelabs/your-first-multi-screen-site/chriswilson.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/codelabs/your-first-multi-screen-site/chriswilson.png -------------------------------------------------------------------------------- /fundamentals/codelabs/your-first-multi-screen-site/helloworld.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | My first page - perfect viewport 7 | 8 | 9 |

My first page

10 |

This is easy

11 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /fundamentals/codelabs/your-first-multi-screen-site/hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/codelabs/your-first-multi-screen-site/hero.jpg -------------------------------------------------------------------------------- /fundamentals/codelabs/your-first-multi-screen-site/instructors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/codelabs/your-first-multi-screen-site/instructors.png -------------------------------------------------------------------------------- /fundamentals/codelabs/your-first-multi-screen-site/mattgaunt.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/codelabs/your-first-multi-screen-site/mattgaunt.jpg -------------------------------------------------------------------------------- /fundamentals/codelabs/your-first-multi-screen-site/peterlubbers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/codelabs/your-first-multi-screen-site/peterlubbers.png -------------------------------------------------------------------------------- /fundamentals/codelabs/your-first-multi-screen-site/seanbennett.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/codelabs/your-first-multi-screen-site/seanbennett.png -------------------------------------------------------------------------------- /fundamentals/codelabs/your-first-multi-screen-site/udacity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/codelabs/your-first-multi-screen-site/udacity.png -------------------------------------------------------------------------------- /fundamentals/codelabs/your-first-multi-screen-site/viewport.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | My first page 9 | 10 | 11 |

My first page

12 |

This is easy

13 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/animations/box-move-custom-curve.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Simple Box Move 8 | 37 | 38 | 39 |

Click on the box to animate it

40 |
41 | 42 | 47 | 48 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/animations/box-move-ease-in-out.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Simple Box Move 8 | 38 | 39 | 40 |

Click on the box to animate it

41 |
42 | 48 | 49 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/animations/box-move-ease-in.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Simple Box Move 8 | 38 | 39 | 40 |

Click on the box to animate it

41 |
42 | 43 | 49 | 50 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/animations/box-move-ease-out.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Simple Box Move 8 | 38 | 39 | 40 |

Click on the box to animate it

41 |
42 | 43 | 49 | 50 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/animations/box-move-elastic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Simple Box Move 8 | 40 | 41 | 42 |
43 | 44 |
45 |
46 | 47 | 48 | 63 | 64 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/animations/box-move-js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Simple Box Move 8 | 23 | 24 | 25 |
26 | 27 | 58 | 59 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/animations/box-move-keyframes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Simple Box Move 8 | 154 | 155 | 156 |
157 | 158 | 166 | 167 | 168 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/animations/box-move-linear.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Simple Box Move 8 | 38 | 39 | 40 |

Click on the box to animate it

41 |
42 | 43 | 49 | 50 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/animations/box-move-quintic-ease-out.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Simple Box Move 8 | 38 | 39 | 40 |

Click on the box to animate it

41 |
42 | 43 | 49 | 50 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/animations/box-move-simple.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Simple Box Move 8 | 39 | 40 | 41 |

Click on the box to animate it

42 |
43 | 44 | 50 | 51 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/animations/box-move-wa.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Box Move with Web Animations API 8 | 20 | 21 | 22 | 23 | 24 | 25 |

Click on the box to animate it

26 |
27 | 28 | 45 | 46 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/input/touch/forced-states-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Forced Button States 7 | 8 | 9 | 10 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/input/touch/states-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | States Example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 114 | 115 | 130 | 131 | 132 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/input/touch/user-select-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | user-select Example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 101 | 102 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/100.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/1000.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/1000.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/1100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/1100.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/1200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/1200.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/1400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/1400.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/1600.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/1600.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/1800.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/1800.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/200.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/2000.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/2000.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/300.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/400.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/500.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/500.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/600.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/600.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/700.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/700.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/800.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/800.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/900.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/ada_lovelace-300-q90.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/ada_lovelace-300-q90.jpg -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/ada_lovelace-600-q30.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/ada_lovelace-600-q30.jpg -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/body.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/body.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/breakpoints.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | Images: Breakpoints in sizes attribute for srcset 16 | 17 | 34 | 35 | 36 | 37 |
38 |

Using breakpoints in the <picture> element

39 |

40 | Note: this sample uses the 41 | picturefill polyfill to provide backwards compatibility for browsers 42 | that do not support the <picture> element. 43 |

44 |
45 | 46 | an example image 50 | 51 |
52 |

Viewport widths 0 to 499px:

53 | 56 |

Viewport widths 500px to 599px:

57 | 60 |

Viewport widths 600px and over:

61 | 64 |
65 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/checker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/checker.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/chrome-subtitles-en.vtt: -------------------------------------------------------------------------------- 1 | WEBVTT 2 | 3 | NOTE 4 | This is just an example file to demonstrate adding a track. 5 | It is used as a captions track so is visible in the sample, 6 | but is really a description track. 7 | 8 | 00:00.000 --> 00:04.000 9 | Man sitting on a tree branch, using a laptop. 10 | 11 | 00:05.000 --> 00:08.000 12 | The branch breaks, and he starts to fall. 13 | 14 | 00:09.000 --> 00:10.000 15 | Opens Chrome. 16 | 17 | 00:11.000 --> 00:13.000 18 | Goes to shopping site and orders a hammock. 19 | 20 | 00:16.000 --> 00:18.000 21 | Continues falling... 22 | 23 | 00:19.000 --> 00:20.500 24 | He falls into the hammock, already delivered and set up! 25 | 26 | 00:20.500 --> 00:22.000 27 | Delivery man smiles. 28 | 29 | 00:22.500 --> 00:26.000 30 | Open a new browser. Chrome fast. 31 | 32 | 00:26.500 --> 00:29.500 33 | Man using laptop in hammock. 34 | White butterfly flutters past, furry brown mole pops up. 35 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/cloudy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/cloudy.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/column-drop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 56 | Responsive Web Design Pattern: Column Drop 57 | 58 | 59 |
60 |
61 |
62 |
63 |
64 | 79 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/compressive.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | Images: Compressive Image Technique Comparison 16 | 31 | 32 | 33 |
34 |
35 |

1x Image

36 | 37 | 38 | 39 |
40 | 1x image (300×300px) @ quality 90
41 | File size 88kB 42 |
43 |
44 |
45 |

2x Image

46 | 47 | 48 | 49 |
50 | 2x image (600×600px) @ quality 30
51 | File size 47kB 52 |
53 |
54 |
55 | 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/conditional-mq.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | Images: Using media queries for conditional loading 16 | 41 | 42 | 43 |
44 |
45 | On viewports less than 500px, only the image of a phone will appear, 46 | while on viewports larger than 500px, a tablet will be visible with 47 | a checkboard background. 48 |
49 | 64 | 76 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/credit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/fragment.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | Video: Specifying a start and end time with media fragments 16 | 28 | 29 | 30 |
31 |

Video: Specifying a start and end time with media fragments

32 | 33 | 38 | 39 | 40 | 47 | 48 | 49 | 72 |
73 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/fullscreen.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | Video: Using the full screen API 16 | 28 | 29 | 30 |
31 |

Video: Using the full screen API

32 | 37 | 38 | 39 | 40 | 41 | 42 | 49 | 50 | 51 | 107 |
108 | 123 | 124 | 125 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/head-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/head-2x.jpg -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/head-fb-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/head-fb-2x.jpg -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/head-fb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/head-fb.jpg -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/head-small-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/head-small-2x.jpg -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/head-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/head-small.jpg -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/head.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/head.jpg -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/icon1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/icon1x.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/icon2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/icon2x.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/image-set.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | Images: Using CSS image-set to provide high res images 16 | 33 | 34 | 35 |
36 |
37 | On a 1x display, a monochrome 128x128px icon will be shown.
38 | On a 2x display, a color 256x256px icon will be shown. 39 |
40 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/image-sprite.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | Images: Reducing http requests with sprite sheets 16 | 44 | 45 | 46 |
47 |

Sprite Sheet Sample

48 |

49 | 50 |

51 |

52 | The Google logo 53 |

54 |

55 | The GMail logo 56 |

57 |

58 | The Google Maps logo 59 |

60 |
61 | 76 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/landscape.css: -------------------------------------------------------------------------------- 1 | .orientation:after { 2 | content: " Landscape"; 3 | } -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/large-2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/large-2x.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/large.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/layout-shifter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 44 | Responsive Web Design Pattern: Layout Shifter 45 | 46 | 47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 | 69 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/layouts-common.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | } 4 | 5 | .container { 6 | margin: 0; 7 | padding: 0; 8 | width: 100%; 9 | } 10 | 11 | .container div { 12 | box-sizing: border-box; 13 | min-height: 150px; 14 | min-width: 150px; 15 | } 16 | 17 | .c1 { 18 | color: #ddd; 19 | background-color: #003476; 20 | } 21 | 22 | .c2 { 23 | color: #ddd; 24 | background-color: #0062d2; 25 | } 26 | 27 | .c3 { 28 | color: #333; 29 | background-color: #b4d2f7; 30 | } 31 | 32 | .c4 { 33 | color: #333; 34 | background-color: #d5dfef; 35 | } 36 | 37 | .c5 { 38 | color: #333; 39 | background-color: #dfe1e5; 40 | } 41 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/lighthouse-100.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/lighthouse-100.jpg -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/lighthouse-1000.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/lighthouse-1000.jpg -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/lighthouse-1400.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/lighthouse-1400.jpg -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/lighthouse-1800.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/lighthouse-1800.jpg -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/lighthouse-200.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/lighthouse-200.jpg -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/lighthouse-400.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/lighthouse-400.jpg -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/lighthouse-800.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/lighthouse-800.jpg -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/margins.css: -------------------------------------------------------------------------------- 1 | p { 2 | margin-top: 1rem; 3 | margin-bottom: inherit; 4 | } 5 | li { 6 | list-style: initial; 7 | list-style-position: inside; 8 | } 9 | body[role=main] { 10 | margin: 0; 11 | padding: 0; 12 | } 13 | .add_margin { 14 | margin: 0 1rem; 15 | padding: 0.25rem; 16 | } -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/max-640px.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: red; 3 | } 4 | 5 | .desc:before { 6 | content: "This browser window is smaller than 640px wide."; 7 | } 8 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/media-queries.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 32 | 33 | RWD Fundamentals: Experimenting with media queries 34 | 35 | 36 |
37 |

Media Queries

38 | 39 |

40 | 41 |

Orientation:

42 | 43 |

44 | This is a test to show how the media queries 45 | affects a page. 46 |

47 | 48 |
49 | 64 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/media-query-dppx.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | Images: Using media queries for high res images 16 | 34 | 35 | 36 |
37 |
38 | On a 1x display, a monochrome 128x128px icon will be shown.
39 | On a 2x display, a color 256x256px icon will be shown. 40 |
41 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/media.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | Images: Picture element with media attributes in source 16 | 17 | 42 | 43 | 44 |

The <picture> element

45 |

46 | Note: this sample uses the 47 | picturefill polyfill to provide backwards compatibility for browsers 48 | that do not support the <picture> element. 49 |

50 | 51 | 52 | 53 | 54 | a head carved out of wood 55 | 56 | 57 |

Viewport widths 0 to 449px:

58 | 66 |

Viewport widths 450px to 799px:

67 | 71 |

Viewport widths 800px and over:

72 | 76 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/min-640px.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: blue; 3 | } 4 | 5 | .desc:before { 6 | content: "This browser window is at least 640px wide!"; 7 | } 8 | 9 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/mostly-fluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 55 | Responsive Web Design Pattern: Mostly Fluid 56 | 57 | 58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 | 85 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/notype.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | Video: Specifying multiple non-typed video source files 16 | 28 | 29 | 30 |
31 |

Video: Specifying multiple non-typed video source files

32 | 37 | 38 | 45 | 46 | 47 | 72 |
73 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/partly_cloudy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/partly_cloudy.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/portrait.css: -------------------------------------------------------------------------------- 1 | .orientation:after { 2 | content: " Portrait"; 3 | } -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/poster.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/poster.jpg -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/rain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/rain.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/rain_s_cloudy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/rain_s_cloudy.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/scripted.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | Video: Scripting and adjusting playspeed of videos 16 | 28 | 29 | 30 |
31 |

Video: Scripting and adjusting playspeed of videos

32 | 37 | 38 | 39 | 40 | 44 | 45 | 52 | 53 | 54 | 108 |
109 | 124 | 125 | 126 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/sizes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | Images: srcset and the sizes attribute 16 | 17 | 18 | 19 | 20 |
21 |

Specifying sizes for the <picture> element

22 |

23 | Note: this sample uses the 24 | picturefill polyfill to provide backwards compatibility for browsers 25 | that do not support the <picture> element. 26 |

27 |
28 | 29 | a lighthouse 34 | 35 |

The image should always be 50% of the viewport width and show at 36 | the correct pixel density. 37 |

38 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/small-2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/small-2x.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/small.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/sprite-sheet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/sprite-sheet.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/sunny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/sunny.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/thunderstorms.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/design-and-ux/responsive/thunderstorms.png -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/tiny-tweaks.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 32 | Responsive Web Design Pattern: Tiny Tweaks 33 | 34 | 35 |
36 |
37 |

38 | Bacon ipsum dolor sit amet pancetta salami beef ribs ribeye ham. Ribeye 39 | strip steak boudin t-bone chuck tri-tip kielbasa sirloin frankfurter 40 | shankle ball tip ham short loin hamburger pork chop. Doner jowl tail, 41 | shoulder chicken beef ribs ribeye leberkas. Tongue corned beef fatback 42 | turkey pork chop bacon. Pork meatloaf andouille doner. Swine biltong ham 43 | pork chop tongue, shankle shank sausage jowl landjaeger bresaola boudin 44 | pork. Porchetta shank beef tongue cow, pork flank shankle rump pig. 45 |

46 | 47 |

48 | Ground round shankle tongue chicken kevin fatback pancetta boudin strip 49 | steak doner shank drumstick pork loin ball tip short ribs. Kevin rump 50 | chicken ribeye salami tail andouille. Tenderloin shoulder drumstick 51 | biltong jowl short ribs capicola. Ham hock pastrami spare ribs tail 52 | doner frankfurter. 53 |

54 | 55 |

56 | Pancetta ground round hamburger, tenderloin tail porchetta filet mignon 57 | prosciutto bacon. Prosciutto rump spare ribs boudin meatloaf doner flank 58 | chuck. Prosciutto leberkas ground round, sirloin tail flank filet mignon 59 | spare ribs ham turducken jowl swine pork loin shankle. Tri-tip rump doner 60 | andouille tail, bacon ham jerky. Rump shank pastrami, sausage brisket 61 | chicken ribeye frankfurter andouille pork chop pork pancetta. Jowl 62 | tongue filet mignon jerky, prosciutto strip steak pastrami rump. 63 |

64 |
65 |
66 | 81 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/unyt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Video: Embedded YouTube video (non-responsive) 11 | 12 | 13 |
14 |

Embedded YouTube video (non-responsive)

15 | 16 | 17 |
18 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/vp-fixed.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | 16 | 21 | RWD Fundamentals: Viewport (3 - "width=device-width, initial-scale=1" with fixed with element) 22 | 23 | 24 |
25 |

Fixed width element

26 | 27 |

28 | This is a test to show what happens when using fixed width on 29 | an element. The width of this element is set to 344px. 30 |

31 | 32 |

33 | This page DOES have the meta 34 | viewport set. 35 |

36 | 37 |

38 | Note: each box on the background is 50px wide. 39 |

40 |
41 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/vp-no.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | RWD Fundamentals: Viewport (1 - not set) 7 | 8 | 9 |
10 |

viewport not set

11 | 12 |

13 | This page does NOT have the meta 14 | viewport set. 15 |

16 | 17 |

18 | This is a test to show how the meta viewport tag 19 | affects a page. To simplify this example as much as possible, 20 | font boosting has been disabled. 21 |

22 | 23 |

24 | Note: each box on the background is 50px wide. 25 |

26 |
27 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/vp.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | 16 | RWD Fundamentals: Viewport (2 - "width=device-width, initial-scale=1") 17 | 18 | 19 |
20 |

viewport set

21 | 22 |

23 | This page DOES have the meta 24 | viewport set. 25 |

26 | 27 |

28 | This is a test to show how the meta viewport tag 29 | affects a page. To simplify this example as much as possible, 30 | font boosting has been disabled. 31 |

32 | 33 |

34 | Note: each box on the background is 50px wide. 35 |

36 |
37 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/vpdemo.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | /* Disable font boosting */ 4 | max-height: 1000000px; 5 | -webkit-text-size-adjust: 100%; 6 | -moz-text-size-adjust: none; 7 | -ms-text-size-adjust: none; 8 | } 9 | 10 | body { 11 | background-image: url('checker.png'); 12 | } 13 | 14 | article { 15 | width: 100%; 16 | color: #ccc; 17 | background-color: rgba(0, 0, 0, 0.9); 18 | padding: 10px; 19 | border-radius: 4px; 20 | } 21 | 22 | b { 23 | color: #fff; 24 | } -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/weather-1.css: -------------------------------------------------------------------------------- 1 | * { 2 | -moz-box-sizing: border-box; 3 | box-sizing: border-box; 4 | -webkit-font-smoothing: antialiased; 5 | } 6 | 7 | body { 8 | font-family: Roboto, Arial; 9 | font-size: 0.8em; 10 | color: #666; 11 | overflow-y: hidden; 12 | } 13 | 14 | .icon { 15 | background-repeat: no-repeat; 16 | display: inline-block; 17 | margin-left: auto; 18 | margin-right: auto; 19 | background-size: contain; 20 | } 21 | 22 | .icon.rain { 23 | background-image: url('rain.png'); 24 | } 25 | 26 | .icon.sunny { 27 | background-image: url('sunny.png'); 28 | } 29 | 30 | .icon.pc { 31 | background-image: url('partly_cloudy.png'); 32 | } 33 | 34 | .icon.sshowers { 35 | background-image: url('rain_s_cloudy.png'); 36 | } 37 | 38 | .icon.cloudy { 39 | background-image: url('cloudy.png'); 40 | } 41 | 42 | .icon.thunder { 43 | background-image: url('thunderstorms.png'); 44 | } 45 | 46 | .weather-forecast { 47 | width: 100%; 48 | padding: 10px 10px 0 10px; 49 | display: inline-block; 50 | } 51 | 52 | /* Header row */ 53 | 54 | .location { 55 | font-size: 3em; 56 | color: #444; 57 | } 58 | 59 | /* Current Weather Summary */ 60 | .current { 61 | overflow: auto; 62 | width:100%; 63 | margin-bottom: 15px; 64 | } 65 | 66 | .current .visual { 67 | width: 50%; 68 | float: left; 69 | } 70 | 71 | .current .description { 72 | width: 50%; 73 | float: left; 74 | } 75 | 76 | /* Current Weather - Visual */ 77 | 78 | .visual .icon { 79 | width: 64px; 80 | height: 64px; 81 | } 82 | 83 | .temp { 84 | font-size: 2.5em; 85 | display: inline-block; 86 | vertical-align: top; 87 | } 88 | 89 | .scale { 90 | vertical-align: top; 91 | display: inline-block; 92 | margin-top: 6px; 93 | color: #888; 94 | } 95 | 96 | /* General Labels */ 97 | 98 | .wind:before { 99 | content: "Wind: "; 100 | color: #888; 101 | } 102 | 103 | .precip:before { 104 | content: "Precipitation: "; 105 | color: #888; 106 | } 107 | 108 | .humidity:before { 109 | content: "Humidity: "; 110 | color: #888; 111 | } 112 | 113 | .pollen:before { 114 | content: "Pollen Count: "; 115 | color: #888; 116 | } 117 | 118 | .pcount:before { 119 | content: "Pollen "; 120 | color: #888; 121 | } 122 | 123 | 124 | /* Seven Day Forecast */ 125 | 126 | .seven-day div { 127 | vertical-align: middle; 128 | } 129 | 130 | .seven-day-fc { 131 | border-top: 1px solid rgba(0,0,0,0.2); 132 | margin: 0 -11px -1px -11px; 133 | padding: 10px; 134 | } 135 | 136 | .seven-day-fc:last-of-type { 137 | border-bottom: 1px solid rgba(0,0,0,0.2); 138 | } 139 | 140 | .seven-day-fc div { 141 | display: inline-block; 142 | } 143 | 144 | .seven-day-fc .date { 145 | font-weight: bold; 146 | color: #444; 147 | width: 30%; 148 | } 149 | 150 | .seven-day-fc .icon { 151 | width: 50px; 152 | height: 50px; 153 | } 154 | 155 | .seven-day-fc .seven-day-temp { 156 | text-align: center; 157 | width: 30%; 158 | } 159 | 160 | .seven-day-fc .temp-high { 161 | color: #444; 162 | 163 | } 164 | 165 | .seven-day-fc .temp-low { 166 | color: #888; 167 | } 168 | 169 | .seven-day-fc .temp-low, 170 | .seven-day-fc .temp-high { 171 | display: block; 172 | } 173 | 174 | .seven-day-fc .pcount { 175 | text-align: center; 176 | width: 16%; 177 | } 178 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/weather-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | RWD Fundamentals: Weather (1 - non-responsive mobile) 9 | 10 | 11 |
12 |
New York, NY
13 |
Tuesday, April 15th
14 |
Overcast
15 |
16 |
17 |
18 |
58
19 |
°F
20 |
21 |
22 |
100%
23 |
97%
24 |
4 mph SW
25 |
36
26 |
27 |
28 |
29 |
30 |
Today
31 |
32 |
33 |
68°
34 |
36°
35 |
36 |
36
37 |
38 |
39 |
Wednesday
40 |
41 |
42 |
50°
43 |
39°
44 |
45 |
36
46 |
47 |
48 |
Thursday
49 |
50 |
51 |
55°
52 |
39°
53 |
54 |
36
55 |
56 |
57 |
Friday
58 |
59 |
60 |
54°
61 |
43°
62 |
63 |
36
64 |
65 |
66 |
Saturday
67 |
68 |
69 |
64°
70 |
46°
71 |
72 |
36
73 |
74 |
75 |
Sunday
76 |
77 |
78 |
64°
79 |
50°
80 |
81 |
36
82 |
83 |
84 |
Monday
85 |
86 |
87 |
61°
88 |
50°
89 |
90 |
36
91 |
92 |
93 |
94 | 109 | 110 | 111 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/weather-2-large.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | font-size: 1.0em; 4 | } 5 | 6 | .weather-forecast { 7 | width: 100%; 8 | box-shadow: 0 1px 4px rgba(0,0,0,0.2); 9 | } 10 | 11 | 12 | .seven-day-fc { 13 | display: inline-block; 14 | width: 13.5%; 15 | margin: 0; 16 | border: none; 17 | font-size: 0.8em; 18 | } 19 | 20 | .seven-day-fc div { 21 | display: block; 22 | text-align: center; 23 | } 24 | 25 | .seven-day-fc .date { 26 | text-align: center; 27 | } 28 | 29 | .seven-day-fc .temp-low, 30 | .seven-day-fc .temp-high { 31 | display: inline; 32 | } 33 | 34 | .seven-day-fc .seven-day-temp { 35 | font-size: 1.25em; 36 | } 37 | 38 | .seven-day-fc .icon { 39 | width: 64px; 40 | height: 64px; 41 | } 42 | 43 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/weather-2-small.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .weather-forecast { 4 | width: 100%; 5 | } 6 | 7 | .seven-day-fc { 8 | border-top: 1px solid rgba(0,0,0,0.2); 9 | } 10 | 11 | .seven-day-fc:last-of-type { 12 | border-bottom: 1px solid rgba(0,0,0,0.2); 13 | } 14 | 15 | .seven-day-fc .date { 16 | width: 30%; 17 | } 18 | 19 | .seven-day-fc .seven-day-temp { 20 | width: 30%; 21 | } 22 | 23 | .seven-day-fc .pcount { 24 | width: 16%; 25 | } 26 | 27 | -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/weather-large.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | font-size: 1.0em; 4 | } 5 | 6 | .weather-forecast { 7 | width: 100%; 8 | box-shadow: 0 1px 4px rgba(0,0,0,0.2); 9 | } 10 | 11 | 12 | .seven-day-fc { 13 | display: inline-block; 14 | width: 13.5%; 15 | margin: 0; 16 | border: none; 17 | font-size: 0.8em; 18 | } 19 | 20 | .seven-day-fc div { 21 | display: block; 22 | text-align: center; 23 | } 24 | 25 | .seven-day-fc .date { 26 | text-align: center; 27 | } 28 | 29 | .seven-day-fc .temp-low, 30 | .seven-day-fc .temp-high { 31 | display: inline; 32 | } 33 | 34 | .seven-day-fc .seven-day-temp { 35 | font-size: 1.25em; 36 | } 37 | 38 | .seven-day-fc .icon { 39 | width: 64px; 40 | height: 64px; 41 | } 42 | 43 | /* // [START mqsmallbplg] */ 44 | @media (min-width: 700px) { 45 | .weather-forecast { 46 | width: 700px; 47 | } 48 | } 49 | /* // [END mqsmallbplg] */ -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/weather-small.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .weather-forecast { 4 | width: 100%; 5 | } 6 | 7 | .seven-day-fc { 8 | border-top: 1px solid rgba(0,0,0,0.2); 9 | } 10 | 11 | .seven-day-fc:last-of-type { 12 | border-bottom: 1px solid rgba(0,0,0,0.2); 13 | } 14 | 15 | .seven-day-fc .date { 16 | width: 30%; 17 | } 18 | 19 | .seven-day-fc .seven-day-temp { 20 | width: 30%; 21 | } 22 | 23 | .seven-day-fc .pcount { 24 | width: 16%; 25 | } 26 | 27 | 28 | /* // [START mqsmallbpsm] */ 29 | @media (min-width: 360px) { 30 | body { 31 | font-size: 1.0em; 32 | } 33 | } 34 | 35 | @media (min-width: 500px) { 36 | .seven-day-fc .temp-low, 37 | .seven-day-fc .temp-high { 38 | display: inline-block; 39 | width: 45%; 40 | } 41 | 42 | .seven-day-fc .seven-day-temp { 43 | margin-left: 5%; 44 | } 45 | 46 | .seven-day-fc .icon { 47 | width: 64px; 48 | height: 64px; 49 | } 50 | } 51 | /* // [END mqsmallbpsm] */ -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/weather.css: -------------------------------------------------------------------------------- 1 | * { 2 | -moz-box-sizing: border-box; 3 | box-sizing: border-box; 4 | -webkit-font-smoothing: antialiased; 5 | /*border: 1px solid #999;*/ 6 | } 7 | 8 | body { 9 | font-family: Roboto, Arial; 10 | font-size: 0.8em; 11 | color: #666; 12 | overflow-y: hidden; 13 | } 14 | 15 | .icon { 16 | background-repeat: no-repeat; 17 | display: inline-block; 18 | margin-left: auto; 19 | margin-right: auto; 20 | background-size: contain; 21 | } 22 | 23 | .icon.rain { 24 | background-image: url('rain.png'); 25 | } 26 | 27 | .icon.sunny { 28 | background-image: url('sunny.png'); 29 | } 30 | 31 | .icon.pc { 32 | background-image: url('partly_cloudy.png'); 33 | } 34 | 35 | .icon.sshowers { 36 | background-image: url('rain_s_cloudy.png'); 37 | } 38 | 39 | .icon.cloudy { 40 | background-image: url('cloudy.png'); 41 | } 42 | 43 | .icon.thunder { 44 | background-image: url('thunderstorms.png'); 45 | } 46 | 47 | .weather-forecast { 48 | padding: 10px 10px 0 10px; 49 | display: inline-block; 50 | 51 | } 52 | 53 | /* Header row */ 54 | 55 | .location { 56 | font-size: 3em; 57 | color: #444; 58 | } 59 | 60 | .date { 61 | 62 | } 63 | 64 | .desc { 65 | 66 | } 67 | 68 | /* Current Weather Summary */ 69 | .current { 70 | overflow: auto; 71 | width:100%; 72 | margin-bottom: 15px; 73 | } 74 | 75 | .current .visual { 76 | width: 50%; 77 | float: left; 78 | } 79 | 80 | .current .description { 81 | width: 50%; 82 | float: left; 83 | } 84 | 85 | /* Current Weather - Visual */ 86 | 87 | .visual .icon { 88 | width: 64px; 89 | height: 64px; 90 | } 91 | 92 | .temp { 93 | font-size: 2.5em; 94 | display: inline-block; 95 | vertical-align: top; 96 | } 97 | 98 | .scale { 99 | vertical-align: top; 100 | display: inline-block; 101 | margin-top: 6px; 102 | color: #888; 103 | } 104 | 105 | /* General Labels */ 106 | 107 | .wind:before { 108 | content: "Wind: "; 109 | color: #888; 110 | } 111 | 112 | .precip:before { 113 | content: "Precipitation: "; 114 | color: #888; 115 | } 116 | 117 | .humidity:before { 118 | content: "Humidity: "; 119 | color: #888; 120 | } 121 | 122 | .pollen:before { 123 | content: "Pollen Count: "; 124 | color: #888; 125 | } 126 | 127 | .pcount:before { 128 | content: "Pollen "; 129 | color: #888; 130 | } 131 | 132 | 133 | /* Seven Day Forecast */ 134 | 135 | .seven-day div { 136 | vertical-align: middle; 137 | } 138 | 139 | .seven-day-fc { 140 | 141 | margin: 0 -11px -1px -11px; 142 | padding: 10px; 143 | } 144 | 145 | .seven-day-fc div { 146 | display: inline-block; 147 | } 148 | 149 | .seven-day-fc .date { 150 | font-weight: bold; 151 | color: #444; 152 | } 153 | 154 | .seven-day-fc .icon { 155 | width: 50px; 156 | height: 50px; 157 | } 158 | 159 | .seven-day-fc .seven-day-temp { 160 | text-align: center; 161 | } 162 | 163 | .seven-day-fc .temp-high { 164 | color: #444; 165 | 166 | } 167 | 168 | .seven-day-fc .temp-low { 169 | color: #888; 170 | } 171 | 172 | .seven-day-fc .temp-low, 173 | .seven-day-fc .temp-high { 174 | display: block; 175 | } 176 | 177 | .seven-day-fc .pcount { 178 | text-align: center; 179 | } -------------------------------------------------------------------------------- /fundamentals/design-and-ux/responsive/weather.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | RWD Fundamentals: Weather (3 - final) 11 | 12 | 13 |
14 |
New York, NY
15 |
Tuesday, April 15th
16 |
Overcast
17 |
18 |
19 |
20 |
58
21 |
°F
22 |
23 |
24 |
100%
25 |
97%
26 |
4 mph SW
27 |
36
28 |
29 |
30 |
31 |
32 |
Today
33 |
34 |
35 |
68°
36 |
36°
37 |
38 |
36
39 |
40 |
41 |
Wednesday
42 |
43 |
44 |
50°
45 |
39°
46 |
47 |
36
48 |
49 |
50 |
Thursday
51 |
52 |
53 |
55°
54 |
39°
55 |
56 |
36
57 |
58 |
59 |
Friday
60 |
61 |
62 |
54°
63 |
43°
64 |
65 |
36
66 |
67 |
68 |
Saturday
69 |
70 |
71 |
64°
72 |
46°
73 |
74 |
36
75 |
76 |
77 |
Sunday
78 |
79 |
80 |
64°
81 |
50°
82 |
83 |
36
84 |
85 |
86 |
Monday
87 |
88 |
89 |
61°
90 |
50°
91 |
92 |
36
93 |
94 |
95 |
96 | 111 | 123 | 124 | 125 | -------------------------------------------------------------------------------- /fundamentals/discovery/social-discovery/social-sites.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 20 | 22 | 24 | 25 | 26 | 27 | 28 | 29 | Social Site Example 30 | 31 | 32 | 33 | 34 |
35 |

Enjoy fireworks

36 |

Fireworks are beautiful. 37 | This article explains how beautiful fireworks are.

38 | 39 |
40 | 41 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /fundamentals/discovery/social-discovery/social-sites2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Social Site Example 8 | 9 | 10 | 11 | 13 | 14 | 15 | 16 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 27 | 28 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 41 | 42 | 43 | 44 |
45 |

Enjoy fireworks

46 |

Fireworks are beautiful. This article explains how beautiful fireworks are.

47 | 48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /fundamentals/media/responsive_embed.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Responsive Embeds 11 | 32 | 33 | 34 |
35 | 36 |

Responsive Embeds

37 | 38 | 39 |
40 | 43 |
44 | 45 | 46 |
47 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /fundamentals/media/tiny-fullscreen-shim.js: -------------------------------------------------------------------------------- 1 | HTMLElement.prototype.requestFullscreen = HTMLElement.prototype.requestFullscreen || HTMLElement.prototype.webkitRequestFullscreen; 2 | HTMLDocument.prototype.exitFullscreen = HTMLDocument.prototype.exitFullscreen || HTMLDocument.prototype.webkitExitFullscreen; 3 | 4 | if (!('fullscreenElement' in document)) { 5 | Object.defineProperty(document, 'fullscreenElement', { 6 | get: function() { 7 | return document.mozFullScreenElement || document.msFullscreenElement || document.webkitFullscreenElement; 8 | } 9 | }); 10 | } 11 | 12 | for (var prefixedFullscreenChangeEvent of ['webkitfullscreenchange']) { 13 | document.addEventListener(prefixedFullscreenChangeEvent, function(event) { 14 | event.stopPropagation(); 15 | event.stopImmediatePropagation(); 16 | 17 | var fullscreenChange = document.createEvent('Event'); 18 | fullscreenChange.initEvent('fullscreenchange', true /*bubbles */, false /* cancelable */); 19 | event.target.dispatchEvent(fullscreenChange); 20 | }); 21 | } 22 | -------------------------------------------------------------------------------- /fundamentals/media/track.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | Video: Provide captions with the track element 16 | 28 | 29 | 30 |
31 |

Video: Provide captions with the track element

32 | 33 | 40 | 41 | 42 | 43 | 50 | 51 | 52 | 75 |
76 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /fundamentals/media/video-main.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | Video: Specifying multiple typed video source files 16 | 28 | 29 | 30 |
31 |

Video: Specifying multiple typed video source files

32 | 33 | 38 | 39 | 40 | 47 | 48 | 49 | 76 |
77 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /fundamentals/native-hardware/device-orientation/dev-orientation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | Device orientation 16 | 25 | 26 | 27 |
28 |

Device Orientation

29 |

30 | Device orientation is not supported 31 | on your device. 32 |

33 | 34 | 35 | 36 |

Rotation Data

37 |

38 | alpha:
39 | beta:
40 | gamma:
41 |

42 | 43 |

44 | Last updated: 45 |

46 | 47 |
48 | 63 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /fundamentals/native-hardware/device-orientation/html5-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | HTML5 Logo 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /fundamentals/performance/critical-rendering-path/analysis_with_css.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |

Hello web performance students!

10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /fundamentals/performance/critical-rendering-path/analysis_with_css_js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |

Hello web performance students!

10 |
11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /fundamentals/performance/critical-rendering-path/analysis_with_css_js_async.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |

Hello web performance students!

10 |
11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /fundamentals/performance/critical-rendering-path/analysis_with_css_nb_js_async.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |

Hello web performance students!

10 |
11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /fundamentals/performance/critical-rendering-path/app.js: -------------------------------------------------------------------------------- 1 | /* // [START full] */ 2 | var span = document.getElementsByTagName('span')[0]; 3 | span.textContent = 'interactive'; // change DOM text content 4 | span.style.display = 'inline'; // change CSSOM property 5 | // create a new element, style it, and append it to the DOM 6 | var loadTime = document.createElement('div'); 7 | loadTime.textContent = 'You loaded this page on: ' + new Date(); 8 | loadTime.style.color = 'blue'; 9 | document.body.appendChild(loadTime); 10 | /* // [END full] */ 11 | -------------------------------------------------------------------------------- /fundamentals/performance/critical-rendering-path/awesome-photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/performance/critical-rendering-path/awesome-photo.jpg -------------------------------------------------------------------------------- /fundamentals/performance/critical-rendering-path/basic_dom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Critical Path 8 | 9 | 10 |

Hello web performance students!

11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /fundamentals/performance/critical-rendering-path/basic_dom_nostyle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Critical Path: No Style 7 | 8 | 9 |

Hello web performance students!

10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /fundamentals/performance/critical-rendering-path/measure_crp.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Critical Path: Measure 6 | 7 | 8 | 20 | 21 | 22 |

Hello web performance students!

23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /fundamentals/performance/critical-rendering-path/measure_crp_async.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Critical Path: Measure Async 6 | 7 | 8 | 9 | 10 |

Hello web performance students!

11 |
12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /fundamentals/performance/critical-rendering-path/measure_crp_inlined.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Critical Path: Measure Inlined 6 | 7 | 13 | 14 | 15 |

Hello web performance students!

16 |
17 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /fundamentals/performance/critical-rendering-path/measure_crp_timing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Critical Path: Measure Script 6 | 7 | 8 | 9 | 10 |

Hello web performance students!

11 |
12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /fundamentals/performance/critical-rendering-path/nested.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Critial Path: Hello world! 7 | 8 | 9 |
10 |
Hello world!
11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /fundamentals/performance/critical-rendering-path/script.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Critical Path: Script 8 | 9 | 10 |

Hello web performance students!

11 |
12 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /fundamentals/performance/critical-rendering-path/split_script.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Critical Path: Script External 8 | 9 | 10 |

Hello web performance students!

11 |
12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /fundamentals/performance/critical-rendering-path/split_script_async.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Critical Path: Script Async 8 | 9 | 10 |

Hello web performance students!

11 |
12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /fundamentals/performance/critical-rendering-path/split_script_print.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Critical Path: Print Media 8 | 9 | 10 |

Hello web performance students!

11 |
12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /fundamentals/performance/critical-rendering-path/style.css: -------------------------------------------------------------------------------- 1 | /* // [START full] */ 2 | body { font-size: 16px } 3 | p { font-weight: bold } 4 | span { color: red } 5 | p span { display: none } 6 | img { float: right } 7 | /* // [END full] */ -------------------------------------------------------------------------------- /fundamentals/performance/critical-rendering-path/timing.js: -------------------------------------------------------------------------------- 1 | function measureCRP() { 2 | var span = document.getElementsByTagName('span')[0]; 3 | span.textContent = 'interactive'; // Change DOM text content. 4 | span.style.display = 'inline'; // Change CSSOM property. 5 | // Create a new element, style it, and append it to the DOM. 6 | var loadTime = document.createElement('div'); 7 | loadTime.textContent = 'You loaded this page on: ' + new Date(); 8 | loadTime.style.color = 'blue'; 9 | document.body.appendChild(loadTime); 10 | } 11 | -------------------------------------------------------------------------------- /fundamentals/performance/optimizing-content-efficiency/minified.html: -------------------------------------------------------------------------------- 1 | 2 |
…
5 | 6 | -------------------------------------------------------------------------------- /fundamentals/performance/optimizing-content-efficiency/minify.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | 11 | 12 | 13 |
…
14 | 15 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /fundamentals/primers/async-all-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Promises test 5 | 6 | 7 | 8 |
9 | 10 |
11 |
12 | 15 | 16 | 40 | 41 | -------------------------------------------------------------------------------- /fundamentals/primers/async-best-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Promises test 5 | 6 | 7 | 8 |
9 | 10 |
11 |
12 | 15 | 16 | 40 | 41 | -------------------------------------------------------------------------------- /fundamentals/primers/async-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Promises test 5 | 6 | 7 | 8 |
9 | 10 |
11 |
12 | 15 | 16 | 41 | 42 | -------------------------------------------------------------------------------- /fundamentals/primers/async-generators-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Promises test 5 | 6 | 7 | 8 |
9 | 10 |
11 |
12 | 15 | 16 | 45 | 46 | -------------------------------------------------------------------------------- /fundamentals/primers/chapter-1.json: -------------------------------------------------------------------------------- 1 | { 2 | "chapter": 1, 3 | "html": "

Chapter 1 text: Cras sollicitudin orci ac velit adipiscing, ut faucibus urna auctor. Pellentesque in sem nec sem molestie malesuada. Sed aliquam mi sit amet sollicitudin luctus. Aenean quis tempus sem, in viverra metus. Maecenas sed urna bibendum, cursus lectus sed, ultricies risus.

" 4 | } -------------------------------------------------------------------------------- /fundamentals/primers/chapter-2.json: -------------------------------------------------------------------------------- 1 | { 2 | "chapter": 2, 3 | "html": "

Chapter 2 text: Curabitur laoreet cursus lectus, id tempus massa volutpat a. Vivamus placerat diam risus, ut rutrum neque consectetur ac. Sed ullamcorper porttitor diam, sit amet sollicitudin velit fermentum in. Praesent aliquet dui ac lorem molestie, non luctus lacus porta. Nullam risus justo, aliquam sit amet neque at, fringilla pharetra mi. Curabitur tincidunt dictum magna, vitae faucibus urna vehicula sit amet. Donec ornare malesuada nisi. Pellentesque tincidunt ultrices quam, ac laoreet risus convallis in. Ut consequat justo dolor, ac venenatis mi aliquam nec. Ut quis accumsan est, non pulvinar orci. Ut hendrerit nunc et laoreet rutrum. Nulla et libero fringilla, sodales risus in, euismod libero.

" 4 | } -------------------------------------------------------------------------------- /fundamentals/primers/chapter-3.json: -------------------------------------------------------------------------------- 1 | { 2 | "chapter": 3, 3 | "html": "

Chapter 3 text: Duis ac lobortis mi. Vestibulum non augue pellentesque, convallis diam vitae, sollicitudin nulla. Aenean et pharetra erat, lobortis tincidunt tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum gravida ligula justo, vitae ullamcorper metus scelerisque non. Vestibulum commodo vel metus eget vestibulum. Phasellus porttitor, nunc nec rutrum vulputate, quam lorem dapibus urna, vel accumsan purus mauris id urna. Morbi vitae rutrum nisl, sit amet cursus est. Donec ipsum dui, aliquam non metus at, ultrices accumsan odio. Morbi pretium eros eu lorem commodo pulvinar.

Donec quis elementum orci. Aenean viverra, nisl eget tempus sodales, velit elit pretium dui, eu ultrices tellus lectus rhoncus orci. Praesent arcu sem, lacinia sit amet tempus ultrices, malesuada eu odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin tincidunt dictum posuere. Ut pretium lacinia tortor sit amet consequat. Phasellus ac velit pharetra, fringilla mi ut, porta neque. Donec non urna dolor. Sed sem erat, mattis non risus et, lobortis fringilla dui.

" 4 | } -------------------------------------------------------------------------------- /fundamentals/primers/chapter-4.json: -------------------------------------------------------------------------------- 1 | { 2 | "chapter": 4, 3 | "html": "

Chapter 4 text: Maecenas nec ipsum viverra erat tincidunt convallis. Morbi nec varius lectus. Vivamus vestibulum massa vitae sapien vestibulum, eu pretium felis consectetur. Nulla sagittis sem sapien. Integer quis imperdiet ipsum, a luctus sem. Duis aliquet feugiat mauris, sed posuere diam aliquam eu. Phasellus vel turpis ac nunc blandit blandit. Sed hendrerit risus nec odio egestas gravida. Vestibulum eget purus vel nulla gravida vulputate eu auctor turpis. Integer laoreet cursus consectetur. Integer laoreet sapien a urna sollicitudin blandit. Curabitur commodo quam ut erat suscipit, ac elementum quam adipiscing. Fusce id venenatis dui. Sed vel diam vel est ullamcorper lacinia. Curabitur sollicitudin diam pharetra tincidunt scelerisque.

" 4 | } -------------------------------------------------------------------------------- /fundamentals/primers/chapter-5.json: -------------------------------------------------------------------------------- 1 | { 2 | "chapter": 5, 3 | "html": "

Chapter 5 text: Vivamus dignissim enim vel dolor commodo, in vehicula est facilisis. Aliquam ac ipsum sem. Sed justo risus, tincidunt ac lectus nec, molestie elementum urna. Aenean quis velit nec sapien dignissim tincidunt. Aenean venenatis faucibus ultricies. Maecenas eu libero molestie, luctus diam ac, molestie urna. Aliquam erat volutpat. Cras eu augue vitae massa lobortis euismod id nec lacus. Cras gravida bibendum turpis at varius.

" 4 | } -------------------------------------------------------------------------------- /fundamentals/primers/story.json: -------------------------------------------------------------------------------- 1 | { 2 | "heading": "

A story about something

", 3 | "chapterUrls": [ 4 | "chapter-1.json", 5 | "chapter-2.json", 6 | "chapter-3.json", 7 | "chapter-4.json", 8 | "chapter-5.json" 9 | ] 10 | } -------------------------------------------------------------------------------- /fundamentals/primers/styles.css: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes spin { 2 | to { 3 | stroke-dashoffset: -264; 4 | } 5 | } 6 | 7 | @keyframes spin { 8 | to { 9 | stroke-dashoffset: -264; 10 | } 11 | } 12 | 13 | .spinner circle { 14 | fill: none; 15 | stroke: slategray; 16 | stroke-width: 16; 17 | stroke-linecap: round; 18 | stroke-dasharray: 0, 0, 70, 194; 19 | stroke-dashoffset: 0; 20 | animation: spin 1s infinite linear; 21 | -webkit-animation: spin 1s infinite linear; 22 | } 23 | 24 | html { 25 | font-family: sans-serif; 26 | line-height: 1.5; 27 | font-size: 14px; 28 | } 29 | h1 { 30 | font-family: Cambria, Georgia, serif; 31 | font-size: 2em; 32 | line-height: 1.3em; 33 | margin: 0 0 0.5em; 34 | } 35 | .network-fake { 36 | display: none; 37 | margin-bottom: 1em; 38 | } 39 | input { 40 | vertical-align: middle; 41 | } -------------------------------------------------------------------------------- /fundamentals/primers/sync-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Promises test 5 | 6 | 7 | 8 |
9 | 10 |
11 |
12 | 15 | 16 | 34 | 35 | -------------------------------------------------------------------------------- /fundamentals/primers/utils.js: -------------------------------------------------------------------------------- 1 | var fakeSlowNetwork; 2 | 3 | (function() { 4 | var lsKey = 'fake-slow-network'; 5 | var networkFakeDiv = document.querySelector('.network-fake'); 6 | var checkbox = networkFakeDiv.querySelector('input'); 7 | 8 | fakeSlowNetwork = Number(localStorage.getItem(lsKey)) || 0; 9 | 10 | networkFakeDiv.style.display = 'block'; 11 | checkbox.checked = !!fakeSlowNetwork; 12 | 13 | checkbox.addEventListener('change', function() { 14 | localStorage.setItem(lsKey, Number(checkbox.checked)); 15 | location.reload(); 16 | }); 17 | }()); 18 | 19 | function spawn(generatorFunc) { 20 | function continuer(verb, arg) { 21 | var result; 22 | try { 23 | result = generator[verb](arg); 24 | } catch (err) { 25 | return Promise.reject(err); 26 | } 27 | if (result.done) { 28 | return result.value; 29 | } else { 30 | return Promise.resolve(result.value).then(callback, errback); 31 | } 32 | } 33 | var generator = generatorFunc(); 34 | var callback = continuer.bind(continuer, "next"); 35 | var errback = continuer.bind(continuer, "throw"); 36 | return callback(); 37 | } 38 | 39 | function wait(ms) { 40 | return new Promise(function(resolve) { 41 | setTimeout(resolve, ms); 42 | }); 43 | } 44 | 45 | function get(url) { 46 | // Return a new promise. 47 | // We do all the work within the constructor callback. 48 | var fakeNetworkWait = wait(3000 * Math.random() * fakeSlowNetwork); 49 | 50 | var requestPromise = new Promise(function(resolve, reject) { 51 | // Do the usual XHR stuff 52 | var req = new XMLHttpRequest(); 53 | req.open('get', url); 54 | 55 | req.onload = function() { 56 | // 'load' triggers for 404s etc 57 | // so check the status 58 | if (req.status == 200) { 59 | // Resolve the promise with the response text 60 | resolve(req.response); 61 | } 62 | else { 63 | // Otherwise reject with the status text 64 | reject(Error(req.statusText)); 65 | } 66 | }; 67 | 68 | // Handle network errors 69 | req.onerror = function() { 70 | reject(Error("Network Error")); 71 | }; 72 | 73 | // Make the request 74 | req.send(); 75 | }); 76 | 77 | return Promise.all([fakeNetworkWait, requestPromise]).then(function(results) { 78 | return results[1]; 79 | }); 80 | } 81 | 82 | function getJson(url) { 83 | return get(url).then(JSON.parse); 84 | } 85 | 86 | function getSync(url) { 87 | var startTime = Date.now(); 88 | var waitTime = 3000 * Math.random() * fakeSlowNetwork; 89 | 90 | var req = new XMLHttpRequest(); 91 | req.open('get', url, false); 92 | req.send(); 93 | 94 | while (waitTime > Date.now() - startTime); 95 | 96 | if (req.status == 200) { 97 | return req.response; 98 | } 99 | else { 100 | throw Error(req.statusText || "Request failed"); 101 | } 102 | } 103 | 104 | function getJsonSync(url) { 105 | return JSON.parse(getSync(url)); 106 | } 107 | 108 | function getJsonCallback(url, callback) { 109 | getJson(url).then(function(response) { 110 | callback(undefined, response); 111 | }, function(err) { 112 | callback(err); 113 | }); 114 | } 115 | 116 | var storyDiv = document.querySelector('.story'); 117 | 118 | function addHtmlToPage(content) { 119 | var div = document.createElement('div'); 120 | div.innerHTML = content; 121 | storyDiv.appendChild(div); 122 | } 123 | 124 | function addTextToPage(content) { 125 | var p = document.createElement('p'); 126 | p.textContent = content; 127 | storyDiv.appendChild(p); 128 | } -------------------------------------------------------------------------------- /fundamentals/security/prevent-mixed-content/active-mixed-content.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | Active mixed content example 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 30 | 31 | 32 | 49 | 50 | 51 | 52 |
53 |

54 | Active mixed content! 55 |

56 |

57 | View page over: HTTP - HTTPS 58 |

59 |

60 | Several examples of active mixed content. When viewed over HTTPS most browsers block this content and display errors in the JavaScript console. 61 |

62 |
63 | Insecure style loaded 64 |
65 |
66 | Loading insecure background here... 67 |
68 | 69 |

Loading insecure iframe...

70 | 71 | 72 | 73 | 74 | 77 | 78 | 79 | 89 | 90 |
Waiting for insecure script to run...
91 |
92 | 107 | 108 | 109 | -------------------------------------------------------------------------------- /fundamentals/security/prevent-mixed-content/image-gallery-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | Image gallery mixed content example 16 | 17 | 29 | 51 | 52 | 53 |
54 |

55 | Image gallery mixed content! 56 |

57 |

58 | View page over: HTTP - HTTPS 59 |

60 |

61 | Image galleries often rely on the <img> tag src attribute to display thumbnail images on the page, the anchor ( <a> ) tag href attribute is then used to load the full sized image for the gallery overlay. Normally <a> tags do not cause mixed content, but in this case the jQuery code overrides the default link behavior — to navigate to a new page — and instead loads the HTTP image on this page. While this content isn't blocked, modern browsers display a warning in the JavaScript console. This can be seen when the page is viewed over HTTPS and the thumbnail is clicked. 62 |

63 | CLICK ME! --> 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 |
72 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /fundamentals/security/prevent-mixed-content/passive-mixed-content.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | Passive mixed content example 16 | 22 | 23 | 24 |
25 |

26 | Passive mixed content! 27 |

28 |

29 | View page over: HTTP - HTTPS 30 |

31 |

32 | Several examples of passive mixed content. When viewed over HTTPS most browsers do not block this content but instead display warnings in the JavaScript console. 33 |

34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 |
46 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /fundamentals/security/prevent-mixed-content/puppy-thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/security/prevent-mixed-content/puppy-thumb.jpg -------------------------------------------------------------------------------- /fundamentals/security/prevent-mixed-content/puppy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/security/prevent-mixed-content/puppy.jpg -------------------------------------------------------------------------------- /fundamentals/security/prevent-mixed-content/simple-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | Simple mixed content example 16 | 17 | 18 |
19 |

20 | Simple mixed content example! 21 |

22 |

23 | View page over: HTTP - HTTPS 24 |

25 |

26 | This page loads the script simple-example.js using HTTP. This is the simplest case of mixed content. When the simple-example.js file is requested by the browser, an attacker can inject code into the returned content and take control of the entire page. Thankfully, most modern browsers block this type of dangerous content by default and display an error in the JavaScript console. This can be seen when the page is viewed over HTTPS. 27 |

28 |
Waiting for insecure script to run...
29 | 30 | 31 | 32 |
33 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /fundamentals/security/prevent-mixed-content/simple-example.js: -------------------------------------------------------------------------------- 1 | window.onload = function() { 2 | document.getElementById('output').innerHTML += '
INSECURE SCRIPT LOADED AND RUN!!!'; 3 | } -------------------------------------------------------------------------------- /fundamentals/security/prevent-mixed-content/sleep.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/fundamentals/security/prevent-mixed-content/sleep.mp3 -------------------------------------------------------------------------------- /fundamentals/security/prevent-mixed-content/style.css: -------------------------------------------------------------------------------- 1 | .insecure-style-holder { 2 | background-color: #f00; 3 | } -------------------------------------------------------------------------------- /fundamentals/security/prevent-mixed-content/xmlhttprequest-data.js: -------------------------------------------------------------------------------- 1 | { 2 | "data": "INSECURE DATA LOADED!!!" 3 | } -------------------------------------------------------------------------------- /fundamentals/security/prevent-mixed-content/xmlhttprequest-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | XMLHttpRequest mixed content example 16 | 17 | 18 |
19 |

20 | XMLHttpRequest mixed content example! 21 |

22 |

23 | View page over: HTTP - HTTPS 24 |

25 |

26 | This page constructs an HTTP URL dynamically in JavaScript, the URL is eventually used to load an insecure resource by XMLHttpRequest. When the xmlhttprequest-data.js file is requested by the browser, an attacker can inject code into the returned content and take control of the entire page. Thankfully, most modern browsers block this type of dangerous content by default and display an error in the JavaScript console. This can be seen when the page is viewed over HTTPS. 27 |

28 |
Waiting for data...
29 | 30 | 43 | 44 |
45 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /tools/chrome-devtools/beginners/final.html: -------------------------------------------------------------------------------- 1 | <!DOCTYPE html> 2 | <html lang="en"> 3 | <head> 4 | <meta charset="utf-8"> 5 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 | <meta name="viewport" content="width=device-width, initial-scale=1"> 7 | </head> 8 | <body> 9 | <header> 10 | <p>Welcome to my site!</p> 11 | </header> 12 | <nav> 13 | <ul> 14 | <li><a href="/">Home</a></li> 15 | <li><a href="/contact.html">Contact</a></li> 16 | </ul> 17 | </nav> 18 | <main> 19 | <h1>About Me</h1> 20 | <p>I am learning web development. Recent accomplishments:</p> 21 | <ul> 22 | <li>Learned how to set up my code in Glitch.</li> 23 | <li>Added content to my HTML.</li> 24 | <li>Learned how to use Chrome DevTools to experiment with content changes.</li> 25 | <li>Learned the difference between HTML and the DOM.</li> 26 | </ul> 27 | </main> 28 | </body> 29 | </html> 30 | -------------------------------------------------------------------------------- /tools/chrome-devtools/console/primes.html: -------------------------------------------------------------------------------- 1 | 3 | 18 | -------------------------------------------------------------------------------- /tools/chrome-devtools/rendering-tools/particle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlesamples/web-fundamentals/e3a33b2348b504673a3a5a64084b7e6c203ec532/tools/chrome-devtools/rendering-tools/particle.png --------------------------------------------------------------------------------