Samples
This page lists all of the code samples used for the snippets throughout these pages.
/fundamentals/device-access/device-orientation
/fundamentals/getting-started/your-first-multi-screen-site
- CS256: Mobile Web Development - Adding a video
- CS256: Mobile Web Development - adding content
- CS256: Mobile Web Development - adding content
- CS256: Mobile Web Development - adding content
- CS256: Mobile Web Development - adding form
- CS256: Mobile Web Development - adding images
- CS256: Mobile Web Development - first breakpoint
- CS256: Mobile Web Development - fixing first breakpoint
- CS256: Mobile Web Development - full content no styles
- CS256: Mobile Web Development - full content with styles
- CS256: Mobile Web development - structure
- My first page
- My first page - perfect viewport
/fundamentals/input/form
- Creating Amazing Forms: Sample order form
- Creating Amazing Forms: Sample order form with requestAutocomplete
/fundamentals/input/touch
/fundamentals/layouts/navigation-patterns
- App Bar & Nav Drawer Sample
- App Bar & Nav Drawer Sample
- App Bar Sample 3
- App Bar Sample 3
- Bottom Bar Sample 1
- Nav Drawer Sample 2
- Nav Drawer Sample 3
- Nav Drawer Sample 4
- Tab Bar Sample 1
- Tab Bar Sample 2
- Tab Bar Sample 3
/fundamentals/layouts/rwd-fundamentals
- RWD Fundamentals: Experimenting with media queries
- RWD Fundamentals: Optimized reading example
- RWD Fundamentals: Viewport (1 - not set)
- RWD Fundamentals: Viewport (2 - "width=device-width, initial-scale=1.0")
- RWD Fundamentals: Viewport (3 - "width=device-width, initial-scale=1.0" with fixed with element)
- RWD Fundamentals: Weather (1 - non-responsive mobile)
- RWD Fundamentals: Weather (2 - responsive)
- RWD Fundamentals: Weather (3 - final)
/fundamentals/layouts/rwd-patterns
- Responsive Web Design Pattern: Column Drop
- Responsive Web Design Pattern: Layout Shifter
- Responsive Web Design Pattern: Mostly Fluid
- Responsive Web Design Pattern: Off Canvas
- Responsive Web Design Pattern: Tiny Tweaks
/fundamentals/look-and-feel/animations
- curve-playground.html
- Simple Box Move
- Simple Box Move
- Simple Box Move
- Simple Box Move
- Simple Box Move
- Simple Box Move
- Simple Box Move
- Simple Box Move
- Simple Box Move
- Simple Box Move
- Simple Box Move
- Simple Box Move
/fundamentals/media/images
- Images: Breakpoints in sizes attribute for srcset
- Images: Compressive Image Technique Comparison
- Images: Picture element with media attributes in source
- Images: Reducing http requests with sprite sheets
- Images: Replacing images with icon fonts
- Images: Replacing images with icon fonts
- Images: srcset and the sizes attribute
- Images: Using CSS image-set to provide high res images
- Images: Using media queries for conditional loading
- Images: Using media queries for high res images
/fundamentals/media/video
- Responsive Embeds
- Video: Embedded YouTube video (non-responsive)
- Video: Provide captions with the track element
- Video: Scripting and adjusting playspeed of videos
- Video: Specifying a start and end time with media fragments
- Video: Specifying multiple non-typed video source files
- Video: Specifying multiple typed video source files
- Video: Using the full screen API
/fundamentals/monetization/ads
/fundamentals/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
- Critial Path: Hello world!
- Critical Path
- Critical Path: Measure
- Critical Path: Measure Async
- Critical Path: Measure Inlined
- Critical Path: Measure Script
- Critical Path: No Style
- Critical Path: Print Media
- Critical Path: Script
- Critical Path: Script Async
- Critical Path: Script External