Showing preview only (1,867K chars total). Download the full file or copy to clipboard to get everything.
Repository: mdn/learning-area
Branch: main
Commit: 6e1054d34402
Files: 828
Total size: 1.6 MB
Directory structure:
gitextract_a46r8vfx/
├── .github/
│ └── CODEOWNERS
├── .gitignore
├── .prettierignore
├── .prettierrc.json
├── .vscode/
│ ├── cspell.json
│ ├── extensions.json
│ └── project-words.txt
├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md
├── SECURITY.md
├── accessibility/
│ ├── aria/
│ │ ├── aria-div-buttons.html
│ │ ├── aria-live.html
│ │ ├── aria-no-live.html
│ │ ├── aria-tabbed-info-box.html
│ │ ├── form-validation-checkbox-disabled.html
│ │ ├── form-validation-updated.html
│ │ ├── quotes.json
│ │ ├── validation-checkbox-disabled.js
│ │ ├── validation.js
│ │ ├── website-aria-roles/
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ └── website-no-roles/
│ │ ├── index.html
│ │ └── style.css
│ ├── assessment-finished/
│ │ ├── index.html
│ │ ├── main.js
│ │ ├── marking-guide.md
│ │ ├── media/
│ │ │ └── bear.ogg
│ │ ├── style.css
│ │ └── transcript.html
│ ├── assessment-start/
│ │ ├── assessment-files/
│ │ │ ├── index.html
│ │ │ ├── main.js
│ │ │ ├── media/
│ │ │ │ └── bear.ogg
│ │ │ └── style.css
│ │ ├── index.html
│ │ ├── main.js
│ │ ├── media/
│ │ │ └── bear.ogg
│ │ └── style.css
│ ├── css/
│ │ ├── form-css.html
│ │ ├── form-validation.html
│ │ ├── mouse-and-keyboard-events.html
│ │ ├── table-css.html
│ │ └── validation.js
│ ├── html/
│ │ ├── accessible-image.html
│ │ ├── bad-form.html
│ │ ├── bad-links.html
│ │ ├── bad-semantics.html
│ │ ├── bad-table.html
│ │ ├── dino-info.html
│ │ ├── good-form.html
│ │ ├── good-links.html
│ │ ├── good-semantics.html
│ │ ├── native-keyboard-accessibility.html
│ │ ├── style.css
│ │ └── table-layout.html
│ ├── mobile/
│ │ ├── common-job-types.html
│ │ ├── html5-form-examples.html
│ │ ├── multi-control-box-drag.html
│ │ ├── simple-box-drag.html
│ │ └── simple-button-example.html
│ ├── multimedia/
│ │ ├── audio-transcript-ui/
│ │ │ ├── index.html
│ │ │ └── main.js
│ │ ├── custom-controls-OOJS/
│ │ │ ├── index.html
│ │ │ └── main.js
│ │ ├── custom-controls-basic/
│ │ │ ├── index.html
│ │ │ └── main.js
│ │ ├── custom-controls-start.html
│ │ ├── custom-controls.css
│ │ ├── native-controls.html
│ │ ├── rabbit320.webm
│ │ └── viper.ogg
│ └── tasks/
│ ├── html-css/
│ │ ├── aria/
│ │ │ ├── aria1-download.html
│ │ │ ├── aria1.html
│ │ │ ├── aria2-download.html
│ │ │ ├── aria2.html
│ │ │ └── marking.md
│ │ ├── css/
│ │ │ ├── css-a11y1-download.html
│ │ │ ├── css-a11y1.html
│ │ │ ├── css-a11y2-download.html
│ │ │ ├── css-a11y2.html
│ │ │ └── marking.md
│ │ ├── html/
│ │ │ ├── html-a11y1-download.html
│ │ │ ├── html-a11y1.html
│ │ │ ├── html-a11y2-download.html
│ │ │ ├── html-a11y2.html
│ │ │ ├── html-a11y3-download.html
│ │ │ ├── html-a11y3.html
│ │ │ ├── html-a11y4-download.html
│ │ │ ├── html-a11y4.html
│ │ │ └── marking.md
│ │ ├── playable.js
│ │ └── styles.css
│ └── js/
│ ├── aria/
│ │ └── aria-js1-download.html
│ ├── js/
│ │ └── js1-download.html
│ ├── playable.js
│ └── styles.css
├── css/
│ ├── css-layout/
│ │ ├── flexbox/
│ │ │ ├── complex-flexbox.html
│ │ │ ├── flex-align0.html
│ │ │ ├── flex-align1.html
│ │ │ ├── flex-ordering.html
│ │ │ ├── flexbox-wrap0.html
│ │ │ ├── flexbox-wrap1.html
│ │ │ ├── flexbox0.html
│ │ │ ├── flexbox1.html
│ │ │ └── flexbox2.html
│ │ ├── floats/
│ │ │ ├── 0_two-column-layout.html
│ │ │ ├── 1-basic-example.html
│ │ │ ├── 1_three-column-layout.html
│ │ │ ├── 2-line-boxes.html
│ │ │ ├── 2_float-disaster.html
│ │ │ ├── 2a_fixed-by-clear.html
│ │ │ ├── 3-clearing.html
│ │ │ ├── 3_broken-layout.html
│ │ │ ├── 4-clearfix.html
│ │ │ ├── 4_fixed-layout-border-box.html
│ │ │ ├── 5-overflow.html
│ │ │ ├── 5_fixed-height-columns.html
│ │ │ ├── 6-flow-root.html
│ │ │ ├── fixed-layout-adjusted-percentages.html
│ │ │ ├── simple-float.html
│ │ │ ├── three-column-layout-wrong-order.html
│ │ │ └── two-column-layout-fixed.html
│ │ ├── fundamental-layout-comprehension/
│ │ │ ├── index.html
│ │ │ └── styles.css
│ │ ├── fundamental-layout-comprehension-finish/
│ │ │ ├── index.html
│ │ │ ├── marking-guide.md
│ │ │ └── styles.css
│ │ ├── grids/
│ │ │ ├── 0-starting-point.html
│ │ │ ├── 1-fixed-columns.html
│ │ │ ├── 10-template-completed.html
│ │ │ ├── 11-grid-system-starting-point.html
│ │ │ ├── 12-grid-system-completed.html
│ │ │ ├── 2-fr-tracks.html
│ │ │ ├── 3-gaps.html
│ │ │ ├── 4-repeat.html
│ │ │ ├── 5-auto-rows.html
│ │ │ ├── 6-min-max.html
│ │ │ ├── 7-auto-fill.html
│ │ │ ├── 8-placement-starting-point.html
│ │ │ ├── 9-placement-completed.html
│ │ │ ├── css-grid-finished.html
│ │ │ ├── css-grid.html
│ │ │ ├── css-tables-as-grid.html
│ │ │ ├── flexbox-grid.html
│ │ │ ├── fluid-grid-calc.html
│ │ │ ├── fluid-grid-offset.html
│ │ │ ├── fluid-grid.html
│ │ │ ├── html-skeleton-finished.html
│ │ │ ├── html-skeleton.html
│ │ │ ├── normalize.css
│ │ │ ├── simple-grid-finished.html
│ │ │ ├── simple-grid.html
│ │ │ └── skeleton.css
│ │ ├── multicol/
│ │ │ ├── 0-starting-point.html
│ │ │ ├── 1-simple-example.html
│ │ │ ├── 2-simple-example-width.html
│ │ │ ├── 3-gaps-rules.html
│ │ │ └── 4-breaking.html
│ │ ├── positioning/
│ │ │ ├── 0_basic-flow.html
│ │ │ ├── 1_static-positioning.html
│ │ │ ├── 2_relative-positioning.html
│ │ │ ├── 3_absolute-positioning.html
│ │ │ ├── 4_positioning-context.html
│ │ │ ├── 5_z-index.html
│ │ │ ├── 6_fixed-positioning.html
│ │ │ └── 7_sticky-positioning.html
│ │ ├── practical-positioning-examples/
│ │ │ ├── fixed-info-box.html
│ │ │ ├── hidden-info-panel-start.html
│ │ │ ├── hidden-info-panel.html
│ │ │ ├── tabbed-info-box-start.html
│ │ │ ├── tabbed-info-box.html
│ │ │ └── tabs-manual.js
│ │ └── stacking-and-float/
│ │ └── index.html
│ ├── introduction-to-css/
│ │ ├── box-model/
│ │ │ ├── app/
│ │ │ │ └── sass
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ ├── cascade-and-inheritance/
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ ├── css-selectors/
│ │ │ ├── combinators.html
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ ├── css-values-and-units/
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ ├── debugging-css/
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ ├── debugging-css-finished/
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ ├── fundamental-css-comprehension/
│ │ │ ├── index.html
│ │ │ └── style-resources.txt
│ │ ├── fundamental-css-comprehension-finished/
│ │ │ ├── index.html
│ │ │ ├── marking-guide.md
│ │ │ └── style.css
│ │ └── how-css-works/
│ │ ├── index.html
│ │ └── style.css
│ ├── styling-boxes/
│ │ ├── advanced_box_effects/
│ │ │ ├── background-clip-text.html
│ │ │ ├── blend-modes.html
│ │ │ ├── box-shadow.html
│ │ │ └── filters.html
│ │ ├── backgrounds/
│ │ │ ├── background-attachment.css
│ │ │ ├── background-attachment.html
│ │ │ ├── index.html
│ │ │ └── repeating-background.html
│ │ ├── borders/
│ │ │ ├── border-image.html
│ │ │ ├── border-longhand.html
│ │ │ └── rounded-corners.html
│ │ ├── box-model-recap/
│ │ │ ├── box-sizing-example.css
│ │ │ ├── box-sizing-example.html
│ │ │ ├── css-tables-example.html
│ │ │ ├── flexbox-example.html
│ │ │ ├── min-max-container.css
│ │ │ ├── min-max-container.html
│ │ │ ├── min-max-image-container.css
│ │ │ └── min-max-image-container.html
│ │ ├── cool-information-box-finished/
│ │ │ ├── index.html
│ │ │ ├── marking-guide.md
│ │ │ └── style.css
│ │ ├── cool-information-box-start/
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ ├── letterheaded-paper-finished/
│ │ │ ├── index.html
│ │ │ ├── marking-guide.md
│ │ │ └── style.css
│ │ ├── letterheaded-paper-start/
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ └── styling-tables/
│ │ ├── punk-bands-complete.html
│ │ ├── punk-bands-unstyled.html
│ │ └── style.css
│ └── styling-text/
│ ├── fundamentals/
│ │ └── index.html
│ ├── styling-links/
│ │ ├── default-styles.html
│ │ ├── external-link-icon.html
│ │ ├── link-buttons.html
│ │ └── styled-links.html
│ ├── styling-lists/
│ │ ├── index.html
│ │ └── unstyled-list.html
│ ├── typesetting-a-homepage-finished/
│ │ ├── index.html
│ │ ├── marking-guide.md
│ │ ├── original-font-files/
│ │ │ ├── Lovato Light-Webfont/
│ │ │ │ ├── Licenses/
│ │ │ │ │ └── Webfont EULA 1.6.txt
│ │ │ │ ├── Reference/
│ │ │ │ │ └── How_to_use_webfonts.html
│ │ │ │ └── Webfonts/
│ │ │ │ └── lovato_light_macroman/
│ │ │ │ ├── Lovato-Light-demo.html
│ │ │ │ ├── specimen_files/
│ │ │ │ │ ├── easytabs.js
│ │ │ │ │ ├── grid_12-825-55-15.css
│ │ │ │ │ └── specimen_stylesheet.css
│ │ │ │ └── stylesheet.css
│ │ │ ├── josefin-slab/
│ │ │ │ └── SIL Open Font License.txt
│ │ │ └── webfontkit-20160419-074110/
│ │ │ ├── generator_config.txt
│ │ │ ├── josefinslab-bold-demo.html
│ │ │ ├── specimen_files/
│ │ │ │ ├── grid_12-825-55-15.css
│ │ │ │ └── specimen_stylesheet.css
│ │ │ └── stylesheet.css
│ │ └── style.css
│ ├── typesetting-a-homepage-start/
│ │ ├── index.html
│ │ └── style.css
│ └── web-fonts/
│ ├── fonts/
│ │ ├── cicle_fina-demo.html
│ │ ├── generator_config.txt
│ │ ├── specimen_files/
│ │ │ ├── grid_12-825-55-15.css
│ │ │ └── specimen_stylesheet.css
│ │ ├── stylesheet.css
│ │ └── zantroke-demo.html
│ ├── google-font.css
│ ├── google-font.html
│ ├── web-font-finished.css
│ ├── web-font-finished.html
│ ├── web-font-start.css
│ ├── web-font-start.html
│ └── zantroke/
│ ├── SIL Open Font License.txt
│ └── Zantroke.otf
├── html/
│ ├── forms/
│ │ ├── basic-input-examples/
│ │ │ └── index.html
│ │ ├── color-example/
│ │ │ └── index.html
│ │ ├── date-picker-fallback/
│ │ │ └── index.html
│ │ ├── datetime-local-example/
│ │ │ └── index.html
│ │ ├── datetime-local-picker-fallback/
│ │ │ └── index.html
│ │ ├── editable-input-example/
│ │ │ └── editable_input.html
│ │ ├── file-examples/
│ │ │ ├── file-example.html
│ │ │ ├── file-with-accept.html
│ │ │ └── simple-file.html
│ │ ├── form-validation/
│ │ │ ├── custom-error-message.html
│ │ │ ├── detailed-custom-validation.html
│ │ │ ├── fruit-length.html
│ │ │ ├── fruit-pattern.html
│ │ │ ├── fruit-required.html
│ │ │ ├── fruit-start.html
│ │ │ ├── full-example.html
│ │ │ └── min-max.html
│ │ ├── hidden-input-example/
│ │ │ └── index.html
│ │ ├── html-form-structure/
│ │ │ ├── checkbox-label.html
│ │ │ ├── fieldset-legend.html
│ │ │ └── required-labels.html
│ │ ├── image-type-example/
│ │ │ ├── index.html
│ │ │ └── xy-coordinates-example.html
│ │ ├── indeterminate-example/
│ │ │ └── index.html
│ │ ├── month-examples/
│ │ │ └── month-validation.html
│ │ ├── native-form-widgets/
│ │ │ ├── advanced-examples.html
│ │ │ ├── button-examples.html
│ │ │ ├── checkable-items.html
│ │ │ ├── drop-down-content.html
│ │ │ ├── multi-line-text-field.html
│ │ │ ├── other-examples.html
│ │ │ ├── positioned-legend.html
│ │ │ └── single-line-text-fields.html
│ │ ├── number-example/
│ │ │ └── index.html
│ │ ├── postcard-example/
│ │ │ ├── index.html
│ │ │ └── postcard-start.html
│ │ ├── pseudo-classes/
│ │ │ ├── basic-required-optional.html
│ │ │ ├── enabled-disabled-shipping.html
│ │ │ ├── out-of-range.html
│ │ │ ├── radios-checked-default.html
│ │ │ ├── radios-checked-indeterminate.html
│ │ │ ├── readonly-confirmation.html
│ │ │ ├── required-optional-generated.html
│ │ │ ├── user-valid-invalid.html
│ │ │ └── valid-invalid.html
│ │ ├── range-example/
│ │ │ └── index.html
│ │ ├── select-example/
│ │ │ └── select-multiple.html
│ │ ├── sending-form-data/
│ │ │ ├── get-method.html
│ │ │ ├── php-example.html
│ │ │ ├── php-example.php
│ │ │ ├── post-method.html
│ │ │ ├── python-example.py
│ │ │ └── templates/
│ │ │ ├── form.html
│ │ │ └── greeting.html
│ │ ├── styling-examples/
│ │ │ ├── appearance-tester.html
│ │ │ ├── checkboxes-styled.html
│ │ │ ├── radios-styled.html
│ │ │ ├── search-appearance.html
│ │ │ ├── styled-file-picker.html
│ │ │ ├── styled-search.html
│ │ │ └── ugly-controls.html
│ │ ├── tasks/
│ │ │ ├── advanced-styling/
│ │ │ │ ├── advanced-styling1-download.html
│ │ │ │ ├── advanced-styling1.html
│ │ │ │ ├── advanced-styling2-download.html
│ │ │ │ ├── advanced-styling2.html
│ │ │ │ ├── advanced-styling3-download.html
│ │ │ │ └── marking.md
│ │ │ ├── basic-controls/
│ │ │ │ ├── basic-controls1-download.html
│ │ │ │ ├── basic-controls1.html
│ │ │ │ ├── basic-controls2-download.html
│ │ │ │ ├── basic-controls2.html
│ │ │ │ ├── basic-controls3-download.html
│ │ │ │ ├── basic-controls3.html
│ │ │ │ └── marking.md
│ │ │ ├── form-structure/
│ │ │ │ ├── form-structure1-download.html
│ │ │ │ ├── form-structure1.html
│ │ │ │ └── marking.md
│ │ │ ├── form-validation/
│ │ │ │ ├── form-validation1-download.html
│ │ │ │ ├── form-validation2-download.html
│ │ │ │ ├── form-validation3-download.html
│ │ │ │ └── marking.md
│ │ │ ├── html5-controls/
│ │ │ │ ├── html5-controls1-download.html
│ │ │ │ ├── html5-controls1.html
│ │ │ │ ├── html5-controls2-download.html
│ │ │ │ ├── html5-controls2.html
│ │ │ │ └── marking.md
│ │ │ ├── other-controls/
│ │ │ │ ├── marking.md
│ │ │ │ ├── other-controls1-download.html
│ │ │ │ ├── other-controls1.html
│ │ │ │ ├── other-controls2-download.html
│ │ │ │ ├── other-controls2.html
│ │ │ │ ├── other-controls3-download.html
│ │ │ │ └── other-controls3.html
│ │ │ ├── playable.js
│ │ │ ├── styles.css
│ │ │ └── styling-basics/
│ │ │ ├── marking.md
│ │ │ └── styling-basics1-download.html
│ │ ├── tel-example/
│ │ │ └── index.html
│ │ ├── text-example/
│ │ │ └── index.html
│ │ ├── time-example/
│ │ │ └── index.html
│ │ ├── toggle-switch-example/
│ │ │ └── index.html
│ │ ├── url-example/
│ │ │ └── index.html
│ │ ├── week-example/
│ │ │ └── index.html
│ │ └── your-first-HTML-form/
│ │ ├── first-form-styled.html
│ │ └── first-form.html
│ ├── introduction-to-html/
│ │ ├── advanced-text-formatting/
│ │ │ ├── description-list.html
│ │ │ ├── other-semantics.html
│ │ │ └── quotations.html
│ │ ├── creating-hyperlinks/
│ │ │ ├── contacts.html
│ │ │ ├── index.html
│ │ │ └── projects/
│ │ │ └── index.html
│ │ ├── debugging-html/
│ │ │ ├── debug-example-fixed.html
│ │ │ └── debug-example.html
│ │ ├── document_and_website_structure/
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ ├── getting-started/
│ │ │ └── index.html
│ │ ├── html-text-formatting/
│ │ │ ├── text-complete.html
│ │ │ └── text-start.html
│ │ ├── marking-up-a-letter-finished/
│ │ │ ├── index.html
│ │ │ └── marking-guide.md
│ │ ├── marking-up-a-letter-start/
│ │ │ ├── css.txt
│ │ │ └── letter-text.txt
│ │ ├── navigation-menu-marked-up/
│ │ │ ├── index.html
│ │ │ ├── pictures.html
│ │ │ ├── projects.html
│ │ │ └── social.html
│ │ ├── navigation-menu-start/
│ │ │ ├── index.html
│ │ │ ├── pictures.html
│ │ │ ├── projects.html
│ │ │ └── social.html
│ │ ├── structuring-a-page-of-content-finished/
│ │ │ ├── index.html
│ │ │ ├── marking-guide.md
│ │ │ └── style.css
│ │ ├── structuring-a-page-of-content-start/
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ ├── tasks/
│ │ │ ├── advanced-text/
│ │ │ │ ├── advanced-text1-download.html
│ │ │ │ ├── advanced-text1-finished.html
│ │ │ │ ├── advanced-text1.html
│ │ │ │ ├── advanced-text2-download.html
│ │ │ │ ├── advanced-text2-finished.html
│ │ │ │ ├── advanced-text2.html
│ │ │ │ └── marking.md
│ │ │ ├── basic-text/
│ │ │ │ ├── basic-text1-download.html
│ │ │ │ ├── basic-text1-finished.html
│ │ │ │ ├── basic-text1.html
│ │ │ │ ├── basic-text2-download.html
│ │ │ │ ├── basic-text2-finished.html
│ │ │ │ ├── basic-text2.html
│ │ │ │ ├── basic-text3-download.html
│ │ │ │ ├── basic-text3-finished.html
│ │ │ │ ├── basic-text3.html
│ │ │ │ └── marking.md
│ │ │ ├── links/
│ │ │ │ ├── links1-download.html
│ │ │ │ ├── links1.html
│ │ │ │ ├── links2-download.html
│ │ │ │ ├── links2.html
│ │ │ │ ├── links3-download.html
│ │ │ │ ├── links3.html
│ │ │ │ ├── marking.md
│ │ │ │ ├── narwhals.html
│ │ │ │ └── whales.html
│ │ │ ├── playable.js
│ │ │ └── styles.css
│ │ └── the-html-head/
│ │ ├── css-and-js.html
│ │ ├── meta-example.html
│ │ ├── script.js
│ │ ├── style.css
│ │ └── title-example.html
│ ├── multimedia-and-embedding/
│ │ ├── adding-vector-graphics-to-the-web/
│ │ │ └── vector-versus-raster.html
│ │ ├── images-in-html/
│ │ │ └── index.html
│ │ ├── mdn-splash-page-finished/
│ │ │ ├── index.html
│ │ │ └── marking-guide.md
│ │ ├── mdn-splash-page-start/
│ │ │ └── index.html
│ │ ├── other-embedding-technologies/
│ │ │ ├── iframe-detail.html
│ │ │ ├── iframe-youtube.html
│ │ │ ├── object-image.html
│ │ │ └── object-pdf.html
│ │ ├── responsive-images/
│ │ │ ├── not-responsive.html
│ │ │ ├── responsive.html
│ │ │ └── srcset-resolutions.html
│ │ ├── tasks/
│ │ │ ├── images/
│ │ │ │ ├── images1-download.html
│ │ │ │ ├── images1.html
│ │ │ │ ├── images2-download.html
│ │ │ │ ├── images2.html
│ │ │ │ ├── images3-download.html
│ │ │ │ ├── images3.html
│ │ │ │ └── marking.md
│ │ │ ├── media-embed/
│ │ │ │ ├── marking.md
│ │ │ │ ├── media/
│ │ │ │ │ ├── subtitles_en.vtt
│ │ │ │ │ └── video.webm
│ │ │ │ ├── mediaembed1-download.html
│ │ │ │ ├── mediaembed1.html
│ │ │ │ ├── mediaembed2-download.html
│ │ │ │ ├── mediaembed2.html
│ │ │ │ ├── mediaembed3-download.html
│ │ │ │ └── mediaembed3.html
│ │ │ ├── playable.js
│ │ │ └── styles.css
│ │ └── video-and-audio-content/
│ │ ├── extra-video-features.html
│ │ ├── multiple-audio-formats.html
│ │ ├── multiple-video-formats-no-controls.html
│ │ ├── multiple-video-formats.html
│ │ ├── rabbit320.webm
│ │ ├── simple-video.html
│ │ └── viper.ogg
│ └── tables/
│ ├── advanced/
│ │ ├── items-sold-headers.html
│ │ ├── items-sold-scope.html
│ │ ├── items-sold.html
│ │ ├── minimal-table.css
│ │ ├── nested-tables.html
│ │ ├── spending-record-finished.html
│ │ ├── spending-record.html
│ │ └── timetable-caption.html
│ ├── assessment-finished/
│ │ ├── marking-guide.md
│ │ ├── minimal-table.css
│ │ └── planets-data.html
│ ├── assessment-start/
│ │ ├── blank-template.html
│ │ ├── minimal-table.css
│ │ └── planets-data.txt
│ └── basic/
│ ├── animals-table-fixed.html
│ ├── animals-table.html
│ ├── blank-template.html
│ ├── dogs-table-fixed.html
│ ├── dogs-table.html
│ ├── minimal-table.css
│ ├── personal-pronouns-styled.html
│ ├── personal-pronouns.html
│ ├── simple-table.html
│ ├── timetable-fixed.html
│ └── timetable.html
├── javascript/
│ ├── apis/
│ │ ├── client-side-storage/
│ │ │ ├── cache-sw/
│ │ │ │ └── video-store-offline/
│ │ │ │ ├── index.html
│ │ │ │ ├── index.js
│ │ │ │ ├── style.css
│ │ │ │ ├── sw.js
│ │ │ │ └── videos/
│ │ │ │ ├── crystal.webm
│ │ │ │ ├── elf.webm
│ │ │ │ ├── frog.webm
│ │ │ │ ├── monster.webm
│ │ │ │ ├── pig.webm
│ │ │ │ └── rabbit.webm
│ │ │ ├── indexeddb/
│ │ │ │ ├── notes/
│ │ │ │ │ ├── index-start.js
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── index.js
│ │ │ │ │ └── style.css
│ │ │ │ └── video-store/
│ │ │ │ ├── index.html
│ │ │ │ ├── index.js
│ │ │ │ ├── style.css
│ │ │ │ └── videos/
│ │ │ │ ├── crystal.webm
│ │ │ │ ├── elf.webm
│ │ │ │ ├── frog.webm
│ │ │ │ ├── monster.webm
│ │ │ │ ├── pig.webm
│ │ │ │ └── rabbit.webm
│ │ │ └── web-storage/
│ │ │ ├── index.html
│ │ │ ├── index.js
│ │ │ └── personal-greeting.html
│ │ ├── document-manipulation/
│ │ │ ├── dom-example-manipulated.html
│ │ │ ├── dom-example.html
│ │ │ ├── shopping-list-finished.html
│ │ │ └── shopping-list.html
│ │ ├── drawing-graphics/
│ │ │ ├── getting-started/
│ │ │ │ ├── 0_canvas_start/
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── script.js
│ │ │ │ │ └── style.css
│ │ │ │ ├── 1_canvas_template/
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── script.js
│ │ │ │ │ └── style.css
│ │ │ │ ├── 2_canvas_rectangles/
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── script.js
│ │ │ │ │ └── style.css
│ │ │ │ ├── 3_canvas_paths/
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── script.js
│ │ │ │ │ └── style.css
│ │ │ │ ├── 4_canvas_text/
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── script.js
│ │ │ │ │ └── style.css
│ │ │ │ └── 5_canvas_images/
│ │ │ │ ├── index.html
│ │ │ │ ├── script.js
│ │ │ │ └── style.css
│ │ │ ├── loops_animation/
│ │ │ │ ├── 6_canvas_for_loop/
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── script.js
│ │ │ │ │ └── style.css
│ │ │ │ ├── 7_canvas_walking_animation/
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── script.js
│ │ │ │ │ └── style.css
│ │ │ │ └── 8_canvas_drawing_app/
│ │ │ │ ├── index.html
│ │ │ │ ├── script.js
│ │ │ │ └── style.css
│ │ │ ├── threejs-cube/
│ │ │ │ ├── index.html
│ │ │ │ ├── script.js
│ │ │ │ └── style.css
│ │ │ └── threejs-video-cube/
│ │ │ ├── index.html
│ │ │ ├── script.js
│ │ │ └── style.css
│ │ ├── fetching-data/
│ │ │ ├── can-store/
│ │ │ │ ├── can-script.js
│ │ │ │ ├── can-style.css
│ │ │ │ ├── index.html
│ │ │ │ └── products.json
│ │ │ ├── can-store-xhr/
│ │ │ │ ├── can-script.js
│ │ │ │ ├── can-style.css
│ │ │ │ ├── index.html
│ │ │ │ └── products.json
│ │ │ ├── fetch-finish.html
│ │ │ ├── fetch-start.html
│ │ │ ├── verse1.txt
│ │ │ ├── verse2.txt
│ │ │ ├── verse3.txt
│ │ │ └── verse4.txt
│ │ ├── introduction/
│ │ │ ├── bouncing-balls.html
│ │ │ ├── main.js
│ │ │ ├── style.css
│ │ │ └── web-audio/
│ │ │ └── index.html
│ │ ├── third-party-apis/
│ │ │ ├── mapquest/
│ │ │ │ ├── finished/
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── script.js
│ │ │ │ │ └── style.css
│ │ │ │ └── start/
│ │ │ │ ├── index.html
│ │ │ │ ├── script.js
│ │ │ │ └── style.css
│ │ │ ├── nytimes/
│ │ │ │ ├── finished/
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── script.js
│ │ │ │ │ └── style.css
│ │ │ │ └── start/
│ │ │ │ ├── index.html
│ │ │ │ ├── script.js
│ │ │ │ └── style.css
│ │ │ └── youtube/
│ │ │ ├── index.html
│ │ │ ├── script.js
│ │ │ └── youtube.css
│ │ └── video-audio/
│ │ ├── finished/
│ │ │ ├── custom-player.js
│ │ │ ├── index.html
│ │ │ ├── style.css
│ │ │ └── video/
│ │ │ └── sintel-short.webm
│ │ └── start/
│ │ ├── index.html
│ │ ├── style.css
│ │ └── video/
│ │ └── sintel-short.webm
│ ├── asynchronous/
│ │ ├── sequencing-animations/
│ │ │ ├── finished/
│ │ │ │ ├── index.html
│ │ │ │ ├── main.js
│ │ │ │ └── style.css
│ │ │ ├── marking-guide.md
│ │ │ └── start/
│ │ │ ├── index.html
│ │ │ ├── main.js
│ │ │ └── style.css
│ │ └── workers/
│ │ ├── finished/
│ │ │ ├── generate.js
│ │ │ ├── index.html
│ │ │ ├── main.js
│ │ │ └── style.css
│ │ └── start/
│ │ ├── generate.js
│ │ ├── index.html
│ │ ├── main.js
│ │ └── style.css
│ ├── building-blocks/
│ │ ├── allowance-updater.html
│ │ ├── calendar-finished.html
│ │ ├── events/
│ │ │ ├── preventdefault-validation.html
│ │ │ ├── rabbit320.webm
│ │ │ ├── random-color-addeventlistener.html
│ │ │ ├── random-color-eventhandlerattributes.html
│ │ │ ├── random-color-eventhandlerproperty.html
│ │ │ ├── random-color-eventobject.html
│ │ │ ├── show-video-box-fixed.html
│ │ │ ├── show-video-box.html
│ │ │ └── useful-eventtarget.html
│ │ ├── functions/
│ │ │ ├── conflict.html
│ │ │ ├── first.js
│ │ │ ├── function-library-finished.html
│ │ │ ├── function-library.html
│ │ │ ├── function-scope.html
│ │ │ ├── function-stage-2.html
│ │ │ ├── function-stage-3.html
│ │ │ ├── function-stage-4.html
│ │ │ ├── function-start.html
│ │ │ └── second.js
│ │ ├── gallery/
│ │ │ ├── index.html
│ │ │ ├── main.js
│ │ │ ├── marking-guide.md
│ │ │ └── style.css
│ │ ├── loops/
│ │ │ ├── basic-for-improved.html
│ │ │ ├── basic-for.html
│ │ │ ├── contact-search.html
│ │ │ ├── do-while.html
│ │ │ ├── guest-list.html
│ │ │ ├── integer-squares.html
│ │ │ ├── launch-countdown.html
│ │ │ ├── random-canvas-circles.html
│ │ │ └── while.html
│ │ ├── more-color-choices-finished.html
│ │ ├── simple-else-if.html
│ │ ├── simple-switch.html
│ │ ├── simple-ternary.html
│ │ └── tasks/
│ │ ├── conditionals/
│ │ │ ├── conditionals1-download.html
│ │ │ ├── conditionals1.html
│ │ │ ├── conditionals2-download.html
│ │ │ ├── conditionals2.html
│ │ │ ├── conditionals3-download.html
│ │ │ ├── conditionals3.html
│ │ │ └── marking.md
│ │ ├── events/
│ │ │ ├── events1-download.html
│ │ │ ├── events1.html
│ │ │ ├── events2-download.html
│ │ │ ├── events2.html
│ │ │ ├── events3-download.html
│ │ │ ├── events3.html
│ │ │ └── marking.md
│ │ ├── functions/
│ │ │ ├── functions1-download.html
│ │ │ ├── functions1.html
│ │ │ ├── functions2-download.html
│ │ │ ├── functions2.html
│ │ │ ├── functions3-download.html
│ │ │ ├── functions3.html
│ │ │ ├── functions4-download.html
│ │ │ ├── functions4.html
│ │ │ └── marking.md
│ │ ├── loops/
│ │ │ ├── loops1-download.html
│ │ │ ├── loops2-download.html
│ │ │ ├── loops3-download.html
│ │ │ └── marking.md
│ │ ├── playable.js
│ │ └── styles.css
│ ├── introduction-to-js-1/
│ │ ├── assessment-finished/
│ │ │ ├── index.html
│ │ │ ├── main.js
│ │ │ └── marking-guide.md
│ │ ├── assessment-start/
│ │ │ ├── index.html
│ │ │ └── raw-text.txt
│ │ ├── first-splash/
│ │ │ ├── number-guessing-game-start.html
│ │ │ └── number-guessing-game.html
│ │ ├── maths/
│ │ │ ├── conditional.html
│ │ │ └── editable_canvas.html
│ │ ├── tasks/
│ │ │ ├── arrays/
│ │ │ │ ├── arrays1-download.html
│ │ │ │ ├── arrays1.html
│ │ │ │ ├── arrays2-download.html
│ │ │ │ ├── arrays2.html
│ │ │ │ ├── arrays3-download.html
│ │ │ │ ├── arrays3.html
│ │ │ │ ├── arrays4-download.html
│ │ │ │ ├── arrays4.html
│ │ │ │ └── marking.md
│ │ │ ├── math/
│ │ │ │ ├── marking.md
│ │ │ │ ├── math1-download.html
│ │ │ │ ├── math1.html
│ │ │ │ ├── math2-download.html
│ │ │ │ ├── math2.html
│ │ │ │ ├── math3-download.html
│ │ │ │ └── math3.html
│ │ │ ├── playable.js
│ │ │ ├── strings/
│ │ │ │ ├── marking.md
│ │ │ │ ├── strings1-download.html
│ │ │ │ ├── strings1.html
│ │ │ │ ├── strings2-download.html
│ │ │ │ ├── strings2.html
│ │ │ │ ├── strings3-download.html
│ │ │ │ ├── strings3.html
│ │ │ │ ├── strings4-download.html
│ │ │ │ └── strings4.html
│ │ │ ├── styles.css
│ │ │ └── variables/
│ │ │ ├── marking.md
│ │ │ ├── variables1-download.html
│ │ │ ├── variables1.html
│ │ │ ├── variables2-download.html
│ │ │ ├── variables2.html
│ │ │ ├── variables3-download.html
│ │ │ └── variables3.html
│ │ ├── troubleshooting/
│ │ │ └── number-game-errors.html
│ │ └── what-is-js/
│ │ ├── apply-javascript-external.html
│ │ ├── apply-javascript-internal.html
│ │ ├── apply-javascript.html
│ │ ├── javascript-label.html
│ │ └── script.js
│ └── oojs/
│ ├── advanced/
│ │ ├── es2015-class-inheritance.html
│ │ ├── es2015-getters-setters.html
│ │ ├── oojs-class-inheritance-finished.html
│ │ ├── oojs-class-inheritance-start.html
│ │ ├── oojs-class-inheritance-student.html
│ │ └── oojs-class-prototype.html
│ ├── assessment/
│ │ ├── index.html
│ │ ├── main.js
│ │ ├── marking-guide.md
│ │ └── style.css
│ ├── bouncing-balls/
│ │ ├── index-finished.html
│ │ ├── index.html
│ │ ├── main-finished.js
│ │ ├── main.js
│ │ └── style.css
│ ├── introduction/
│ │ ├── oojs-class-finished.html
│ │ ├── oojs-class-further-exercises.html
│ │ ├── oojs-finished.html
│ │ └── oojs.html
│ ├── json/
│ │ ├── JSONTest.html
│ │ ├── heroes-finished-json-parse.html
│ │ ├── heroes-finished.html
│ │ ├── heroes.html
│ │ ├── style.css
│ │ └── superheroes.json
│ └── tasks/
│ ├── json/
│ │ ├── json1-download.html
│ │ ├── json1.html
│ │ ├── marking.md
│ │ └── sample.json
│ ├── object-basics/
│ │ ├── marking.md
│ │ ├── object-basics1-download.html
│ │ ├── object-basics1.html
│ │ ├── object-basics2-download.html
│ │ ├── object-basics2.html
│ │ ├── object-basics3-download.html
│ │ ├── object-basics3.html
│ │ ├── object-basics4-download.html
│ │ └── object-basics4.html
│ ├── oojs/
│ │ ├── marking.md
│ │ ├── oojs1-download.html
│ │ ├── oojs1.html
│ │ ├── oojs2-download.html
│ │ └── oojs2.html
│ ├── playable.js
│ └── styles.css
└── tools-testing/
└── cross-browser-testing/
├── accessibility/
│ ├── bad-semantics.html
│ ├── fake-div-buttons.html
│ ├── good-semantics.html
│ └── native-keyboard-accessibility.html
├── automation/
│ ├── call_bstack.js
│ ├── call_sauce.js
│ ├── gulpfile.js
│ ├── index.html
│ ├── main.js
│ └── style.css
├── feature-detection/
│ ├── basic-styling.css
│ ├── css-feature-detect-finished.html
│ ├── css-feature-detect.html
│ ├── flex-layout.css
│ ├── float-layout.css
│ ├── modernizr-css.css
│ ├── modernizr-css.html
│ ├── modernizr-custom.js
│ ├── modernizr-js.html
│ ├── supports-feature-detect.html
│ └── supports-styling.css
├── html-css/
│ ├── MooTools-Core-1.6.0.js
│ ├── button-with-fallback.html
│ ├── forms-test.html
│ ├── selectivizr-example-start.html
│ ├── selectivizr-example.html
│ ├── selectivizr-min.js
│ └── style.css
├── javascript/
│ ├── .eslintrc.js
│ ├── arrow-function.html
│ ├── bad-for-loop.html
│ ├── broken-js-test.js
│ ├── es6-promise.js
│ ├── fetch-broken/
│ │ ├── index.html
│ │ ├── script.js
│ │ └── style.css
│ ├── fetch-fixed/
│ │ ├── index.html
│ │ ├── script.js
│ │ └── style.css
│ ├── fetch-polyfill-finished.html
│ ├── fetch-polyfill-only-when-needed.html
│ ├── fetch-polyfill.html
│ ├── fetch.js
│ ├── good-for-loop.html
│ ├── polyfills.js
│ └── style.css
├── selenium/
│ ├── bstack_google_test.js
│ ├── google_test.js
│ ├── google_test_multiple.js
│ ├── google_test_remote.js
│ ├── mocha_test.js
│ ├── quick_test.js
│ └── sauce_google_test.js
└── strategies/
└── hidden-info-panel.html
================================================
FILE CONTENTS
================================================
================================================
FILE: .github/CODEOWNERS
================================================
# ----------------------------------------------------------------------------
# CODEOWNERS
# ----------------------------------------------------------------------------
# Order is important. The last matching pattern takes precedence.
# See: https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners
# ----------------------------------------------------------------------------
* @mdn/content-team
/.github/workflows/ @mdn/engineering
/.github/CODEOWNERS @mdn/content-team @mdn/engineering
/SECURITY.md @mdn/engineering
================================================
FILE: .gitignore
================================================
*.DS_Store
================================================
FILE: .prettierignore
================================================
# This .prettierignore file uses .gitignore syntax
# see https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore
/css/introduction-to-css/debugging-css/style.css
/html/introduction-to-html/debugging-html/debug-example.html
/tools-testing/cross-browser-testing/javascript/broken-js-test.js
================================================
FILE: .prettierrc.json
================================================
{
"bracketSameLine": true
}
================================================
FILE: .vscode/cspell.json
================================================
{
"$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json",
"version": "0.2",
"language": "en-us",
"languageId": "*",
"dictionaries": [
"bash",
"css",
"cpp",
"django",
"filetypes",
"fonts",
"fullstack",
"html",
"latex",
"lorem-ipsum",
"markdown",
"node",
"npm",
"project-words",
"python",
"softwareTerms",
"svelte",
"typescript"
],
"ignorePaths": [
".vscode/cspell.json",
".vscode/extensions.json",
".markdownlint-cli2.jsonc",
"**/*.ogg",
"**/*.mp3",
"**/*.mp4",
"html/introduction-to-html/debugging-html/debug-example.html",
"css/styling-text/**/Lovato-Light-demo.html",
"css/styling-text/**/Lovato-Light-webfont.svg",
"javascript/apis/drawing-graphics/**/*/three.min.js",
"tools-testing/cross-browser-testing/**/*.js",
"css/**/*.otf"
],
"ignoreRegExpList": [
"#[\\w-]*",
"aria-activedescendant=\"(?:[^\\\"]+|\\.)*\"",
"aria-controls=\"(?:[^\\\"]+|\\.)*\"",
"aria-describedby=\"(?:[^\\\"]+|\\.)*\"",
"aria-details=\"(?:[^\\\"]+|\\.)*\"",
"aria-errormessage=\"(?:[^\\\"]+|\\.)*\"",
"aria-flowto=\"(?:[^\\\"]+|\\.)*\"",
"aria-labelledby=\"(?:[^\\\"]+|\\.)*\"",
"aria-owns=\"(?:[^\\\"]+|\\.)*\"",
"Base64",
"class=\"(?:[^\\\"]+|\\.)*\"",
"data-test-id=\"(?:[^\\\"]+|\\.)*\"",
"EscapeCharacters",
"for=\"(?:[^\\\"]+|\\.)*\"",
"HexValues",
"href=\"(?:[^\\\"]+|\\.)*\"",
"id=\"(?:[^\\\"]+|\\.)*\"",
"lang=\".*\">.*</",
"src=\"(?:[^\\\"]+|\\.)*\"",
"url\\(\"data\\:image/svg\\+xml.*\"\\)[,;]",
"Urls"
],
"allowCompoundWords": true,
"dictionaryDefinitions": [
{
"name": "project-words",
"path": "./project-words.txt",
"addWords": true
}
]
}
================================================
FILE: .vscode/extensions.json
================================================
{
"recommendations": [
"davidanson.vscode-markdownlint",
"esbenp.prettier-vscode",
"streetsidesoftware.code-spell-checker"
]
}
================================================
FILE: .vscode/project-words.txt
================================================
Bublé
CEST
döner
Dwindlings
gastropub
Griffiths
Halloumi
iframes
kombucha
Kruse
Leia
Listicle
Lovato
Modernizr
ninjitsu
Nyancat
OOJS
poutine
Quokka
Renan
Selectivizr
Siouxsie
snape
Swindoll
umami
venmo
WASD
WEBVTT
XOXO
zantroke
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Community Participation Guidelines
This repository is governed by Mozilla's code of conduct and etiquette guidelines.
For more details, please read the
[Mozilla Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/).
## How to Report
For more information on how to report violations of the Community Participation Guidelines, please read our '[How to Report](https://www.mozilla.org/about/governance/policies/participation/reporting/)' page.
<!--
## Project Specific Etiquette
In some cases, there will be additional project etiquette i.e.: (https://bugzilla.mozilla.org/page.cgi?id=etiquette.html).
Please update for your project.
-->
================================================
FILE: LICENSE
================================================
CC0 1.0 Universal
Statement of Purpose
The laws of most jurisdictions throughout the world automatically confer
exclusive Copyright and Related Rights (defined below) upon the creator and
subsequent owner(s) (each and all, an "owner") of an original work of
authorship and/or a database (each, a "Work").
Certain owners wish to permanently relinquish those rights to a Work for the
purpose of contributing to a commons of creative, cultural and scientific
works ("Commons") that the public can reliably and without fear of later
claims of infringement build upon, modify, incorporate in other works, reuse
and redistribute as freely as possible in any form whatsoever and for any
purposes, including without limitation commercial purposes. These owners may
contribute to the Commons to promote the ideal of a free culture and the
further production of creative, cultural and scientific works, or to gain
reputation or greater distribution for their Work in part through the use and
efforts of others.
For these and/or other purposes and motivations, and without any expectation
of additional consideration or compensation, the person associating CC0 with a
Work (the "Affirmer"), to the extent that he or she is an owner of Copyright
and Related Rights in the Work, voluntarily elects to apply CC0 to the Work
and publicly distribute the Work under its terms, with knowledge of his or her
Copyright and Related Rights in the Work and the meaning and intended legal
effect of CC0 on those rights.
1. Copyright and Related Rights. A Work made available under CC0 may be
protected by copyright and related or neighboring rights ("Copyright and
Related Rights"). Copyright and Related Rights include, but are not limited
to, the following:
i. the right to reproduce, adapt, distribute, perform, display, communicate,
and translate a Work;
ii. moral rights retained by the original author(s) and/or performer(s);
iii. publicity and privacy rights pertaining to a person's image or likeness
depicted in a Work;
iv. rights protecting against unfair competition in regards to a Work,
subject to the limitations in paragraph 4(a), below;
v. rights protecting the extraction, dissemination, use and reuse of data in
a Work;
vi. database rights (such as those arising under Directive 96/9/EC of the
European Parliament and of the Council of 11 March 1996 on the legal
protection of databases, and under any national implementation thereof,
including any amended or successor version of such directive); and
vii. other similar, equivalent or corresponding rights throughout the world
based on applicable law or treaty, and any national implementations thereof.
2. Waiver. To the greatest extent permitted by, but not in contravention of,
applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and
unconditionally waives, abandons, and surrenders all of Affirmer's Copyright
and Related Rights and associated claims and causes of action, whether now
known or unknown (including existing as well as future claims and causes of
action), in the Work (i) in all territories worldwide, (ii) for the maximum
duration provided by applicable law or treaty (including future time
extensions), (iii) in any current or future medium and for any number of
copies, and (iv) for any purpose whatsoever, including without limitation
commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes
the Waiver for the benefit of each member of the public at large and to the
detriment of Affirmer's heirs and successors, fully intending that such Waiver
shall not be subject to revocation, rescission, cancellation, termination, or
any other legal or equitable action to disrupt the quiet enjoyment of the Work
by the public as contemplated by Affirmer's express Statement of Purpose.
3. Public License Fallback. Should any part of the Waiver for any reason be
judged legally invalid or ineffective under applicable law, then the Waiver
shall be preserved to the maximum extent permitted taking into account
Affirmer's express Statement of Purpose. In addition, to the extent the Waiver
is so judged Affirmer hereby grants to each affected person a royalty-free,
non transferable, non sublicensable, non exclusive, irrevocable and
unconditional license to exercise Affirmer's Copyright and Related Rights in
the Work (i) in all territories worldwide, (ii) for the maximum duration
provided by applicable law or treaty (including future time extensions), (iii)
in any current or future medium and for any number of copies, and (iv) for any
purpose whatsoever, including without limitation commercial, advertising or
promotional purposes (the "License"). The License shall be deemed effective as
of the date CC0 was applied by Affirmer to the Work. Should any part of the
License for any reason be judged legally invalid or ineffective under
applicable law, such partial invalidity or ineffectiveness shall not
invalidate the remainder of the License, and in such case Affirmer hereby
affirms that he or she will not (i) exercise any of his or her remaining
Copyright and Related Rights in the Work or (ii) assert any associated claims
and causes of action with respect to the Work, in either case contrary to
Affirmer's express Statement of Purpose.
4. Limitations and Disclaimers.
a. No trademark or patent rights held by Affirmer are waived, abandoned,
surrendered, licensed or otherwise affected by this document.
b. Affirmer offers the Work as-is and makes no representations or warranties
of any kind concerning the Work, express, implied, statutory or otherwise,
including without limitation warranties of title, merchantability, fitness
for a particular purpose, non infringement, or the absence of latent or
other defects, accuracy, or the present or absence of errors, whether or not
discoverable, all to the greatest extent permissible under applicable law.
c. Affirmer disclaims responsibility for clearing rights of other persons
that may apply to the Work or any use thereof, including without limitation
any person's Copyright and Related Rights in the Work. Further, Affirmer
disclaims responsibility for obtaining any necessary consents, permissions
or other rights required for any use of the Work.
d. Affirmer understands and acknowledges that Creative Commons is not a
party to this document and has no duty or obligation with respect to this
CC0 or use of the Work.
For more information, please see
<http://creativecommons.org/publicdomain/zero/1.0/>
================================================
FILE: README.md
================================================
# learning-area
Welcome to the GitHub repository for the [MDN Learning Area](https://developer.mozilla.org/en-US/Learn).
Most of the code examples shown and discussed in the Learning Area can be found here; the directories in the repo match the module structure of the articles.
The one exception is the [Server-side website programming](https://developer.mozilla.org/en-US/docs/Learn/Server-side) examples — we split these into two separate repositories to make them easier to manage:
* https://github.com/mdn/express-locallibrary-tutorial
* https://github.com/mdn/django-locallibrary-tutorial
================================================
FILE: SECURITY.md
================================================
# Security Policy
## Overview
This policy applies to MDN's website (`developer.mozilla.org`), backend services, and GitHub repositories in the [`mdn`](https://github.com/mdn) organization. Issues affecting other Mozilla products or services should be reported through the [Mozilla Security Bug Bounty Program](https://www.mozilla.org/en-US/security/bug-bounty/).
For non-security issues, please file a [content bug](https://github.com/mdn/content/issues/new/choose), a [website bug](https://github.com/mdn/fred/issues/new/choose) or a [content/feature suggestion](https://github.com/mdn/mdn/issues/new/choose).
## Reporting a Vulnerability
If you discover a potential security issue, please report it privately via <https://hackerone.com/mozilla>.
If you prefer not to use HackerOne, you can report it via <https://bugzilla.mozilla.org/form.web.bounty>.
## Bounty Program
Vulnerabilities in MDN may qualify for Mozilla's Bug Bounty Program. Eligibility and reward amounts are described on <https://hackerone.com/mozilla>.
Please use the above channels even if you are not interested in a bounty reward.
## Responsible Disclosure
Please do not publicly disclose details until Mozilla's security team and the MDN engineering team have verified and fixed the issue.
We appreciate your efforts to keep MDN and its users safe.
================================================
FILE: accessibility/aria/aria-div-buttons.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>ARIA div buttons</title>
<style>
div {
background-color: rgb(240, 240, 240);
font-size: 11px;
font-family: sans-serif;
border: 1px outset rgb(218, 218, 218);
line-height: 20px;
padding: 0 6px;
width: 120px;
text-align: center;
border-radius: 5px;
margin-right: 10px;
cursor: pointer;
display: inline-block;
}
div:hover, div:focus {
font-weight: bold;
}
</style>
</head>
<body>
<h2>ARIA div buttons</h2>
<div data-message="This is from the first button" tabindex="0" role="button">Click me!</div>
<div data-message="This is from the second button" tabindex="0" role="button">Click me too!</div>
<div data-message="This is from the third button" tabindex="0" role="button">And me!</div>
<script>
const buttons = document.querySelectorAll('div');
for(let i = 0; i < buttons.length; i++) {
addHandler(buttons[i]);
}
function addHandler(button) {
button.onclick = function(e) {
let message = e.target.getAttribute('data-message');
alert(message);
}
}
document.onkeydown = function(e) {
if(e.keyCode === 13) { // The Enter/Return key
document.activeElement.onclick(e);
}
};
</script>
</body>
</html>
================================================
FILE: accessibility/aria/aria-live.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Random quotes</title>
<style>
html {
font-family: sans-serif;
}
h1 {
letter-spacing: 2px;
}
p {
line-height: 1.6;
}
section {
padding: 10px;
width: 400px;
background: #666;
text-shadow: 1px 1px 1px black;
color: white;
min-height: 150px;
}
</style>
</head>
<body>
<section aria-live="assertive" aria-atomic="true">
<h1>Random quote</h1>
<blockquote>
<p></p>
</blockquote>
</section>
<script>
const quotePara = document.querySelector("section p");
let quoteJson;
getQuotes("quotes.json").then((quotes) => {
quoteJson = quotes;
window.setInterval(showQuote, 10000);
});
async function getQuotes(url, callback) {
const response = await fetch(url);
return response.json();
}
function populateJson(response) {
quoteJson = response;
}
function showQuote() {
let random = Math.floor(Math.random() * 25);
quotePara.textContent = `${quoteJson[random].quote} -- ${quoteJson[random].author}`;
}
</script>
</body>
</html>
================================================
FILE: accessibility/aria/aria-no-live.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Random quotes</title>
<style>
html {
font-family: sans-serif;
}
h1 {
letter-spacing: 2px;
}
p {
line-height: 1.6;
}
section {
padding: 10px;
width: 400px;
background: #666;
text-shadow: 1px 1px 1px black;
color: white;
min-height: 150px;
}
</style>
</head>
<body>
<section>
<h1>Random quote</h1>
<blockquote>
<p></p>
</blockquote>
</section>
<script>
const quotePara = document.querySelector("section p");
let quoteJson;
getQuotes("quotes.json").then((quotes) => {
quoteJson = quotes;
window.setInterval(showQuote, 10000);
});
async function getQuotes(url, callback) {
const response = await fetch(url);
return response.json();
}
function populateJson(response) {
quoteJson = response;
}
function showQuote() {
let random = Math.floor(Math.random() * 25);
quotePara.textContent = `${quoteJson[random].quote} -- ${quoteJson[random].author}`;
}
</script>
</body>
</html>
================================================
FILE: accessibility/aria/aria-tabbed-info-box.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>ARIA tabbed info box</title>
<style>
/* General setup */
html {
font-family: sans-serif;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
/* info-box setup */
.info-box {
width: 450px;
height: 400px;
margin: 0 auto;
}
/* styling info-box tabs */
ul[role="tablist"] {
padding-left: 0;
margin-top: 0;
}
li[role="tab"] {
float: left;
list-style-type: none;
width: 150px;
display: inline-block;
line-height: 3;
background-color: red;
color: black;
text-align: center;
}
li[role="tab"]:focus, li[role="tab"]:hover {
background-color: #a60000;
color: white;
}
li[role="tab"].active {
background-color: #a60000;
color: white;
}
/* styling info-box panels */
.info-box .panels {
clear: both;
position: relative;
height: 352px;
}
.info-box article {
background-color: #a60000;
color: white;
position: absolute;
padding: 10px;
height: 352px;
top: 0;
left: 0;
}
.info-box .active-panel {
z-index: 1;
}
</style>
</head>
<body>
<section class="info-box">
<ul role="tablist">
<li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">Tab 1</li>
<li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0">Tab 2</li>
<li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0">Tab 3</li>
</ul>
<div class="panels">
<article class="active-panel" role="tabpanel" aria-hidden="false">
<h2>The first tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p>
</article>
<article role="tabpanel" aria-hidden="true">
<h2>The second tab</h2>
<p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p>
</article>
<article role="tabpanel" aria-hidden="true">
<h2>The third tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!</p>
<ol>
<li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
<li>Aliquam ut porttitor urna.</li>
<li>Nulla facilisi</li>
</ol>
</article>
</div>
</section>
<script>
let tabs = document.querySelectorAll('.info-box li');
let panels = document.querySelectorAll('.info-box article');
for(let i = 0; i < tabs.length; i++) {
let tab = tabs[i];
setTabHandler(tab);
}
function setTab(e) {
if(e.type === 'keypress' && e.keyCode !== 13) {
return;
}
let tabPos = Number(this.getAttribute('aria-posinset'))-1;
for(let i = 0; i < tabs.length; i++) {
if(tabs[i].getAttribute('class')) {
tabs[i].removeAttribute('class');
}
tabs[i].setAttribute('aria-selected', 'false');
}
this.setAttribute('class', 'active');
this.setAttribute('aria-selected', 'true');
for(let i = 0; i < panels.length; i++) {
if(panels[i].getAttribute('class')) {
panels[i].removeAttribute('class');
}
panels[i].setAttribute('aria-hidden', 'true');
}
panels[tabPos].setAttribute('class', 'active-panel');
panels[tabPos].setAttribute('aria-hidden', 'false');
}
function setTabHandler(tab) {
tab.addEventListener('click', setTab);
tab.addEventListener('keypress', setTab);
}
</script>
</body>
</html>
================================================
FILE: accessibility/aria/form-validation-checkbox-disabled.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Form validation example</title>
<style>
html {
font-family: sans-serif;
}
form {
background: #eee;
border-radius: 20px;
box-shadow: 1px 1px 1px black;
padding: 20px;
width: 330px;
}
label {
width: 160px;
float: left;
text-align: right;
padding: 4px;
margin-bottom: 20px;
}
input {
width: 130px;
float: right;
}
label, input {
font-size: 1em;
line-height: 1.5;
}
input[type="checkbox"] {
height: 24px;
}
div {
clear: both;
}
.errors {
background: yellow;
border-radius: 20px;
box-shadow: 1px 1px 1px black;
padding: 20px;
width: 300px;
position: absolute;
left: 390px;
}
.hidden-alert {
position: absolute;
left: -100%;
}
</style>
</head>
<body>
<h1>Form validation example</h1>
<div class="errors" role="alert" aria-relevant="all">
<ul>
</ul>
</div>
<p>Fields marked with an asterisk (*) are required.</p>
<form>
<div>
<label for="name">Enter your name*:</label>
<input type="text" name="name" id="name" aria-required="true">
</div>
<div>
<label for="age">Enter your age*:</label>
<input type="number" name="age" id="age" placeholder="Enter 1 to 150" aria-required="true">
</div>
<div>
<label for="musician">Musician:</label>
<input type="checkbox" name="musician" id="musician">
</div>
<div>
<label for="instruments">Instruments played*:</label>
<input type="text" name="instruments" id="instruments" aria-required="true">
</div>
<div>
<input type="submit">
</div>
<div></div>
</form>
<p class="hidden-alert" aria-live="assertive"></p>
<script src="validation-checkbox-disabled.js"></script>
</body>
</html>
================================================
FILE: accessibility/aria/form-validation-updated.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Form validation example</title>
<style>
html {
font-family: sans-serif;
}
form {
background: #eee;
border-radius: 20px;
box-shadow: 1px 1px 1px black;
padding: 20px;
width: 300px;
}
label {
width: 130px;
float: left;
text-align: right;
padding: 4px;
margin-bottom: 20px;
}
input {
width: 130px;
float: right;
}
label, input {
font-size: 1em;
line-height: 1.5;
}
div {
clear: both;
}
.errors {
background: yellow;
border-radius: 20px;
box-shadow: 1px 1px 1px black;
padding: 20px;
width: 300px;
position: absolute;
left: 360px;
}
</style>
</head>
<body>
<h1>Form validation example</h1>
<div class="errors" role="alert" aria-relevant="all">
<ul>
</ul>
</div>
<p>Fields marked with an asterisk (*) are required.</p>
<form>
<div>
<label for="name">Enter your name*:</label>
<input type="text" name="name" id="name" aria-required="true">
</div>
<div>
<label for="age">Enter your age*:</label>
<input type="number" name="age" id="age" placeholder="Enter 1 to 150" aria-required="true">
</div>
<div>
<input type="submit">
</div>
<div></div>
</form>
<script src="validation.js"></script>
</body>
</html>
================================================
FILE: accessibility/aria/quotes.json
================================================
[
{
"quote" : "Life is about making an impact, not making an income.",
"author" : "Kevin Kruse"
},
{
"quote" : "Whatever the mind of man can conceive and believe, it can achieve.",
"author" : "Napoleon Hill"
},
{
"quote" : "Strive not to be a success, but rather to be of value.",
"author" : "Albert Einstein"
},
{
"quote" : "Two roads diverged in a wood, and I—I took the one less traveled by, And that has made all the difference",
"author" : "Robert Frost"
},
{
"quote" : "I attribute my success to this: I never gave or took any excuse.",
"author" : "Florence Nightingale"
},
{
"quote" : "You miss 100% of the shots you don’t take.",
"author" : "Wayne Gretzky"
},
{
"quote" : "I’ve missed more than 9000 shots in my career. I’ve lost almost 300 games. 26 times I’ve been trusted to take the game winning shot and missed. I’ve failed over and over and over again in my life. And that is why I succeed.",
"author" : "Michael Jordan"
},
{
"quote" : "The most difficult thing is the decision to act, the rest is merely tenacity.",
"author" : "Amelia Earhart"
},
{
"quote" : "Every strike brings me closer to the next home run.",
"author" : "Babe Ruth"
},
{
"quote" : "Definiteness of purpose is the starting point of all achievement.",
"author" : "W. Clement Stone"
},
{
"quote" : "Life isn’t about getting and having, it’s about giving and being.",
"author" : "Kevin Kruse"
},
{
"quote" : "Life is what happens to you while you’re busy making other plans.",
"author" : "John Lennon"
},
{
"quote" : "We become what we think about.",
"author" : "Earl Nightingale"
},
{
"quote" : "Twenty years from now you will be more disappointed by the things that you didn’t do than by the ones you did do, so throw off the bowlines, sail away from safe harbor, catch the trade winds in your sails. Explore, Dream, Discover.",
"author" : "Mark Twain"
},
{
"quote" : "Life is 10% what happens to me and 90% of how I react to it.",
"author" : "Charles Swindoll"
},
{
"quote" : "The most common way people give up their power is by thinking they don’t have any.",
"author" : "Alice Walker"
},
{
"quote" : "The mind is everything. What you think you become.",
"author" : "Buddha"
},
{
"quote" : "The best time to plant a tree was 20 years ago. The second best time is now.",
"author" : "Chinese Proverb"
},
{
"quote" : "An unexamined life is not worth living.",
"author" : "Socrates"
},
{
"quote" : "Eighty percent of success is showing up.",
"author" : "Woody Allen"
},
{
"quote" : "Your time is limited, so don’t waste it living someone else’s life.",
"author" : "Steve Jobs"
},
{
"quote" : "Winning isn’t everything, but wanting to win is.",
"author" : "Vince Lombardi"
},
{
"quote" : "I am not a product of my circumstances. I am a product of my decisions.",
"author" : "Stephen Covey"
},
{
"quote" : "Every child is an artist. The problem is how to remain an artist once he grows up.",
"author" : "Pablo Picasso"
},
{
"quote" : "You can never cross the ocean until you have the courage to lose sight of the shore.",
"author" : "Christopher Columbus"
}
]
================================================
FILE: accessibility/aria/validation-checkbox-disabled.js
================================================
const inputs = document.querySelectorAll('input');
const labels = document.querySelectorAll('label');
const form = document.querySelector('form');
let formItems = [];
const errorField = document.querySelector('.errors');
const errorList = document.querySelector('.errors ul');
let checkbox;
let checkboxLabel;
const hiddenAlert = document.querySelector('.hidden-alert');
for(let i = 0; i < inputs.length-1; i++) {
if(inputs[i].type !== 'checkbox') {
let obj = {};
obj.label = labels[i];
obj.input = inputs[i];
formItems.push(obj);
} else {
checkbox = inputs[i];
checkboxLabel = labels[i];
}
}
errorField.style.left = '-100%';
toggleMusician(false);
form.onsubmit = validate;
function validate(e) {
errorList.innerHTML = '';
for(let i = 0; i < formItems.length; i++) {
let testItem = formItems[i];
if(testItem.input.value === '' && testItem.input.disabled === false) {
errorField.style.left = '390px';
createLink(testItem);
}
}
if(errorList.innerHTML !== '') {
e.preventDefault();
}
}
function createLink(testItem) {
const listItem = document.createElement('li');
const anchor = document.createElement('a');
anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.';
anchor.href = '#' + testItem.input.name;
anchor.onclick = function() {
testItem.input.focus();
};
listItem.appendChild(anchor);
errorList.appendChild(listItem);
}
checkbox.onchange = function() {
if(checkbox.checked) {
toggleMusician(true);
} else {
toggleMusician(false);
}
};
function toggleMusician(bool) {
let instruItem = formItems[formItems.length-1];
if(bool) {
instruItem.input.disabled = false;
instruItem.label.style.color = '#000';
instruItem.input.setAttribute('aria-disabled', 'false');
hiddenAlert.textContent = 'Instruments played field now enabled; use it to tell us what you play.';
} else {
instruItem.input.disabled = true;
instruItem.label.style.color = '#999';
instruItem.input.setAttribute('aria-disabled', 'true');
hiddenAlert.textContent = 'Instruments played field now disabled.';
}
}
================================================
FILE: accessibility/aria/validation.js
================================================
const inputs = document.querySelectorAll('input');
const labels = document.querySelectorAll('label');
const form = document.querySelector('form');
let formItems = [];
const errorField = document.querySelector('.errors');
const errorList = document.querySelector('.errors ul');
for(let i = 0; i < inputs.length-1; i++) {
let obj = {};
obj.label = labels[i];
obj.input = inputs[i];
formItems.push(obj);
}
errorField.style.left = '-100%';
form.onsubmit = validate;
function validate(e) {
errorList.innerHTML = '';
for(let i = 0; i < formItems.length; i++) {
let testItem = formItems[i];
if(testItem.input.value === '') {
errorField.style.left = '360px';
createLink(testItem);
}
}
if(errorList.innerHTML !== '') {
e.preventDefault();
}
}
function createLink(testItem) {
const listItem = document.createElement('li');
const anchor = document.createElement('a');
anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.';
anchor.href = '#' + testItem.input.name;
anchor.onclick = function() {
testItem.input.focus();
};
listItem.appendChild(anchor);
errorList.appendChild(listItem);
}
================================================
FILE: accessibility/aria/website-aria-roles/index.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Example website with ARIA roles</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300%7CSonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Here is our main header that is used accross all the pages of our website -->
<header>
<h1>Header</h1>
<!-- Even is it's not mandatory, it's common practice to put the main navigation menu within the main header -->
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our team</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- A Search form is another common non-linear way to navigate through a website. -->
<form role="search">
<input type="search" name="q" placeholder="Search query" aria-label="Search through site content">
<input type="submit" value="Go!">
</form>
</nav>
</header>
<!-- Here is our page's main content -->
<main>
<!-- It contains an article -->
<article>
<h2>Article heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
<h3>subsection</h3>
<p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
<p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
<h3>Another subsection</h3>
<p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
<p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
</article>
<!-- the aside content can also be nested within the main content -->
<aside>
<h2>Related</h2>
<ul>
<li><a href="#">Oh I do like to be beside the seaside</a></li>
<li><a href="#">Oh I do like to be beside the sea</a></li>
<li><a href="#">Although in the North of England</a></li>
<li><a href="#">It never stops raining</a></li>
<li><a href="#">Oh well...</a></li>
</ul>
</aside>
</main>
<!-- And here is our main footer that is used across all the pages of our website -->
<footer>
<p>©Copyright 2050 by nobody. All rights reversed.</p>
</footer>
</body>
</html>
================================================
FILE: accessibility/aria/website-aria-roles/style.css
================================================
/* || General setup */
html, body {
margin: 0;
padding: 0;
}
html {
font-size: 10px;
background-color: #a9a9a9;
}
body {
width: 70%;
margin: 0 auto;
}
/* || typography */
h1, h2, h3 {
font-family: 'Sonsie One', cursive;
color: #2a2a2a;
}
p, input, li {
font-family: 'Open Sans Condensed', sans-serif;
color: #2a2a2a;
}
h1 {
font-size: 4rem;
text-align: center;
color: white;
text-shadow: 2px 2px 10px black;
}
h2 {
font-size: 3rem;
text-align: center;
}
h3 {
font-size: 2.2rem;
}
p, li {
font-size: 1.6rem;
line-height: 1.5;
}
/* || header layout */
header {
margin-bottom: 10px;
}
nav, article, aside, footer {
background-color: white;
padding: 1%;
}
nav {
height: 50px;
background-color: ff80ff;
display: flex;
}
nav ul {
padding: 0;
list-style-type: none;
flex: 2;
display: flex;
}
nav li {
display: inline;
text-align: center;
flex: 1;
}
nav a {
display: inline-block;
font-size: 2rem;
text-transform: uppercase;
text-decoration: none;
color: black;
}
nav form {
flex: 1;
display: flex;
align-items: center;
height: 100%;
padding: 0 2em;
}
input {
font-size: 1.6rem;
height: 32px;
}
input[type="search"] {
flex: 3;
}
input[type="submit"] {
flex: 1;
margin-left: 1rem;
background: #333;
border: 0;
color: white;
}
/* || main layout */
main {
display: flex;
}
article {
flex: 4;
}
aside {
flex: 1;
margin-left: 10px;
background-color: #ff80ff;
}
aside li {
padding-bottom: 10px;
}
footer {
margin-top: 10px;
}
================================================
FILE: accessibility/aria/website-no-roles/index.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Example website structure</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300%7CSonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Here is our main header that is used accross all the pages of our website -->
<header>
<h1>Header</h1>
<!-- Even is it's not mandatory, it's common practice to put the main navigation menu within the main header -->
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our team</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- A Search form is another common non-linear way to navigate through a website. -->
<form>
<input type="search" name="q" placeholder="Search query">
<input type="submit" value="Go!">
</form>
</nav>
</header>
<!-- Here is our page's main content -->
<main>
<!-- It contains an article -->
<article>
<h2>Article heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
<h3>subsection</h3>
<p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
<p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
<h3>Another subsection</h3>
<p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
<p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
</article>
<!-- the aside content can also be nested within the main content -->
<aside>
<h2>Related</h2>
<ul>
<li><a href="#">Oh I do like to be beside the seaside</a></li>
<li><a href="#">Oh I do like to be beside the sea</a></li>
<li><a href="#">Although in the North of England</a></li>
<li><a href="#">It never stops raining</a></li>
<li><a href="#">Oh well...</a></li>
</ul>
</aside>
</main>
<!-- And here is our main footer that is used across all the pages of our website -->
<footer>
<p>©Copyright 2050 by nobody. All rights reversed.</p>
</footer>
</body>
</html>
================================================
FILE: accessibility/aria/website-no-roles/style.css
================================================
/* || General setup */
html, body {
margin: 0;
padding: 0;
}
html {
font-size: 10px;
background-color: #a9a9a9;
}
body {
width: 70%;
margin: 0 auto;
}
/* || typography */
h1, h2, h3 {
font-family: 'Sonsie One', cursive;
color: #2a2a2a;
}
p, input, li {
font-family: 'Open Sans Condensed', sans-serif;
color: #2a2a2a;
}
h1 {
font-size: 4rem;
text-align: center;
color: white;
text-shadow: 2px 2px 10px black;
}
h2 {
font-size: 3rem;
text-align: center;
}
h3 {
font-size: 2.2rem;
}
p, li {
font-size: 1.6rem;
line-height: 1.5;
}
/* || header layout */
header {
margin-bottom: 10px;
}
nav, article, aside, footer {
background-color: white;
padding: 1%;
}
nav {
height: 50px;
background-color: ff80ff;
display: flex;
}
nav ul {
padding: 0;
list-style-type: none;
flex: 2;
display: flex;
}
nav li {
display: inline;
text-align: center;
flex: 1;
}
nav a {
display: inline-block;
font-size: 2rem;
text-transform: uppercase;
text-decoration: none;
color: black;
}
nav form {
flex: 1;
display: flex;
align-items: center;
height: 100%;
padding: 0 2em;
}
input {
font-size: 1.6rem;
height: 32px;
}
input[type="search"] {
flex: 3;
}
input[type="submit"] {
flex: 1;
margin-left: 1rem;
background: #333;
border: 0;
color: white;
}
/* || main layout */
main {
display: flex;
}
article {
flex: 4;
}
aside {
flex: 1;
margin-left: 10px;
background-color: #ff80ff;
}
aside li {
padding-bottom: 10px;
}
footer {
margin-top: 10px;
}
================================================
FILE: accessibility/assessment-finished/index.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Accessibility assessment</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300%7CSonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Welcome to our wildlife website</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our team</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Blog</a></li>
</ul>
<form class="search">
<input type="search" name="q" placeholder="Search query" aria-label="Search through site content">
<input type="submit" value="Go!">
</form>
</nav>
<main>
<article>
<h2>The trouble with Bears</h2>
<p>By Evan Wild</p>
<p>Tall, lumbering, angry, dangerous. The real live bears of this world are proud, independent creatures, self-serving and always on the hunt for food. Nothing like the bears you see on TV, like Baloo from renowned documentary, The Jungle Book.</p>
<p>So what are bears really like, and why does the world's media portray them with such a skewed vision? In this article we try to answer those questions, and give you a real insight into the life of the bear.</p>
<h3>Types of bear</h3>
<p>Bears come in two varieties — large and medium. You don't get small bears. If you have seen a small bear, then it was in fact probably a baby bear (cub) from another species.</p>
<p>Bears can also be classified in terms of their habitat — both large and medium bears are just as at home in urban areas as they are in the countryside. Different habitats encourange different behaviour however, as you'll find out below. The below table also gives you some useful facts about bears.</p>
<table summary="Useful statistics about wild and urban bears">
<thead>
<tr>
<th scope="col">Bear Type</th>
<th scope="col">Coat</th>
<th scope="col">Adult size</th>
<th scope="col">Habitat</th>
<th scope="col">Lifespan</th>
<th scope="col">Diet</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Wild</th>
<td>Brown or black</td>
<td>1.4 to 2.8 meters</td>
<td>Woods and forests</td>
<td>25 to 28 years</td>
<td>Fish, meat, plants</td>
</tr>
<tr>
<th scope="row">Urban</th>
<td>North Face</td>
<td>18 to 22</td>
<td>Condos and coffee shops</td>
<td>20 to 32 years</td>
<td>Starbucks, sushi</td>
</tr>
</tbody>
</table>
<h3>Habitats and Eating habits</h3>
<p>Wild bears eat a variety of meat, fish, fruit, nuts, and other naturally growing ingredients. In general they will hunt for food themselves in woodland or rivers, but at a push they will track down their sustenance from farms or country houses. They tend to live in relative isolation, in caves, tents, or cottages. The below image shows <span id="wild-label">a big brown wild bear, standing in a river looking for fish to eat</span>.</p>
<img src="media/wild-bear.jpg" aria-labelledby="wild-label">
<p>Urban (gentrified) bears on the other hand have largely abandoned the old ways. They will hunt other urban creatures if necessary (including other predators like rats and foxes), but prefer to scavenge from readily available urban food outlets like dumpsters, bins, and fast food joints. When food has proven scarce, urban bears have even been known to break into people's kitchens and steal essentials like baked beans, ready meals, and microwave ovens. Below you can see <span id="urban-label">an urban polar bear, looking through the railings of his garden while contemplating whether to eat at Nandos or Taco Bell</span>.</p>
<img src="media/urban-bear.jpg" aria-labelledby="urban-label">
<p>Urban bears will sleep anywhere they can, from bus shelters and parks, to the toilets in McDonald's, to their own apartment.</p>
<h3>Mating rituals</h3>
<p>Bears are romantic creatures by nature, and will naturally look for a mate that they can spend the rest of their lives with. They will woo a potential suitor by making their dwelling look attractive — for example with cave paintings or a bed of reeds in the case of a wild bear, and mood lighting and a Michael Bublé CD in the case of an urban bear.</p>
<p>The following audio clip contains a fact file providing more details about bear mating rituals, along with samples and quotes from experts. You can also access a <a href="transcript.html">text transcript of the audio clip</a>.</p>
<audio controls>
<source src="media/bear.mp3" type="audio/mp3">
<source src="media/bear.ogg" type="audio/ogg">
<p>It looks like your browser doesn't support HTML5 audio players. Here is a <a href="bear.mp3">direct link to the audio file</a> instead.</p>
</audio>
<aside>
<h3>About the author</h3>
<p>Evan Wild is an unemployed plumber from Doncaster, who has been really "in to" wildlife since childhood. He once went to Chester Zoo on holiday, but got ill after eating a döner kebab.
<p>He has never seen a bear, but once read a Daily Mail article about them, and thinks they sound cool.</p>
</aside>
<section class="comments">
<button class="show-hide">Show comments</button>
<div class="comment-wrapper">
<h2>Add comment</h2>
<form class="comment-form">
<div class="flex-pair">
<label for="name">Your name:</label>
<input type="text" name="name" id="name" placeholder="Enter your name">
</div>
<div class="flex-pair">
<label for="comment">Your comment:</label>
<input type="text" name="comment" id="comment" placeholder="Enter your comment">
</div>
<div>
<input type="submit" value="Submit comment">
</div>
</form>
<h2>Comments</h2>
<ul class="comment-container">
<li>
<p>Bob Fossil</p>
<p>Oh I am so glad you taught me all about the big brown angry guys in the woods. With their sniffing little noses and their bad attitudes, they can sure be a menace — I was thinking of putting them all in a truck and driving them outta here. I run a zoo, you know.</p>
</li>
</ul>
</div>
</section>
</article>
<div class="secondary">
<h2>Related</h2>
<ul>
<li><a href="#">The trouble with Bees</a></li>
<li><a href="#">The trouble with Otters</a></li>
<li><a href="#">The trouble with Penguins</a></li>
<li><a href="#">The trouble with Octopi</a></li>
<li><a href="#">The trouble with Lemurs</a></li>
</ul>
</div>
</main>
<footer>
<p>©Copyright 2050 by nobody. All rights reversed.</p>
</footer>
<script src="main.js"></script>
</body>
</html>
================================================
FILE: accessibility/assessment-finished/main.js
================================================
// functionality for showing/hiding the comments section
const showHideBtn = document.querySelector('.show-hide');
const commentWrapper = document.querySelector('.comment-wrapper');
commentWrapper.style.display = 'none';
showHideBtn.onclick = function() {
let showHideText = showHideBtn.textContent;
if(showHideText === 'Show comments') {
showHideBtn.textContent = 'Hide comments';
commentWrapper.style.display = 'block';
} else {
showHideBtn.textContent = 'Show comments';
commentWrapper.style.display = 'none';
}
};
// functionality for adding a new comment via the comments form
const form = document.querySelector('.comment-form');
const nameField = document.querySelector('#name');
const commentField = document.querySelector('#comment');
const list = document.querySelector('.comment-container');
form.onsubmit = function(e) {
e.preventDefault();
submitComment();
};
function submitComment() {
const listItem = document.createElement('li');
const namePara = document.createElement('p');
const commentPara = document.createElement('p');
const nameValue = nameField.value;
const commentValue = commentField.value;
namePara.textContent = nameValue;
commentPara.textContent = commentValue;
list.appendChild(listItem);
listItem.appendChild(namePara);
listItem.appendChild(commentPara);
nameField.value = '';
commentField.value = '';
}
================================================
FILE: accessibility/assessment-finished/marking-guide.md
================================================
# Marking guide for "Accessibility troubleshooting"
The following guide outlines a marking guide for the MDN Learning Area Accessibility Topic — [Accessibility troubleshooting](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting). Each subtask detailed in the assessment is listed below, along with an explanation of how many marks the task is worth, and the mark breakdown.
Note: These are guidelines, not set in stone rules — you are of course free to use your judgement on mark awarding when you meet an edge case, or something that isn't clear cut.
The overall mark awarded is out of 37. Work out their final mark, and then divide by 37 and multiply by 100 to give a percentage mark. For reference, you can find a [finished version of the site](index.html) that would be awarded top marks.
## Color
<dl>
<dt>The text is difficult to read because of the current color scheme. Can you do a test of the current color contrast (text/background), report the results of the test, and then fix it by changing the assigned colors?</dt>
<dd>Two marks for this — one for checking the current text/background contrast in a checker like WebAIM's [Color Contrast Checker](http://webaim.org/resources/contrastchecker/) and reporting the results in some way, and one for updating the current color scheme to one with good contrast (i.e. passes WCAG AA in the checker).</dd>
</dl>
## Semantic HTML
<dl>
<dt>The content is still not very accessible - report on what happens when you try to navigate it using a screenreader.</dt>
<dd>One mark; Your report should give some kind of indication that you can't jump between headings and use them as signposts, and you can't even tell where headings and paragraphs start and end.</dd>
<dt>Can you update the article text to make it easier for screenreader users to navigate?</dt>
<dd>Eight marks.
<ul>
<li>The line breaks (<code><br></code> tags) all need to be removed (2).</li>
<li>The <code><font></code> elements need to be replaced with appropriate heading elements (<code><h1></code>, <code><h2></code>, <code><h3></code>) (2).</li>
<li>The paragraphs need to be wrapped in paragraph elements (<code><p></code>)(2).</li>
<li>In the CSS file, <code>font[size="7"]</code>/<code>font[size="6"]</code>/<code>font[size="5"]</code> need to be replaced with <code>h1</code>/<code>h2</code>/<code>h3</code>.</li>
</ul>
</dd>
<dt>The navigation menu part of the site (wrapped in <code><div class="nav"></div></code>) could be made more accessible by putting it in a proper HTML5 semantic element. Which one should it be updated to? Make the update.</dt>
<dd>Three marks.
<ul>
<li>The <code><div class="nav"></div></code> needs be replaced with <code><nav></nav></code></li>
<li>In the CSS file, instances of <code>div[class="nav"]</code> need to be replaced with <code>nav</code>.</li>
</ul>
</dd>
</dl>
## The images
<dl>
<dt>The images are currently inaccessible to screenreader users. Can you fix this?</dt>
<dd>Three marks. You can fix this by adding in alternative text in any suitable way; see <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives</a> — describing the image in the text and perhaps also using <code>aria-labelledby</code> to link the two is good. you could also use a plain old <code>alt</code> attribute.</dd>
</dl>
## The audio player
<dl>
<dt>The audio isn't accessible to hearing impaired (deaf) people - can you add some kind of accessible alternative for these users?</dt>
<dd>Two marks. Any transcript system works for this simple example - a link to a separate file, the transcript written in the same page, etc. They just need to listen to the audio file, write out the transcription, and add it to their page in some way.</dd>
<dt>The audio isn't accessible to those using older browsers that don't support HTML5 audio. How can you allow them to still access the audio?</dt>
<dd>Two marks. Adding a link to the audio into the alternative contained inside the <audio> tags is fine, or you could go further and provide some kind of Flash audio player as the alternative content.</dd>
</dl>
## The forms
<dl>
<dt>The input element in the search form at the top could do with a label, but we don't want to add a visible text label that would potentially spoil the design and isn't really needed by sighted users. How can you add a label that is only accessible to screenreaders?</dt>
<dd>Two marks. You can add a descriptive label into an <code>aria-label</code> attribute on the input element. This will then be read out by screenreaders when the input is encountered.</dd>
<dt>The two input elements in the comment form have visible text labels, but they are not unambiguously associated with their labels — how do you achieve this? Note that you'll need to update some of the CSS rule as well.</dt>
<dd>Four marks. The label text should be wrapped inside <code><label></code> elements, with <code>for</code> attributes containing the ID values of the input elements they are the labels for.</dd>
</dl>
## The show/hide comment control
<dl>
<dt>The show/hide comment control button is not current keyboard-accessible. Can you make it keyboard accessible, both in terms of focusing it, and activating it using the return key?</dt>
<dd>Two marks. This can be managed easily by changing the <code><div></code> element that currently marks the button up to a <code><button></code> element. Or you could use <code>tabindex</code> and JavaScript to fix the button; see <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in">Building keyboard accessibility back in</a>. The former is a much easier method however. </dd>
</dl>
## The table
<dl>
<dt>The data table is not currently very accessible — it is hard for screenreader users to associate data rows and columns together, and the table also has no kind of summary to make it clear what it shows. Can you add some features to your HTML to fix this problem?</dt>
<dd>Six marks.
<ul>
<li>They should add a suitable summary of the table in a <code>summary</code> attribute or <code><caption></code> element.
<li>They should turn each cell in the first row and column into headings (<code><th></code>).</li>
<li>They should add <code>scope="col"</code> to the headings in the first row, and <code>scope="row"</code> to the headings in the first column.</li>
</ul>
</dd>
</dl>
## Other considerations
<dl>
<dt>Can you list two more ideas for improvements that would make the website more accessible?</dt>
<dd>Two marks for this. Anything reasonable really; the ideas we had are:
<ul>
<li>Add client-side validation to the comment form</li>
<li>Use media queries to make the site more usable on mobile devices.</li>
<li>Find a way to announce screenreader users how many comments are displayed when the show comments control button is clicked. For example, put the <code>role</code> attribute with <code>"alert"</code> value on the <code>h2</code> element in the comments section and update its text like so "Comments (1 available)".</li>
</ul>
</dd>
</dl>
================================================
FILE: accessibility/assessment-finished/style.css
================================================
/* || General setup */
html, body {
margin: 0;
padding: 0;
}
html {
font-size: 10px;
background-color: #dde;
}
body {
width: 80%;
min-width: 1024px;
margin: 0 auto;
}
/* || typography */
h1, h2, h3 {
font-family: 'Sonsie One', cursive;
color: #2a2a2a;
}
p, input, li, table, label {
font-family: 'Open Sans Condensed', sans-serif;
color: #2a2a2a;
}
h1 {
font-size: 4rem;
text-align: center;
color: white;
text-shadow: 2px 2px 10px black;
}
h2 {
font-size: 3rem;
text-align: center;
}
h3 {
font-size: 2.2rem;
}
p, li, table {
font-size: 1.6rem;
line-height: 1.5;
}
/* || header layout */
nav, article, footer, .secondary {
background-color: white;
}
article, footer, .secondary {
padding: 10px 30px;
}
article {
margin-right: 10px;
}
nav {
height: 50px;
display: flex;
padding: 1% 0;
margin-bottom: 10px;
}
nav ul {
padding: 0;
list-style-type: none;
flex: 2;
display: flex;
}
nav li {
display: inline;
text-align: center;
flex: 1;
}
nav a {
display: inline-block;
font-size: 2rem;
text-transform: uppercase;
text-decoration: none;
color: black;
}
nav .search {
flex: 1;
display: flex;
align-items: center;
height: 100%;
padding: 0 2em;
}
.search input {
font-size: 1.6rem;
height: 32px;
}
.search input[type="search"] {
flex: 3;
}
.search input[type="submit"] {
flex: 1;
margin-left: 1rem;
background: #333;
border: 0;
color: white;
}
/* || main layout */
main {
display: flex;
}
article {
flex: 5;
}
.secondary {
flex: 2;
}
footer {
margin-top: 10px;
}
/* Table styling */
table {
width: 100%;
background-color: #dde;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
td {
text-align: center;
}
th[scope="col"] {
border-bottom: 1px solid black;
}
tbody tr:nth-child(odd) {
background-color: #def;
}
/* styling content images and audio */
img, audio {
display: block;
margin: 0 auto;
}
audio {
width: 500px;
}
/* Comments styling */
.comments {
background-color: #def;
padding: 10px;
}
.show-hide {
cursor: pointer;
}
.comments h2 {
font-size: 2rem;
}
.comments h2:nth-of-type(2) {
margin-bottom: 0;
}
.comment-form {
margin-bottom: 3rem;
}
.comment-form .flex-pair {
display: flex;
padding: 0 3rem 1rem;
}
.comment-form label {
align-self: center;
flex: 2;
text-align: right;
}
.comment-form input {
margin-left: 1rem;
flex: 6;
}
.comment-form input, .comment-form label, .show-hide {
font-size: 1.6rem;
height: 32px;
}
.comment-form input[type="submit"], .show-hide {
background: #333;
border: 0;
color: white;
}
.comment-form input[type="submit"] {
width: 30%;
display: block;
margin: 0 auto;
}
.comment-container {
margin-top: 0;
}
.comment-container li {
list-style-type: none;
display: flex;
}
.comment-container li p:nth-child(1) {
flex: 1;
font-weight: bold;
}
.comment-container li p:nth-child(2) {
flex: 5;
}
================================================
FILE: accessibility/assessment-finished/transcript.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Transcript</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300%7CSonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Audio transcript</h1>
<p>This isn't really an audio fact file about bears, but it is an audio file that you can transcribe.</p>
</body>
</html>
================================================
FILE: accessibility/assessment-start/assessment-files/index.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Accessibility assessment</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300%7CSonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<font size="7">Welcome to our wildlife website</font>
</div>
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our team</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Blog</a></li>
</ul>
<form class="search">
<input type="search" name="q" placeholder="Search query">
<input type="submit" value="Go!">
</form>
</div>
<main>
<article>
<font size="6">The trouble with Bears</font>
<br><br>
By Evan Wild
<br><br>
Tall, lumbering, angry, dangerous. The real live bears of this world are proud, independent creatures, self-serving and always on the hunt for food. Nothing like the bears you see on TV, like Baloo from renowned documentary, The Jungle Book.
<br><br>
So what are bears really like, and why does the world's media portray them with such a skewed vision? In this article we try to answer those questions, and give you a real insight into the life of the bear.
<br><br>
<font size="5">Types of bear</font>
<br><br>
Bears come in two varieties — large and medium. You don't get small bears. If you have seen a small bear, then it was in fact probably a baby bear (cub) from another species.
<br><br>
Bears can also be classified in terms of their habitat — both large and medium bears are just as at home in urban areas as they are in the countryside. Different habitats encourange different behaviour however, as you'll find out below. The below table also gives you some useful facts about bears.
<br><br>
<table>
<thead>
<tr>
<td>Bear Type</td>
<td>Coat</td>
<td>Adult size</td>
<td>Habitat</td>
<td>Lifespan</td>
<td>Diet</td>
</tr>
</thead>
<tbody>
<tr>
<td>Wild</td>
<td>Brown or black</td>
<td>1.4 to 2.8 meters</td>
<td>Woods and forests</td>
<td>25 to 28 years</td>
<td>Fish, meat, plants</td>
</tr>
<tr>
<td>Urban</td>
<td>North Face</td>
<td>18 to 22</td>
<td>Condos and coffee shops</td>
<td>20 to 32 years</td>
<td>Starbucks, sushi</td>
</tr>
</tbody>
</table>
<font size="5">Habitats and Eating habits</font>
<br><br>
Wild bears eat a variety of meat, fish, fruit, nuts, and other naturally growing ingredients. In general they will hunt for food themselves in woodland or rivers, but at a push they will track down their sustenance from farms or country houses. They tend to live in relative isolation, in caves, tents, or cottages.
<br><br>
<img src="media/wild-bear.jpg">
<br><br>
Urban (gentrified) bears on the other hand have largely abandoned the old ways. They will hunt other urban creatures if necessary (including other predators like rats and foxes), but prefer to scavenge from readily available urban food outlets like dumpsters, bins, and fast food joints. When food has proven scarce, urban bears have even been known to break into people's kitchens and steal essentials like baked beans, ready meals, and microwave ovens.
<br><br>
<img src="media/urban-bear.jpg">
<br><br>
Urban bears will sleep anywhere they can, from bus shelters and parks, to the toilets in McDonald's, to their own apartment.
<br><br>
<font size="5">Mating rituals</font>
<br><br>
Bears are romantic creatures by nature, and will naturally look for a mate that they can spend the rest of their lives with. They will woo a potential suitor by making their dwelling look attractive — for example with cave paintings or a bed of reeds in the case of a wild bear, and mood lighting and a Michael Bublé CD in the case of an urban bear.
<br><br>
The following audio clip contains a fact file providing more details about bear mating rituals, along with samples and quotes from experts.
<br><br>
<audio controls>
<source src="media/bear.mp3" type="audio/mp3">
<source src="media/bear.ogg" type="audio/ogg">
<p>It looks like your browser doesn't support HTML5 audio players.</p>
</audio>
<aside>
<font size="5">About the author</font>
<br><br>
Evan Wild is an unemployed plumber from Doncaster, who has been really "in to" wildlife since childhood. He once went to Chester Zoo on holiday, but got ill after eating a doner kebab.
<br><br>
He has never seen a bear, but once read a Daily Mail article about them, and thinks they sound cool.
</aside>
<section class="comments">
<div class="show-hide">Show comments</div>
<div class="comment-wrapper">
<font size="6">Add comment</font>
<form class="comment-form">
<div class="flex-pair">
Your name:
<input type="text" name="name" id="name" placeholder="Enter your name">
</div>
<div class="flex-pair">
Your comment:
<input type="text" name="comment" id="comment" placeholder="Enter your comment">
</div>
<div>
<input type="submit" value="Submit comment">
</div>
</form>
<font size="6">Comments</font>
<ul class="comment-container">
<li>
<p>Bob Fossil</p>
<p>Oh I am so glad you taught me all about the big brown angry guys in the woods. With their sniffing little noses and their bad attitudes, they can sure be a menace — I was thinking of putting them all in a truck and driving them outta here. I run a zoo, you know.</p>
</li>
</ul>
</div>
</section>
</article>
<div class="secondary">
<font size="6">Related</font>
<ul>
<li><a href="#">The trouble with Bees</a></li>
<li><a href="#">The trouble with Otters</a></li>
<li><a href="#">The trouble with Penguins</a></li>
<li><a href="#">The trouble with Octopi</a></li>
<li><a href="#">The trouble with Lemurs</a></li>
</ul>
</div>
</main>
<footer>
<p>©Copyright 2050 by nobody. All rights reversed.</p>
</footer>
<script src="main.js"></script>
</body>
</html>
================================================
FILE: accessibility/assessment-start/assessment-files/main.js
================================================
// functionality for showing/hiding the comments section
const showHideBtn = document.querySelector('.show-hide');
const commentWrapper = document.querySelector('.comment-wrapper');
commentWrapper.style.display = 'none';
showHideBtn.onclick = function() {
let showHideText = showHideBtn.textContent;
if(showHideText === 'Show comments') {
showHideBtn.textContent = 'Hide comments';
commentWrapper.style.display = 'block';
} else {
showHideBtn.textContent = 'Show comments';
commentWrapper.style.display = 'none';
}
};
// functionality for adding a new comment via the comments form
const form = document.querySelector('.comment-form');
const nameField = document.querySelector('#name');
const commentField = document.querySelector('#comment');
const list = document.querySelector('.comment-container');
form.onsubmit = function(e) {
e.preventDefault();
submitComment();
};
function submitComment() {
const listItem = document.createElement('li');
const namePara = document.createElement('p');
const commentPara = document.createElement('p');
const nameValue = nameField.value;
const commentValue = commentField.value;
namePara.textContent = nameValue;
commentPara.textContent = commentValue;
list.appendChild(listItem);
listItem.appendChild(namePara);
listItem.appendChild(commentPara);
nameField.value = '';
commentField.value = '';
}
================================================
FILE: accessibility/assessment-start/assessment-files/style.css
================================================
/* || General setup */
html, body {
margin: 0;
padding: 0;
}
html {
font-size: 10px;
background-color: #dde;
}
body {
width: 80%;
min-width: 1024px;
margin: 0 auto;
}
/* || typography */
font[size="7"], font[size="6"], font[size="5"] {
font-family: 'Sonsie One', cursive;
color: #2a2a2a;
}
p, input, li, table, label {
font-family: 'Open Sans Condensed', sans-serif;
color: #2a2a2a;
}
font[size="7"] {
font-size: 4rem;
text-align: center;
color: white;
text-shadow: 2px 2px 10px black;
}
font[size="6"] {
font-size: 3rem;
text-align: center;
}
font[size="5"] {
font-size: 2.2rem;
}
p, li, table {
font-size: 1.6rem;
line-height: 1.5;
}
/* || header layout */
div[class="nav"], article, footer, .secondary {
background-color: green;
}
article, footer, .secondary {
padding: 10px 30px;
}
article {
margin-right: 10px;
}
div[class="nav"] {
height: 50px;
background-color: ff80ff;
display: flex;
padding: 1% 0;
margin-bottom: 10px;
}
div[class="nav"] ul {
padding: 0;
list-style-type: none;
flex: 2;
display: flex;
}
div[class="nav"] li {
display: inline;
text-align: center;
flex: 1;
}
div[class="nav"] a {
display: inline-block;
font-size: 2rem;
text-transform: uppercase;
text-decoration: none;
color: black;
}
div[class="nav"] .search {
flex: 1;
display: flex;
align-items: center;
height: 100%;
padding: 0 2em;
}
.search input {
font-size: 1.6rem;
height: 32px;
}
.search input[type="search"] {
flex: 3;
}
.search input[type="submit"] {
flex: 1;
margin-left: 1rem;
background: #333;
border: 0;
color: white;
}
/* || main layout */
main {
display: flex;
}
article {
flex: 5;
}
.secondary {
flex: 2;
}
footer {
margin-top: 10px;
}
/* Table styling */
table {
width: 100%;
background-color: #dde;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
td {
text-align: center;
}
th[scope="col"] {
border-bottom: 1px solid black;
}
tbody tr:nth-child(odd) {
background-color: #def;
}
/* styling content images and audio */
img, audio {
display: block;
margin: 0 auto;
}
audio {
width: 500px;
}
/* Comments styling */
.comments {
background-color: #def;
padding: 10px;
}
.show-hide {
cursor: pointer;
}
.comments font[size="6"] {
font-size: 2rem;
}
.comments font[size="6"]:nth-of-type(2) {
margin-bottom: 0;
}
.comment-form {
margin-bottom: 3rem;
}
.comment-form .flex-pair {
display: flex;
padding: 0 3rem 1rem;
}
.comment-form label {
align-self: center;
flex: 2;
text-align: right;
}
.comment-form input {
margin-left: 1rem;
flex: 6;
}
.show-hide {
text-align: center;
width: 150px;
}
.comment-form input, .comment-form label, .show-hide {
font-size: 1.6rem;
line-height: 32px;
}
.comment-form input[type="submit"], .show-hide {
background: #333;
border: 0;
color: white;
}
.comment-form input[type="submit"] {
width: 30%;
display: block;
margin: 0 auto;
}
.comment-container {
margin-top: 0;
}
.comment-container li {
list-style-type: none;
display: flex;
}
.comment-container li p:nth-child(1) {
flex: 1;
font-weight: bold;
}
.comment-container li p:nth-child(2) {
flex: 5;
}
================================================
FILE: accessibility/assessment-start/index.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Accessibility assessment</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300%7CSonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<font size="7">Welcome to our wildlife website</font>
</div>
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our team</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Blog</a></li>
</ul>
<form class="search">
<input type="search" name="q" placeholder="Search query">
<input type="submit" value="Go!">
</form>
</div>
<main>
<article>
<font size="6">The trouble with Bears</font>
<br><br>
By Evan Wild
<br><br>
Tall, lumbering, angry, dangerous. The real live bears of this world are proud, independent creatures, self-serving and always on the hunt for food. Nothing like the bears you see on TV, like Baloo from renowned documentary, The Jungle Book.
<br><br>
So what are bears really like, and why does the world's media portray them with such a skewed vision? In this article we try to answer those questions, and give you a real insight into the life of the bear.
<br><br>
<font size="5">Types of bear</font>
<br><br>
Bears come in two varieties — large and medium. You don't get small bears. If you have seen a small bear, then it was in fact probably a baby bear (cub) from another species.
<br><br>
Bears can also be classified in terms of their habitat — both large and medium bears are just as at home in urban areas as they are in the countryside. Different habitats encourange different behaviour however, as you'll find out below. The below table also gives you some useful facts about bears.
<br><br>
<table>
<thead>
<tr>
<td>Bear Type</td>
<td>Coat</td>
<td>Adult size</td>
<td>Habitat</td>
<td>Lifespan</td>
<td>Diet</td>
</tr>
</thead>
<tbody>
<tr>
<td>Wild</td>
<td>Brown or black</td>
<td>1.4 to 2.8 meters</td>
<td>Woods and forests</td>
<td>25 to 28 years</td>
<td>Fish, meat, plants</td>
</tr>
<tr>
<td>Urban</td>
<td>North Face</td>
<td>18 to 22</td>
<td>Condos and coffee shops</td>
<td>20 to 32 years</td>
<td>Starbucks, sushi</td>
</tr>
</tbody>
</table>
<font size="5">Habitats and Eating habits</font>
<br><br>
Wild bears eat a variety of meat, fish, fruit, nuts, and other naturally growing ingredients. In general they will hunt for food themselves in woodland or rivers, but at a push they will track down their sustenance from farms or country houses. They tend to live in relative isolation, in caves, tents, or cottages.
<br><br>
<img src="media/wild-bear.jpg">
<br><br>
Urban (gentrified) bears on the other hand have largely abandoned the old ways. They will hunt other urban creatures if necessary (including other predators like rats and foxes), but prefer to scavenge from readily available urban food outlets like dumpsters, bins, and fast food joints. When food has proven scarce, urban bears have even been known to break into people's kitchens and steal essentials like baked beans, ready meals, and microwave ovens.
<br><br>
<img src="media/urban-bear.jpg">
<br><br>
Urban bears will sleep anywhere they can, from bus shelters and parks, to the toilets in McDonald's, to their own apartment.
<br><br>
<font size="5">Mating rituals</font>
<br><br>
Bears are romantic creatures by nature, and will naturally look for a mate that they can spend the rest of their lives with. They will woo a potential suitor by making their dwelling look attractive — for example with cave paintings or a bed of reeds in the case of a wild bear, and mood lighting and a Michael Bublé CD in the case of an urban bear.
<br><br>
The following audio clip contains a fact file providing more details about bear mating rituals, along with samples and quotes from experts.
<br><br>
<audio controls>
<source src="media/bear.mp3" type="audio/mp3">
<source src="media/bear.ogg" type="audio/ogg">
<p>It looks like your browser doesn't support HTML5 audio players.</p>
</audio>
<aside>
<font size="5">About the author</font>
<br><br>
Evan Wild is an unemployed plumber from Doncaster, who has been really "in to" wildlife since childhood. He once went to Chester Zoo on holiday, but got ill after eating a doner kebab.
<br><br>
He has never seen a bear, but once read a Daily Mail article about them, and thinks they sound cool.
</aside>
<section class="comments">
<div class="show-hide">Show comments</div>
<div class="comment-wrapper">
<font size="6">Add comment</font>
<form class="comment-form">
<div class="flex-pair">
Your name:
<input type="text" name="name" id="name" placeholder="Enter your name">
</div>
<div class="flex-pair">
Your comment:
<input type="text" name="comment" id="comment" placeholder="Enter your comment">
</div>
<div>
<input type="submit" value="Submit comment">
</div>
</form>
<font size="6">Comments</font>
<ul class="comment-container">
<li>
<p>Bob Fossil</p>
<p>Oh I am so glad you taught me all about the big brown angry guys in the woods. With their sniffing little noses and their bad attitudes, they can sure be a menace — I was thinking of putting them all in a truck and driving them outta here. I run a zoo, you know.</p>
</li>
</ul>
</div>
</section>
</article>
<div class="secondary">
<font size="6">Related</font>
<ul>
<li><a href="#">The trouble with Bees</a></li>
<li><a href="#">The trouble with Otters</a></li>
<li><a href="#">The trouble with Penguins</a></li>
<li><a href="#">The trouble with Octopi</a></li>
<li><a href="#">The trouble with Lemurs</a></li>
</ul>
</div>
</main>
<footer>
<p>©Copyright 2050 by nobody. All rights reversed.</p>
</footer>
<script src="main.js"></script>
</body>
</html>
================================================
FILE: accessibility/assessment-start/main.js
================================================
// functionality for showing/hiding the comments section
const showHideBtn = document.querySelector('.show-hide');
const commentWrapper = document.querySelector('.comment-wrapper');
commentWrapper.style.display = 'none';
showHideBtn.onclick = function() {
let showHideText = showHideBtn.textContent;
if(showHideText === 'Show comments') {
showHideBtn.textContent = 'Hide comments';
commentWrapper.style.display = 'block';
} else {
showHideBtn.textContent = 'Show comments';
commentWrapper.style.display = 'none';
}
};
// functionality for adding a new comment via the comments form
const form = document.querySelector('.comment-form');
const nameField = document.querySelector('#name');
const commentField = document.querySelector('#comment');
const list = document.querySelector('.comment-container');
form.onsubmit = function(e) {
e.preventDefault();
submitComment();
};
function submitComment() {
const listItem = document.createElement('li');
const namePara = document.createElement('p');
const commentPara = document.createElement('p');
const nameValue = nameField.value;
const commentValue = commentField.value;
namePara.textContent = nameValue;
commentPara.textContent = commentValue;
list.appendChild(listItem);
listItem.appendChild(namePara);
listItem.appendChild(commentPara);
nameField.value = '';
commentField.value = '';
}
================================================
FILE: accessibility/assessment-start/style.css
================================================
/* || General setup */
html, body {
margin: 0;
padding: 0;
}
html {
font-size: 10px;
background-color: #dde;
}
body {
width: 80%;
min-width: 1024px;
margin: 0 auto;
}
/* || typography */
font[size="7"], font[size="6"], font[size="5"] {
font-family: 'Sonsie One', cursive;
color: #2a2a2a;
}
p, input, li, table, label {
font-family: 'Open Sans Condensed', sans-serif;
color: #2a2a2a;
}
font[size="7"] {
font-size: 4rem;
text-align: center;
color: white;
text-shadow: 2px 2px 10px black;
}
font[size="6"] {
font-size: 3rem;
text-align: center;
}
font[size="5"] {
font-size: 2.2rem;
}
p, li, table {
font-size: 1.6rem;
line-height: 1.5;
}
/* || header layout */
div[class="nav"], article, footer, .secondary {
background-color: green;
}
article, footer, .secondary {
padding: 10px 30px;
}
article {
margin-right: 10px;
}
div[class="nav"] {
height: 50px;
background-color: ff80ff;
display: flex;
padding: 1% 0;
margin-bottom: 10px;
}
div[class="nav"] ul {
padding: 0;
list-style-type: none;
flex: 2;
display: flex;
}
div[class="nav"] li {
display: inline;
text-align: center;
flex: 1;
}
div[class="nav"] a {
display: inline-block;
font-size: 2rem;
text-transform: uppercase;
text-decoration: none;
color: black;
}
div[class="nav"] .search {
flex: 1;
display: flex;
align-items: center;
height: 100%;
padding: 0 2em;
}
.search input {
font-size: 1.6rem;
height: 32px;
}
.search input[type="search"] {
flex: 3;
}
.search input[type="submit"] {
flex: 1;
margin-left: 1rem;
background: #333;
border: 0;
color: white;
}
/* || main layout */
main {
display: flex;
}
article {
flex: 5;
}
.secondary {
flex: 2;
}
footer {
margin-top: 10px;
}
/* Table styling */
table {
width: 100%;
background-color: #dde;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
td {
text-align: center;
}
th[scope="col"] {
border-bottom: 1px solid black;
}
tbody tr:nth-child(odd) {
background-color: #def;
}
/* styling content images and audio */
img, audio {
display: block;
margin: 0 auto;
}
audio {
width: 500px;
}
/* Comments styling */
.comments {
background-color: #def;
padding: 10px;
}
.show-hide {
cursor: pointer;
}
.comments font[size="6"] {
font-size: 2rem;
}
.comments font[size="6"]:nth-of-type(2) {
margin-bottom: 0;
}
.comment-form {
margin-bottom: 3rem;
}
.comment-form .flex-pair {
display: flex;
padding: 0 3rem 1rem;
}
.comment-form label {
align-self: center;
flex: 2;
text-align: right;
}
.comment-form input {
margin-left: 1rem;
flex: 6;
}
.show-hide {
text-align: center;
width: 150px;
}
.comment-form input, .comment-form label, .show-hide {
font-size: 1.6rem;
line-height: 32px;
}
.comment-form input[type="submit"], .show-hide {
background: #333;
border: 0;
color: white;
}
.comment-form input[type="submit"] {
width: 30%;
display: block;
margin: 0 auto;
}
.comment-container {
margin-top: 0;
}
.comment-container li {
list-style-type: none;
display: flex;
}
.comment-container li p:nth-child(1) {
flex: 1;
font-weight: bold;
}
.comment-container li p:nth-child(2) {
flex: 5;
}
================================================
FILE: accessibility/css/form-css.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Form CSS example</title>
<style>
html {
font-family: sans-serif;
}
form {
background: #eee;
border-radius: 20px;
box-shadow: 1px 1px 1px black;
padding: 20px;
width: 300px;
}
div:first-of-type label {
margin-bottom: 20px;
}
label {
width: 130px;
float: left;
text-align: right;
padding: 4px;
}
input {
width: 130px;
float: right;
}
label, input {
font-size: 1em;
line-height: 1.5;
}
div {
clear: both;
}
</style>
</head>
<body>
<h1>Form CSS example</h1>
<form>
<div>
<label for="name">Enter your name:</label>
<input type="text" name="name" id="name">
</div>
<div>
<label for="age">Enter your age:</label>
<input type="text" name="age" id="age">
</div>
<div></div>
</form>
</body>
</html>
================================================
FILE: accessibility/css/form-validation.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Form validation example</title>
<style>
html {
font-family: sans-serif;
}
form {
background: #eee;
border-radius: 20px;
box-shadow: 1px 1px 1px black;
padding: 20px;
width: 300px;
}
label {
width: 130px;
float: left;
text-align: right;
padding: 4px;
margin-bottom: 20px;
}
input {
width: 130px;
float: right;
}
label, input {
font-size: 1em;
line-height: 1.5;
}
div {
clear: both;
}
.errors {
background: yellow;
border-radius: 20px;
box-shadow: 1px 1px 1px black;
padding: 20px;
width: 300px;
position: absolute;
left: 360px;
}
</style>
</head>
<body>
<h1>Form validation example</h1>
<div class="errors" role="alert" aria-relevant="all">
<ul>
</ul>
</div>
<form>
<div>
<label for="name">Enter your name:</label>
<input type="text" name="name" id="name">
</div>
<div>
<label for="age">Enter your age:</label>
<input type="number" name="age" id="age">
</div>
<div>
<input type="submit">
</div>
<div></div>
</form>
<script src="validation.js"></script>
</body>
</html>
================================================
FILE: accessibility/css/mouse-and-keyboard-events.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Mouse and keyboard events example</title>
<style>
.thumb {
width: 100px;
}
.zoom {
position: absolute;
}
</style>
</head>
<body>
<h1>Mouse and keyboard events example</h1>
<img class="thumb" src="pirate.jpg" tabindex="0" alt="A lego pirate figure with a cutlass, pistol, tricornered hat, peg leg, long hair and beard.">
<script>
const imgThumb = document.querySelector('.thumb');
imgThumb.onmouseover = showImg;
imgThumb.onmouseout = hideImg;
imgThumb.onfocus = showImg;
imgThumb.onblur = hideImg;
function showImg() {
const imgZoom = document.createElement('img');
imgZoom.setAttribute('class','zoom');
imgZoom.setAttribute('src',imgThumb.getAttribute('src'));
let widthOffset = imgThumb.x + imgThumb.width + 10;
imgZoom.style.left = widthOffset + 'px';
let heightOffset = imgThumb.y;
imgZoom.style.top = heightOffset + 'px';
document.body.appendChild(imgZoom);
}
function hideImg() {
const imgZoom = document.querySelector('.zoom');
document.body.removeChild(imgZoom);
}
</script>
</body>
</html>
================================================
FILE: accessibility/css/table-css.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Table CSS example</title>
<style>
html {
font-family: sans-serif;
}
table {
width: 600px;
border-collapse: collapse;
border: 1px solid black;
border-top: 3px solid black;
border-bottom: 3px solid black;
}
th,td {
padding: 10px;
}
td {
text-align: center;
}
th[scope="col"] {
background: #ccc;
}
tr:nth-child(even) {
background: #eee;
}
tr:nth-child(odd) {
background: #ddd;
}
</style>
</head>
<body>
<h1>Table CSS example</h1>
<table>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Gender</th>
</tr>
<tr>
<th scope="row">Gabriel</th>
<td>13</td>
<td>Male</td>
</tr>
<tr>
<th scope="row">Elva</th>
<td>8</td>
<td>Female</td>
</tr>
<tr>
<th scope="row">Freida</th>
<td>5</td>
<td>Female</td>
</tr>
</table>
</body>
</html>
================================================
FILE: accessibility/css/validation.js
================================================
const inputs = document.querySelectorAll('input');
const labels = document.querySelectorAll('label');
const form = document.querySelector('form');
let formItems = [];
const errorField = document.querySelector('.errors');
const errorList = document.querySelector('.errors ul');
for(let i = 0; i < inputs.length-1; i++) {
let obj = {};
obj.label = labels[i];
obj.input = inputs[i];
formItems.push(obj);
}
errorField.style.left = '-100%';
form.onsubmit = validate;
function validate(e) {
errorList.innerHTML = '';
for(let i = 0; i < formItems.length; i++) {
let testItem = formItems[i];
if(testItem.input.value === '') {
errorField.style.left = '360px';
createLink(testItem);
}
}
if(errorList.innerHTML !== '') {
e.preventDefault();
}
}
function createLink(testItem) {
const listItem = document.createElement('li');
const anchor = document.createElement('a');
anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.';
anchor.href = '#' + testItem.input.name;
anchor.onclick = function() {
testItem.input.focus();
};
listItem.appendChild(anchor);
errorList.appendChild(listItem);
}
================================================
FILE: accessibility/html/accessible-image.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Accessible image example</title>
<style>
img {
display: block;
margin: 3em;
}
</style>
</head>
<body>
<h1>Images</h1>
<img src="dinosaur.png">
<img src="dinosaur.png"
alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
<img src="dinosaur.png"
alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."
title="The Mozilla red dinosaur">
<img src="dinosaur.png" aria-labelledby="dino-label">
<p id="dino-label">The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p>
</body>
</html>
================================================
FILE: accessibility/html/bad-form.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bad form example</title>
</head>
<body>
<h1>Bad form</h1>
<form>
<div>
<p>Enter your name:</p>
<input type="text" name="name">
</div>
<div>
<p>Enter your age:</p>
<input type="text" name="age">
</div>
</form>
</body>
</html>
================================================
FILE: accessibility/html/bad-links.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bad links example</title>
</head>
<body>
<h1>Bad links</h1>
<h2>Further information</h2>
<ul>
<li>For more information on whales, <a href="whales.html">click here</a>.</li>
<li>For more information on squirrels, <a href="squirrels.html">click here</a>.</li>
<li>For more information on bees, <a href="bees.html">click here</a>.</li>
</ul>
</body>
</html>
================================================
FILE: accessibility/html/bad-semantics.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bad semantics example</title>
</head>
<body>
<span style="font-size: 3rem">My heading</span>
<br><br>
Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters. Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.
<br><br>
Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jenny's tea cup ballast Blimey lee snow crow's nest. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits. Crack Jennys tea cup Sail ho killick transom trysail Chain Shot. Measured fer yer chains lateen sail Davy Jones' Locker prow wench weigh anchor. Port me hang the jib Davy Jones' Locker skysail pirate. Sail ho run a shot across the bow fluke belaying pin boom carouser. Chase guns broadside Corsair mizzen provost Admiral of the Black. Red ensign list brigantine line booty hands. Booty topgallant grapple coffer pinnace fire ship.
<br><br>
<span style="font-size: 2.5rem">My subheading</span>
<br><br>
Yard Pirate Round hearties Sail ho log salmagundi. Ye scuttle smartly Jack Tar man-of-war measured fer yer chains. Shrouds sloop transom quarter wench case shot. Hempen halter Cat o'nine tails red ensign strike colors lugsail hogshead. Barbary Coast parrel bilge ho aft gibbet. Tack red ensign crimp yo-ho-ho Buccaneer gaff. Keel careen scuppers port hands reef sails. Hands square-rigged draft lugsail heave to bounty. Clap of thunder scuppers trysail cable yo-ho-ho coxswain. Jury mast cable mizzenmast hail-shot keelhaul execution dock. Black jack ho shrouds bilge water avast hardtack. Clipper deadlights brigantine measured fer yer chains poop deck Blimey. Topsail Arr yo-ho-ho pillage bucko handsomely. Draft pinnace holystone Cat o'nine tails Letter of Marque loaded to the gunwalls.
<br><br>
<span style="font-size: 2.5rem">My 2nd subheading</span>
<br><br>
Topgallant American Main coxswain poop deck sloop come about. Piracy hail-shot handsomely Spanish Main flogging interloper. Run a rig lee yo-ho-ho gangplank Pieces of Eight gabion. Sloop Spanish Main reef capstan deadlights rope's end. Six pounders red ensign mizzenmast mizzen chase guns topmast. Broadside fore splice the main brace heave down Chain Shot bounty. Poop deck ballast Jack Tar pressgang jack walk the plank.
</body>
</html>
================================================
FILE: accessibility/html/bad-table.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bad table example</title>
</head>
<body>
<h1>Bad table</h1>
<table>
<tr>
<td>Name</td>
<td>Age</td>
<td>Gender</td>
</tr>
<tr>
<td>Gabriel</td>
<td>13</td>
<td>Male</td>
</tr>
<tr>
<td>Elva</td>
<td>8</td>
<td>Female</td>
</tr>
<tr>
<td>Freida</td>
<td>5</td>
<td>Female</td>
</tr>
</table>
</body>
</html>
================================================
FILE: accessibility/html/dino-info.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Dinosaur longdesc</title>
</head>
<body>
<p>A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p>
</body>
</html>
================================================
FILE: accessibility/html/good-form.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Good form example</title>
</head>
<body>
<h1>Good form</h1>
<form>
<div>
<label for="name">Enter your name:</label>
<input type="text" name="name" id="name">
</div>
<div>
<label for="age">Enter your age:</label>
<input type="text" name="age" id="age">
</div>
</form>
</body>
</html>
================================================
FILE: accessibility/html/good-links.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Good links example</title>
</head>
<body>
<h1>Good links</h1>
<h2>Further information</h2>
<ul>
<li><a href="whales.html">Further information on Whales</a>.</li>
<li><a href="squirrels.html">Further information on Squirrels</a>.</li>
<li><a href="bees.html">Further information on Bees</a>.</li>
</ul>
</body>
</html>
================================================
FILE: accessibility/html/good-semantics.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Good semantics example</title>
</head>
<body>
<h1>My heading</h1>
<p>Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters. Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits. Crack Jennys tea cup Sail ho killick transom trysail Chain Shot. Measured fer yer chains lateen sail Davy Jones' Locker prow wench weigh anchor. Port me hang the jib Davy Jones' Locker skysail pirate. Sail ho run a shot across the bow fluke belaying pin boom carouser. Chase guns broadside Corsair mizzen provost Admiral of the Black. Red ensign list brigantine line booty hands. Booty topgallant grapple coffer pinnace fire ship.</p>
<h2>My subheading</h2>
<p>Yard Pirate Round hearties Sail ho log salmagundi. Ye scuttle smartly Jack Tar man-of-war measured fer yer chains. Shrouds sloop transom quarter wench case shot. Hempen halter Cat o'nine tails red ensign strike colors lugsail hogshead. Barbary Coast parrel bilge ho aft gibbet. Tack red ensign crimp yo-ho-ho Buccaneer gaff. Keel careen scuppers port hands reef sails. Hands square-rigged draft lugsail heave to bounty. Clap of thunder scuppers trysail cable yo-ho-ho coxswain. Jury mast cable mizzenmast hail-shot keelhaul execution dock. Black jack ho shrouds bilge water avast hardtack. Clipper deadlights brigantine measured fer yer chains poop deck Blimey. Topsail Arr yo-ho-ho pillage bucko handsomely. Draft pinnace holystone Cat o'nine tails Letter of Marque loaded to the gunwalls. </p>
<h2>My 2nd subheading</h2>
<p>Topgallant American Main coxswain poop deck sloop come about. Piracy hail-shot handsomely Spanish Main flogging interloper. Run a rig lee yo-ho-ho gangplank Pieces of Eight gabion. Sloop Spanish Main reef capstan deadlights rope's end. Six pounders red ensign mizzenmast mizzen chase guns topmast. Broadside fore splice the main brace heave down Chain Shot bounty. Poop deck ballast Jack Tar pressgang jack walk the plank.</p>
</body>
</html>
================================================
FILE: accessibility/html/native-keyboard-accessibility.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Native keyboard accessibility</title>
<style>
input {
margin-bottom: 10px;
}
button {
margin-right: 10px;
}
a:hover, input:hover, button:hover, select:hover,
a:focus, input:focus, button:focus, select:focus {
font-weight: bold;
}
</style>
</head>
<body>
<h1>Links</h1>
<p>This is a link to <a href="https://www.mozilla.org">Mozilla</a>.</p>
<p>Another link, to the <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p>
<h2>Buttons</h2>
<p>
<button data-message="This is from the first button">Click me!</button>
<button data-message="This is from the second button">Click me too!</button>
<button data-message="This is from the third button">And me!</button>
</p>
<h2>Form</h2>
<form>
<div>
<label for="name">Fill in your name:</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="age">Enter your age:</label>
<input type="text" id="age" name="age">
</div>
<div>
<label for="mood">Choose your mood:</label>
<select id="mood" name="mood">
<option>Happy</option>
<option>Sad</option>
<option>Angry</option>
<option>Worried</option>
</select>
</div>
</form>
<script>
const buttons = document.querySelectorAll('button');
for(let i = 0; i < buttons.length; i++) {
addHandler(buttons[i]);
}
function addHandler(button) {
button.addEventListener('click', function(e) {
let message = e.target.getAttribute('data-message');
alert(message);
})
}
</script>
</body>
</html>
================================================
FILE: accessibility/html/style.css
================================================
/* || General setup */
html, body {
margin: 0;
padding: 0;
}
html {
font-size: 10px;
}
body {
width: 1200px;
margin: 0 auto;
}
table {
border-collapse: collapse;
}
/* || typography */
h1, h2, h3 {
font-family: 'Sonsie One', cursive;
color: #2a2a2a;
}
p, input, li, a {
font-family: 'Open Sans Condensed', sans-serif;
color: #2a2a2a;
}
h1 {
font-size: 4rem;
color: white;
text-shadow: 2px 2px 10px black;
}
h2 {
font-size: 3rem;
}
h3 {
font-size: 2.2rem;
}
p, li, a {
font-size: 1.6rem;
line-height: 1.5;
}
/* || header layout */
#main td, #aside td, #footer td {
padding: 10px;
}
#content {
margin-right: 10px;
}
#nav {
height: 50px;
}
#nav td {
padding: 20px;
}
#nav a {
display: block;
font-size: 2rem;
text-transform: uppercase;
text-align: center;
text-decoration: none;
}
input {
font-size: 1.6rem;
height: 32px;
width: 100%;
}
button {
width: 100%;
height: 32px;
background: #333;
border: 0;
color: white;
}
================================================
FILE: accessibility/html/table-layout.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My page title</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300%7CSonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
</head>
<body width="1200" bgcolor="#a9a9a9">
<table width="1200">
<!-- main heading row -->
<tr id="heading">
<td colspan="6">
<h1 align="center">Header</h1>
</td>
</tr>
<!-- nav menu row -->
<tr id="nav" bgcolor="#ffffff">
<td width="200">
<a href="#" align="center">Home</a>
</td>
<td width="200">
<a href="#" align="center">Our team</a>
</td>
<td width="200">
<a href="#" align="center">Projects</a>
</td>
<td width="200">
<a href="#" align="center">Contact</a>
</td>
<td width="300">
<form width="300">
<input type="search" name="q" placeholder="Search query" width="300">
</form>
</td>
<td width="100">
<button width="100">Go!</button>
</td>
</tr>
<!-- spacer row -->
<tr id="spacer" height="10">
<td>
</td>
</tr>
<!-- main content and aside row -->
<tr id="main">
<td id="content" colspan="4" bgcolor="#ffffff">
<h2 align="center">Article heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
<h3>subsection</h3>
<p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
<p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
<h3>Another subsection</h3>
<p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
<p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
</td>
<td id="aside" colspan="2" bgcolor="#ff80ff" valign="top">
<h2>Related</h2>
<ul>
<li><a href="#">Oh I do like to be beside the seaside</a></li>
<li><a href="#">Oh I do like to be beside the sea</a></li>
<li><a href="#">Although in the North of England</a></li>
<li><a href="#">It never stops raining</a></li>
<li><a href="#">Oh well...</a></li>
</ul>
</td>
</tr>
<!-- spacer row -->
<tr id="spacer" height="10">
<td>
</td>
</tr>
<!-- footer row -->
<tr id="footer" bgcolor="#ffffff">
<td colspan="6">
<p>©Copyright 2050 by nobody. All rights reversed.</p>
</td>
</tr>
</table>
</body>
</html>
================================================
FILE: accessibility/mobile/common-job-types.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Common job types example</title>
<style>
html {
font-family: sans-serif;
}
div {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Common job types form </h1>
<form>
<div>
<label for="job">Job type:</label>
<select id="job" name="job">
<option value="">-- select job --</option>
<option value="butcher">Butcher</option>
<option value="baker">Baker</option>
<option value="candle">Candlestick maker</option>
<option value="other">Other</option>
</select>
</div>
<div>
<label for="other-job">Other job:</label>
<input type="text" name="other-job" id="other-job">
</div>
</form>
<script>
const select = document.querySelector('select');
const other = document.querySelector('input');
other.parentElement.style.display = 'none';
select.onchange = function() {
if(select.value === 'other') {
other.parentElement.style.display = 'block';
} else {
other.parentElement.style.display = 'none';
}
}
</script>
</body>
</html>
================================================
FILE: accessibility/mobile/html5-form-examples.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>HTML5 form examples</title>
<style>
html {
font-family: sans-serif;
}
div {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>HTML5 form examples</h1>
<form>
<div>
<label for="myBrowser">Choose a browser from this list:</label>
<input list="browsers" name="myBrowser" id="myBrowser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
<option value="Microsoft Edge">
</datalist>
</div>
<div>
<label for="number">Enter a number:</label>
<input type="number" name="number" id="number">
</div>
<div>
<label for="tel">Enter a telephone number:</label>
<input type="tel" name="tel" id="tel">
</div>
<div>
<label for="email">Enter an email address:</label>
<input type="email" name="email" id="email">
</div>
<div>
<label for="time">Enter a time:</label>
<input type="time" name="time" id="time">
</div>
<div>
<label for="date">Enter a date:</label>
<input type="date" name="date" id="date">
</div>
</form>
</body>
</html>
================================================
FILE: accessibility/mobile/multi-control-box-drag.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<title>Multi control box drag example</title>
<style>
html {
font-family: sans-serif;
overflow: hidden;
}
body {
background: #ffe;
margin: 0;
}
div {
background-color: #1FE200;
background-image: linear-gradient(to bottom right, rgba(0,0,0,0), rgba(0,0,0,0.4));
width: 200px;
height: 150px;
border: 1px solid green;
position: absolute;
}
</style>
</head>
<body>
<div></div>
<script>
document.body.width = window.innerWidth;
document.body.height = window.innerHeight;
let posX, posY;
document.onmousemove = positionHandler;
document.ontouchmove = positionHandler;
function positionHandler(e) {
if ((e.clientX)&&(e.clientY)) {
posX = e.clientX;
posY = e.clientY;
} else if (e.targetTouches) {
posX = e.targetTouches[0].clientX;
posY = e.targetTouches[0].clientY;
e.preventDefault();
}
}
const div = document.querySelector('div');
let initialPosX = null;
let initialPosY = null;
let rAF;
div.onmousedown = function() {
initialBoxX = div.offsetLeft;
initialBoxY = div.offsetTop;
movePanel();
}
div.ontouchstart = function(e) {
initialBoxX = div.offsetLeft;
initialBoxY = div.offsetTop;
positionHandler(e);
movePanel();
}
document.onmouseup = stopMove;
document.ontouchend = stopMove;
function movePanel() {
if(initialPosX === null) {
initialPosX = posX;
initialPosY = posY;
} else {
let posMoveX = posX - initialPosX;
let posMoveY = posY - initialPosY;
let offsetX = initialBoxX + posMoveX;
let offsetY = initialBoxY + posMoveY;
div.style.left = offsetX + 'px';
div.style.top = offsetY + 'px';
}
rAF = requestAnimationFrame(movePanel);
}
function stopMove() {
cancelAnimationFrame(rAF);
initialPosX = null;
initialPosY = null;
}
</script>
</body>
</html>
================================================
FILE: accessibility/mobile/simple-box-drag.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Simple box drag example</title>
<style>
html {
font-family: sans-serif;
overflow: hidden;
}
body {
background: #ffe;
margin: 0;
}
div {
background-color: #1FE200;
background-image: linear-gradient(to bottom right, rgba(0,0,0,0), rgba(0,0,0,0.4));
width: 200px;
height: 150px;
border: 1px solid green;
position: absolute;
}
</style>
</head>
<body>
<div></div>
<script>
document.body.width = window.innerWidth;
document.body.height = window.innerHeight;
let mouseX, mouseY;
document.onmousemove = function(e) {
mouseX = e.clientX;
mouseY = e.clientY;
}
const div = document.querySelector('div');
let initialMouseX = null;
let initialMouseY = null;
var initialBoxX, initialBoxY, rAF;
div.onmousedown = function() {
initialBoxX = div.offsetLeft;
initialBoxY = div.offsetTop;
movePanel();
}
document.onmouseup = stopMove;
function movePanel() {
if(initialMouseX === null) {
initialMouseX = mouseX;
initialMouseY = mouseY;
} else {
let mouseMoveX = mouseX - initialMouseX;
let mouseMoveY = mouseY - initialMouseY;
let offsetX = initialBoxX + mouseMoveX;
let offsetY = initialBoxY + mouseMoveY;
console.log(offsetX + ' ' + offsetY);
div.style.left = offsetX + 'px';
div.style.top = offsetY + 'px';
}
rAF = requestAnimationFrame(movePanel);
}
function stopMove() {
cancelAnimationFrame(rAF);
console.log('mousemove stopped');
initialMouseX = null;
initialMouseY = null;
}
</script>
</body>
</html>
================================================
FILE: accessibility/mobile/simple-button-example.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Simple button example</title>
<style>
html {
font-family: sans-serif;
}
h1 {
text-align: center;
}
button {
max-width: 480px;
width: 70%;
margin: 0 auto;
display: block;
font-size: 150%;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Simple button example</h1>
<button>Press me!</button>
<script>
const btn = document.querySelector('button');
btn.onclick = function() {
alert('Ouch, that hurt!');
}
</script>
</body>
</html>
================================================
FILE: accessibility/multimedia/audio-transcript-ui/index.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Audio transcript example</title>
<link href="../custom-controls.css" rel="stylesheet">
<style>
.transcript-container {
width: 480px;
margin: 10px auto;
border: 1px solid #ccc;
min-height: 38px;
}
.transcript {
height: 0;
width: 100%;
overflow: auto;
padding: 0 10px;
}
.transcript-container button {
width: 100%;
height: 36px;
}
</style>
</head>
<body>
<h1>Audio transcript example</h1>
<section class="player">
<audio controls>
<source src="../viper.mp3" type="audio/mp3">
<source src="../viper.ogg" type="audio/ogg">
<p>Your browser doesn't support HTML5 audio. Here is a <a href="../viper.mp3">link to the audio</a> instead.</p>
</audio>
<div class="controls">
<button class="playpause">Play</button>
<button class="stop">Stop</button>
<button class="rwd">Rwd</button>
<button class="fwd">Fwd</button>
<div class="time">00:00</div>
</div>
</section>
<div class="transcript-container">
<div class="transcript-control">
<button>Show transcript</button>
</div>
<section class="transcript">
<p><strong>Person1</strong>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at convallis libero, ut ultricies massa. Integer vel tempor nisi. Nunc scelerisque enim est. Duis lorem ipsum, semper vitae sem at, ultricies interdum ex.</p>
<p><strong>Person 2</strong>: In consectetur maximus blandit. Curabitur convallis iaculis quam, eu porta erat suscipit sit amet. Morbi viverra placerat ipsum, non bibendum libero egestas eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed quis condimentum ante. Nullam ullamcorper faucibus eros. Quisque egestas non risus a faucibus. Curabitur luctus tincidunt turpis in scelerisque.</p>
<p><strong>Person 1</strong>: Suspendisse sapien ipsum, lacinia eu bibendum in, congue eu purus. Sed fringilla sollicitudin faucibus. Cras sodales sapien neque, eget gravida augue lobortis ac. Mauris blandit faucibus porta.</p>
<p><strong>Person 2</strong>: Fusce non libero eget nisl porta egestas ut sed elit. Nullam molestie lectus ut elementum sagittis. Donec dictum nunc leo, quis gravida diam varius non. Nam ac nisl vel nibh iaculis convallis vel eget arcu. Mauris pharetra purus ac ornare pellentesque. Fusce in leo nunc. Nunc eget vehicula sem, quis aliquam lorem.</p>
<p><strong>Person 3</strong>: Ut auctor ornare pulvinar. Morbi nisl ipsum, pellentesque et bibendum eget, vestibulum in massa. Cras egestas cursus est sed ultrices. Etiam vel dui felis.</p>
</section>
</div>
<script src="main.js"></script>
</body>
</html>
================================================
FILE: accessibility/multimedia/audio-transcript-ui/main.js
================================================
// grab references to buttons and video
const playPauseBtn = document.querySelector('.playpause');
const stopBtn = document.querySelector('.stop');
const rwdBtn = document.querySelector('.rwd');
const fwdBtn = document.querySelector('.fwd');
const timeLabel = document.querySelector('.time');
const player = document.querySelector('audio');
// Remove the native controls from all players
player.removeAttribute('controls');
// Define constructor for player controls object
playPauseBtn.onclick = function() {
if(player.paused) {
player.play();
playPauseBtn.textContent = 'Pause';
} else {
player.pause();
playPauseBtn.textContent = 'Play';
}
};
stopBtn.onclick = function() {
player.pause();
player.currentTime = 0;
playPauseBtn.textContent = 'Play';
};
rwdBtn.onclick = function() {
player.currentTime -= 3;
};
fwdBtn.onclick = function() {
player.currentTime += 3;
if(player.currentTime >= player.duration || player.paused) {
player.pause();
player.currentTime = 0;
playPauseBtn.textContent = 'Play';
}
};
player.ontimeupdate = function() {
let minutes = Math.floor(player.currentTime / 60);
let seconds = Math.floor(player.currentTime - minutes * 60);
let minuteValue;
let secondValue;
if (minutes<10) {
minuteValue = "0" + minutes;
} else {
minuteValue = minutes;
}
if (seconds<10) {
secondValue = "0" + seconds;
} else {
secondValue = seconds;
}
mediaTime = minuteValue + ":" + secondValue;
timeLabel.textContent = mediaTime;
};
// Control transcript display
const transcript = document.querySelector('.transcript');
const transcriptBtn = document.querySelector('.transcript-container button');
transcriptBtn.onclick = function() {
if(transcriptBtn.textContent === 'Show transcript') {
transcript.style.height = '150px';
transcriptBtn.textContent = 'Hide transcript';
} else {
transcript.style.height = '0';
transcriptBtn.textContent = 'Show transcript';
}
};
================================================
FILE: accessibility/multimedia/custom-controls-OOJS/index.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Multiple media players with custom controls</title>
<link href="../custom-controls.css" rel="stylesheet">
</head>
<body>
<h1>Multiple media players with custom controls</h1>
<h2>Audio player</h2>
<section class="player">
<audio controls>
<source src="../viper.mp3" type="audio/mp3">
<source src="../viper.ogg" type="audio/ogg">
<p>Your browser doesn't support HTML5 audio. Here is a <a href="../viper.mp3">link to the audio</a> instead.</p>
</audio>
</section>
<h2>Video player</h2>
<section class="player">
<video controls>
<source src="../rabbit320.mp4" type="video/mp4">
<source src="../rabbit320.webm" type="video/webm">
<p>Your browser doesn't support HTML5 video. Here is a <a href="../rabbit320.mp4">link to the video</a> instead.</p>
</video>
</section>
<script src="main.js"></script>
</body>
</html>
================================================
FILE: accessibility/multimedia/custom-controls-OOJS/main.js
================================================
// Get references to all audio and video players
// Store them all in a single array
const videos = document.querySelectorAll('video');
const audios = document.querySelectorAll('audio');
let players = [];
for(let a = 0; a < audios.length; a++) {
players.push(audios[a]);
}
for(let v = 0; v < videos.length; v++) {
players.push(videos[v]);
}
// Remove the native controls from all players
for(let p = 0; p < players.length; p++) {
players[p].removeAttribute('controls');
}
// Define constructor for player controls object
function PlayerController(player, playPauseBtn, stopBtn, rwdBtn, fwdBtn, timeLabel) {
this.player = player;
this.playPauseBtn = playPauseBtn;
this.stopBtn = stopBtn;
this.rwdBtn = rwdBtn;
this.fwdBtn = fwdBtn;
this.timeLabel = timeLabel;
this.interval;
this.playPauseBtn.onclick = function() {
if(player.paused) {
player.play();
playPauseBtn.textContent = 'Pause';
} else {
player.pause();
playPauseBtn.textContent = 'Play';
}
}
this.stopBtn.onclick = function() {
player.pause();
player.currentTime = 0;
playPauseBtn.textContent = 'Play';
}
this.rwdBtn.onclick = function() {
player.currentTime -= 3;
}
this.fwdBtn.onclick = function() {
player.currentTime += 3;
if(player.currentTime >= player.duration || player.paused) {
player.pause();
player.currentTime = 0;
playPauseBtn.textContent = 'Play';
}
}
this.player.ontimeupdate = function() {
let minutes = Math.floor(player.currentTime / 60);
let seconds = Math.floor(player.currentTime - minutes * 60);
let minuteValue;
let secondValue;
if (minutes<10) {
minuteValue = "0" + minutes;
} else {
minuteValue = minutes;
}
if (seconds<10) {
secondValue = "0" + seconds;
} else {
secondValue = seconds;
}
mediaTime = minuteValue + ":" + secondValue;
timeLabel.textContent = mediaTime;
}
}
// Add the controls bar to all players
for(let i = 0; i < players.length; i++) {
const controls = document.createElement('div');
controls.setAttribute('class', 'controls');
players[i].parentNode.appendChild(controls);
const playpause = document.createElement('button');
const stop = document.createElement('button');
const rwd = document.createElement('button');
const fwd = document.createElement('button');
const time = document.createElement('div');
playpause.setAttribute('class', 'playpause');
stop.setAttribute('class', 'stop');
rwd.setAttribute('class', 'rwd');
fwd.setAttribute('class', 'fwd');
time.setAttribute('class', 'time');
playpause.textContent = 'Play';
stop.textContent = 'Stop';
rwd.textContent = 'Rwd';
fwd.textContent = 'Fwd';
time.textContent = '00:00';
controls.appendChild(playpause);
controls.appendChild(stop);
controls.appendChild(rwd);
controls.appendChild(fwd);
controls.appendChild(time);
let playerInstance = new PlayerController(players[i], playpause, stop, rwd, fwd, time);
}
================================================
FILE: accessibility/multimedia/custom-controls-basic/index.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Basic custom controls</title>
<link href="../custom-controls.css" rel="stylesheet">
</head>
<body>
<h1>Basic custom controls</h1>
<section class="player">
<video controls>
<source src="../rabbit320.mp4" type="video/mp4">
<source src="../rabbit320.webm" type="video/webm">
<p>Your browser doesn't support HTML5 video. Here is a <a href="../rabbit320.mp4">link to the video</a> instead.</p>
</video>
<div class="controls">
<button class="playpause">Play</button>
<button class="stop">Stop</button>
<button class="rwd">Rwd</button>
<button class="fwd">Fwd</button>
<div class="time">00:00</div>
</div>
</section>
<script src="main.js"></script>
</body>
</html>
================================================
FILE: accessibility/multimedia/custom-controls-basic/main.js
================================================
// grab references to buttons and video
const playPauseBtn = document.querySelector('.playpause');
const stopBtn = document.querySelector('.stop');
const rwdBtn = document.querySelector('.rwd');
const fwdBtn = document.querySelector('.fwd');
const timeLabel = document.querySelector('.time');
const player = document.querySelector('video');
// Remove the native controls from all players
player.removeAttribute('controls');
// Define constructor for player controls object
playPauseBtn.onclick = function() {
if(player.paused) {
player.play();
playPauseBtn.textContent = 'Pause';
} else {
player.pause();
playPauseBtn.textContent = 'Play';
}
};
stopBtn.onclick = function() {
player.pause();
player.currentTime = 0;
playPauseBtn.textContent = 'Play';
};
rwdBtn.onclick = function() {
player.currentTime -= 3;
};
fwdBtn.onclick = function() {
player.currentTime += 3;
if(player.currentTime >= player.duration || player.paused) {
player.pause();
player.currentTime = 0;
playPauseBtn.textContent = 'Play';
}
};
player.ontimeupdate = function() {
let minutes = Math.floor(player.currentTime / 60);
let seconds = Math.floor(player.currentTime - minutes * 60);
let minuteValue;
let secondValue;
if (minutes<10) {
minuteValue = "0" + minutes;
} else {
minuteValue = minutes;
}
if (seconds<10) {
secondValue = "0" + seconds;
} else {
secondValue = seconds;
}
mediaTime = minuteValue + ":" + secondValue;
timeLabel.textContent = mediaTime;
};
================================================
FILE: accessibility/multimedia/custom-controls-start.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Basic custom controls</title>
<link href="custom-controls.css" rel="stylesheet">
</head>
<body>
<h1>Basic custom controls</h1>
<section class="player">
<video controls>
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>
<div class="controls">
<button class="playpause">Play</button>
<button class="stop">Stop</button>
<button class="rwd">Rwd</button>
<button class="fwd">Fwd</button>
<div class="time">00:00</div>
</div>
</section>
<script src="main.js"></script>
</body>
</html>
================================================
FILE: accessibility/multimedia/custom-controls.css
================================================
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
}
.player {
width: 480px;
margin: 10px auto;
border: 1px solid #ccc;
}
video, audio, .controls {
width: 100%;
}
.controls {
height: 36px;
}
button {
display: block;
float: left;
border: 0;
margin-right: 2px;
height: 100%;
width: 50px;
cursor: pointer;
}
button:hover, button:focus {
background-color: #ddd;
}
button:active {
background-color: #ccc;
}
.controls div {
font-size: 12px;
display: inline-block;
line-height: 36px;
width: 45px;
float: right;
}
video {
margin-bottom: -5px;
}
================================================
FILE: accessibility/multimedia/native-controls.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Multiple media players with native controls</title>
</head>
<body>
<h1>Multiple media players with native controls</h1>
<audio controls>
<source src="viper.mp3" type="audio/mp3">
<source src="viper.ogg" type="audio/ogg">
<p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>
<br>
<video controls>
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>
</body>
</html>
================================================
FILE: accessibility/tasks/html-css/aria/aria1-download.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8"/>
<title>WAI-ARIA: Task 1</title>
<style>
body {
background-color: #fff;
color: #333;
font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
* {
box-sizing: border-box;
}
div > div {
padding-left: 20px;
position: relative;
}
div > div::before {
content: " ";
width: 8px;
height: 8px;
background-color: black;
border-radius: 50%;
position: absolute;
left: 0;
top: 8px;
}
</style>
</head>
<body>
<p>My favorite animals:</p>
<div>
<div>Pig</div>
<div>Gazelle</div>
<div>Llama</div>
<div>Majestic moose</div>
<div>Hedgehog</div>
</div>
</body>
</html>
================================================
FILE: accessibility/tasks/html-css/aria/aria1.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>WAI-ARIA: Task 1</title>
<link rel="stylesheet" href="../styles.css" />
<style>
body {
background-color: #fff;
color: #333;
font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
* {
box-sizing: border-box;
}
</style>
<style class="editable">
div > div {
padding-left: 20px;
position: relative;
}
div > div::before {
content: " ";
width: 8px;
height: 8px;
background-color: black;
border-radius: 50%;
position: absolute;
left: 0;
top: 8px;
}
</style>
</head>
<body>
<section class="preview">
<p>My favorite animals:</p>
<div>
<div>Pig</div>
<div>Gazelle</div>
<div>Llama</div>
<div>Majestic moose</div>
<div>Hedgehog</div>
</div>
</section>
<textarea class="playable playable-css" style="height: 130px;">
div > div {
padding-left: 20px;
position: relative;
}
div > div::before {
content: " ";
width: 8px;
height: 8px;
background-color: black;
border-radius: 50%;
position: absolute;
left: 0;
top: 8px;
}
</textarea>
<textarea class="playable playable-html" style="height: 220px;">
<p>My favorite animals:</p>
<div>
<div>Pig</div>
<div>Gazelle</div>
<div>Llama</div>
<div>Majestic moose</div>
<div>Hedgehog</div>
</div>
</textarea>
<div class="playable-buttons">
<input id="reset" type="button" value="Reset" />
</div>
</body>
<script src="../playable.js"></script>
</html>
================================================
FILE: accessibility/tasks/html-css/aria/aria2-download.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8"/>
<title>WAI-ARIA: Task 2</title>
<style>
body {
background-color: #fff;
color: #333;
font: 1em / 1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
* {
box-sizing: border-box;
}
</style>
</head>
<body>
<form>
<input type="search" name="search">
</form>
</body>
</html>
================================================
FILE: accessibility/tasks/html-css/aria/aria2.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>WAI-ARIA: Task 2</title>
<link rel="stylesheet" href="../styles.css" />
<style>
body {
background-color: #fff;
color: #333;
font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
* {
box-sizing: border-box;
}
</style>
<style class="editable">
</style>
</head>
<body>
<section class="preview">
<form>
<input type="search" name="search">
</form>
</section>
<textarea class="playable playable-css" style="height: 130px;">
</textarea>
<textarea class="playable playable-html" style="height: 220px;">
<form>
<input type="search" name="search">
</form>
</textarea>
<div class="playable-buttons">
<input id="reset" type="button" value="Reset" />
</div>
</body>
<script src="../playable.js"></script>
</html>
================================================
FILE: accessibility/tasks/html-css/aria/marking.md
================================================
# WAI-ARIA marking guide
The aim of these tasks is to demonstrate an understanding of the techniques covered in the [WAI-ARIA Basics](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics) lesson in Learn Web Development on MDN.
## Task 1
In our first ARIA task, we present you with a section of non-semantic markup, which is obviously meant to be a list. Assuming you are not able to change the elements used, how can you allow screenreader users to recognize this as a list?
The `list` and `listitem` roles are what you need here. The updated markup would look like so:
```html
<div role="list">
<div role="listitem">Pig</div>
<div role="listitem">Gazelle</div>
<div role="listitem">Llama</div>
<div role="listitem">Majestic moose</div>
<div role="listitem">Hedgehog</div>
</div>
```
## Task 2
In our second WAI-ARIA task, we present a simple search form, and we want you to add in a couple of WAI-ARIA features to improve its accessibility:
1. How can you allow the search form to be called out as a separate landmark on the page by screenreaders, to make it easily findable?
2. How can you give the search input a suitable label, without explicitly adding a visible text label to the DOM?
Answers:
1. Give the `<form>` element a `role="search"`. Most screenreaders will explicitly call this out as a search form, and/or include it as a separate landmark in the page's landmarks list.
2. Include label text inside an `aria-label=""` attribute on the `<input>` element. This way it won't be visible on the page, but it will be read out by screenreaders.
The finished HTML should look something like this:
```html
<form role="search">
<input
type="search"
name="search"
aria-label="Search for your favorite content on our site"
/>
</form>
```
## Task 3
For this final WAI-ARIA task, we return to an example we previously saw in the [CSS and JavaScript skilltest](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and_JavaScript_accessibility). As before, we have a simple app that presents a list of animal names. Clicking one of the animal names causes a further description of that animal to appear in a box below the list. Here, we are starting with a mouse- and keyboard-accessible version.
The problem we have now is that when the DOM changes to show a new description, screenreaders cannot see what has changed. Can you update it so that description changes are announced by the screenreader?
There are two ways to solve this:
- Add an `aria-live=""` attribute to the animal-description `<div>` to turn it into a live region, so when its content changes, the updated content will be read out by a screenreader. The best value is probably `assertive`, which makes the screenreader read out the updated content as soon as it changed. `polite` means that the screenreader will wait until other descriptions have finished before it starts reading out the changed content.
- Add a `role="alert"` attribute to the animal-description `<div>`, to make it have alert box semantics. This has the same effect on the screenreader as setting `aria-live="assertive"` on it.
================================================
FILE: accessibility/tasks/html-css/css/css-a11y1-download.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8"/>
<title>CSS accessibility: Task 1</title>
<style>
body {
background-color: #fff;
color: #333;
font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
* {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #666;
outline: none;
}
</style>
</head>
<body>
<ul>
<li><a href="">Animals</a></li>
<li><a href="">Computers</a></li>
<li><a href="">Diversity and inclusion</a></li>
<li><a href="">Food</a></li>
<li><a href="">Medicine</a></li>
<li><a href="">Music</a></li>
</ul>
</body>
</html>
================================================
FILE: accessibility/tasks/html-css/css/css-a11y1.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>CSS accessibility: Task 1</title>
<link rel="stylesheet" href="../styles.css" />
<style>
* {
box-sizing: border-box;
}
</style>
<style class="editable">
a {
text-decoration: none;
color: #666;
outline: none;
}
</style>
</head>
<body>
<section class="preview">
<ul>
<li><a href="">Animals</a></li>
<li><a href="">Computers</a></li>
<li><a href="">Diversity and inclusion</a></li>
<li><a href="">Food</a></li>
<li><a href="">Medicine</a></li>
<li><a href="">Music</a></li>
</ul>
</section>
<textarea class="playable playable-css" style="height: 130px;">
a {
text-decoration: none;
color: #666;
outline: none;
}
</textarea>
<textarea class="playable playable-html" style="height: 220px;">
<ul>
<li><a href="">Animals</a></li>
<li><a href="">Computers</a></li>
<li><a href="">Diversity and inclusion</a></li>
<li><a href="">Food</a></li>
<li><a href="">Medicine</a></li>
<li><a href="">Music</a></li>
</ul>
</textarea>
<div class="playable-buttons">
<input id="reset" type="button" value="Reset" />
</div>
</body>
<script src="../playable.js"></script>
</html>
================================================
FILE: accessibility/tasks/html-css/css/css-a11y2-download.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8"/>
<title>CSS accessibility: Task 2</title>
<style>
body {
background-color: #fff;
color: #333;
font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
* {
box-sizing: border-box;
}
main {
padding: 20px;
background-color: red;
}
h1, h2, p {
color: #999;
}
h1 {
font-size: 2vw;
}
h2 {
font-size: 1.5vw;
}
p {
font-size: 1.2vw;
}
</style>
</head>
<body>
<main>
<h1>I am the eggman</h1>
<p>Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl.</p>
<h2>They are the eggman</h2>
<p>Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.</p>
<h2>I am the walrus</h2>
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors.</p>
</main>
</body>
</html>
================================================
FILE: accessibility/tasks/html-css/css/css-a11y2.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>CSS accessibility: Task 2</title>
<link rel="stylesheet" href="../styles.css" />
<style>
body {
background-color: #fff;
color: #333;
font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
* {
box-sizing: border-box;
}
</style>
<style class="editable">
main {
padding: 20px;
background-color: red;
}
h1, h2, p {
color: #999;
}
h1 {
font-size: 2vw;
}
h2 {
font-size: 1.5vw;
}
p {
font-size: 1.2vw;
}
</style>
</head>
<body>
<section class="preview">
<main>
<h1>I am the eggman</h1>
<p>Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl.</p>
<h2>They are the eggman</h2>
<p>Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.</p>
<h2>I am the walrus</h2>
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors.</p>
</main>
</section>
<textarea class="playable playable-css" style="height: 130px;">
main {
padding: 20px;
background-color: red;
}
h1, h2, p {
color: #999;
}
h1 {
font-size: 2vw;
}
h2 {
font-size: 1.5vw;
}
p {
font-size: 1.2vw;
}
</textarea>
<textarea class="playable playable-html" style="height: 220px;">
<main>
<h1>I am the eggman</h1>
<p>Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl.</p>
<h2>They are the eggman</h2>
<p>Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.</p>
<h2>I am the walrus</h2>
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors.</p>
</main>
</textarea>
<div class="playable-buttons">
<input id="reset" type="button" value="Reset" />
</div>
</body>
<script src="../playable.js"></script>
</html>
================================================
FILE: accessibility/tasks/html-css/css/marking.md
================================================
# CSS and JS accessibility marking guide
The aim of these tasks is to demonstrate an understanding of the techniques covered in the [CSS and JavaScript accessibility best practices](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript) lesson in Learn Web Development on MDN.
## Task 1
In the first task you are presented with a list of links. However, their accessibility is pretty bad — there is no way to really tell that they are links, or to tell which one the user is focussed on.
We'd like you to assume that the existing ruleset with the `a` selector is supplied by some CMS, and that you can't change it — instead, you need to create new rules to make the links look and behave like links, and for the user to be able to tell where they are in the list.
The CSS could look something like this:
```css
li a {
text-decoration: underline;
color: rgb(150, 0, 0);
}
li a:hover,
li a:focus {
text-decoration: none;
color: rgb(255, 0, 0);
}
```
## Task 2
In this next task you are presented with a simple bit of content — just headings and paragraphs. There are accessibility issues with the colors and sizing of the text; we'd like you to:
1. Explain what the problems are, and what the guidelines are that state the acceptable values for color and sizing.
2. Select new values for the color and font-size that fix the problem.
3. Update the CSS with these new values to fix the problem.
4. Test the code to make sure the problem is now fixed. Explain what tools or methods you used to select the new values and test the code.
The answers:
1. (Q1) The problems are that first of all, the color contrast is not acceptable, as per WCAG criteria [1.4.3 (AA)](https://www.w3.org/TR/WCAG21/#contrast-minimum) and [1.4.6 (AAA)](https://www.w3.org/TR/WCAG21/#contrast-enhanced), and secondly, the text is sized using vw units, which means that it is not zoomable in most browsers. [WCAG 1.4.4 (AA)](https://www.w3.org/TR/WCAG21/#resize-text) states that text should be resizable.
2. (Qs 2 and 3) to fix the code, you need to
- Choose a much better contrasting set of background and foreground colors.
- Use some different units to size the text (such as rem or even px), or even implement something that uses a combination of vw and other units, if you want it resizable but still relative in part to the viewport size
3. For testing:
- You can test color contrast using a tool such as [aXe](https://www.deque.com/axe/), The [Firefox Accessibility Inspector](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector), or even a simple standalone web page tool like the [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/).
- For text resizing, you'd need to load the example in a browser and try to resize it. Resizing vw unit-sized text works in Safari, but not Firefox or Chromium-based browsers.
For the updated code, something like this would work for the updated color scheme:
```css
main {
padding: 20px;
background-color: red;
}
h1,
h2,
p {
color: black;
}
```
And something like this would work for the font sizing:
```css
h1 {
font-size: calc(2.5rem);
}
h2 {
font-size: calc(2rem);
}
p {
font-size: calc(1.2rem);
}
```
Or this, if you want to do something a bit cleverer that gives you resizable viewport-relative units:
```css
h1 {
font-size: calc(1.5vw + 1rem);
}
h2 {
font-size: calc(1.2vw + 0.7rem);
}
p {
font-size: calc(1vw + 0.4rem);
}
```
## Task 3
In our final task here, you have some JavaScripting to do. We have a simple app that presents a list of animal names. Clicking one of the animal names causes a further description of that animal to appear in a box below the list.
But it is not very accessible — in its current state you can only operate it with the mouse. We'd like you to add to the HTML and JavaScript to make it keyboard acessible too.
Answers:
1. To begin with, you'll need to add `tabindex="0"` to the list items to make them focusable via the keyboard.
2. Then you'll need to add in another event listener inside the `forEach()` loop, to make the code respond to keys being pressed while the list items are selected. It is probably a good idea to make it respond to a specific key, such as "Enter", in which case something like the following is probably acceptable:
```css
item.addEventListener('keyup', function(e) {
if(e.key === 'Enter') {
handleSelection(e);
}
});
```
================================================
FILE: accessibility/tasks/html-css/html/html-a11y1-download.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8"/>
<title>HTML accessibility: Task 1</title>
<style>
body {
background-color: #fff;
color: #333;
font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
* {
box-sizing: border-box;
}
.button {
color: white;
background-color: blue;
border-radius: 10px;
width: 170px;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<font size="7">Need help?</font>
<br><br>
If you have any problems with our products, our support center can offer you all the help you need, whether you want:
<br><br>
1. Advice choosing a new product
<br>
2. Tech support on an existing product
<br>
3. Refund and cancellation assistance
<br><br>
<font size="5">Contact us now</font>
<br><br>
Our help center contains live chat, e-mail addresses, and phone numbers.
<br><br>
<div class="button">Find Contact Details</div>
<br>
<font size="5">Find out answers</font>
<br><br>
Our Forums section contains a large knowledge base of searchable previously asked questions, and you can always ask a new question if you can't find the answer you're looking for.
<br><br>
<div class="button">Access Forums</div>
</body>
</html>
================================================
FILE: accessibility/tasks/html-css/html/html-a11y1.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>HTML accessibility: Task 1</title>
<link rel="stylesheet" href="../styles.css" />
<style>
* {
box-sizing: border-box;
}
</style>
<style class="editable">
.button {
color: white;
background-color: blue;
border-radius: 10px;
width: 170px;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<section class="preview">
<font size="7">Need help?</font>
<br><br>
If you have any problems with our products, our support center can offer you all the help you need, whether you want:
<br><br>
1. Advice choosing a new product
<br>
2. Tech support on an existing product
<br>
3. Refund and cancellation assistance
<br><br>
<font size="5">Contact us now</font>
<br><br>
Our help center contains live chat, e-mail addresses, and phone numbers.
<br><br>
<div class="button">Find Contact Details</div>
<br>
<font size="5">Find out answers</font>
<br><br>
Our Forums section contains a large knowledge base of searchable previously asked questions, and you can always ask a new question if you can't find the answer you're looking for.
<br><br>
<div class="button">Access Forums</div>
</section>
<textarea class="playable playable-css" style="height: 130px;">
.button {
color: white;
background-color: blue;
border-radius: 10px;
width: 170px;
padding: 10px;
text-align: center;
}
</textarea>
<textarea class="playable playable-html" style="height: 220px;">
<font size="7">Need help?</font>
<br><br>
If you have any problems with our products, our support center can offer you all the help you need, whether you want:
<br><br>
1. Advice choosing a new product
<br>
2. Tech support on an existing product
<br>
3. Refund and cancellation assistance
<br><br>
<font size="5">Contact us now</font>
<br><br>
Our help center contains live chat, e-mail addresses, and phone numbers.
<br><br>
<div class="button">Find Contact Details</div>
<br>
<font size="5">Find out answers</font>
<br><br>
Our Forums section contains a large knowledge base of searchable previously asked questions, and you can always ask a new question if you can't find the answer you're looking for.
<br><br>
<div class="button">Access Forums</div>
</textarea>
<div class="playable-buttons">
<input id="reset" type="button" value="Reset" />
</div>
</body>
<script src="../playable.js"></script>
</html>
================================================
FILE: accessibility/tasks/html-css/html/html-a11y2-download.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8"/>
<title>HTML accessibility: Task 2</title>
<style>
body {
background-color: #fff;
color: #333;
font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
* {
box-sizing: border-box;
}
form {
width: 400px;
}
li {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<form>
<ul>
<li>
Name
<input type="text" name="name">
</li>
<li>
Age
<input type="number" name="age">
</li>
<li>
Email address
<input type="email" name="email">
</li>
</ul>
</form>
</body>
</html>
================================================
FILE: accessibility/tasks/html-css/html/html-a11y2.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>HTML accessibility: Task 2</title>
<link rel="stylesheet" href="../styles.css" />
<style>
* {
box-sizing: border-box;
}
</style>
<style class="editable">
form {
width: 400px;
}
li {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<section class="preview">
<form>
<ul>
<li>
Name
<input type="text" name="name">
</li>
<li>
Age
<input type="number" name="age">
</li>
<li>
Email address
<input type="email" name="email">
</li>
</ul>
</form>
</section>
<textarea class="playable playable-css" style="height: 130px;">
form {
width: 400px;
}
li {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
</textarea>
<textarea class="playable playable-html" style="height: 220px;">
<form>
<ul>
<li>
Name
<input type="text" name="name">
</li>
<li>
Age
<input type="number" name="age">
</li>
<li>
Email address
<input type="email" name="email">
</li>
</ul>
</form>
</textarea>
<div class="playable-buttons">
<input id="reset" type="button" value="Reset" />
</div>
</body>
<script src="../playable.js"></script>
</html>
================================================
FILE: accessibility/tasks/html-css/html/html-a11y3-download.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8"/>
<title>HTML accessibility: Task 3</title>
<style>
body {
background-color: #fff;
color: #333;
font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
* {
box-sizing: border-box;
}
</style>
</head>
<body>
<p>For more information about our activities, check out our fundraising page (<a href="/fundraising">click here</a>), education page (<a href="/education">click here</a>), sponsorship pack (<a href="/resources/sponsorship.pdf">click here</a>), and assessment sheets (<a href="/resources/assessments.docx">click here</a>).</p>
</body>
</html>
================================================
FILE: accessibility/tasks/html-css/html/html-a11y3.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>HTML accessibility: Task 3</title>
<link rel="stylesheet" href="../styles.css" />
<style>
* {
box-sizing: border-box;
}
</style>
<style class="editable">
</style>
</head>
<body>
<section class="preview">
<p>For more information about our activities, check out our fundraising page (<a href="/fundraising">click here</a>), education page (<a href="/education">click here</a>), sponsorship pack (<a href="/resources/sponsorship.pdf">click here</a>), and assessment sheets (<a href="/resources/assessments.docx">click here</a>).</p>
</section>
<textarea class="playable playable-css" style="height: 130px;">
</textarea>
<textarea class="playable playable-html" style="height: 220px;">
<p>For more information about our activities, check out our fundraising page (<a href="/fundraising">click here</a>), education page (<a href="/education">click here</a>), sponsorship pack (<a href="/resources/sponsorship.pdf">click here</a>), and assessment sheets (<a href="/resources/assessments.docx">click here</a>).</p>
</textarea>
<div class="playable-buttons">
<input id="reset" type="button" value="Reset" />
</div>
</body>
<script src="../playable.js"></script>
</html>
================================================
FILE: accessibility/tasks/html-css/html/html-a11y4-download.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8"/>
<title>HTML accessibility: Task 4</title>
<style>
body {
background-color: #fff;
color: #333;
font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
* {
box-sizing: border-box;
}
body {
width: 400px;
margin: 0 auto;
}
main img {
display: block;
width: 250px;
margin: 20px auto;
box-shadow: 5px 5px 0 black;
}
header {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
</style>
</head>
<body>
<header>
<img src="images/star.png" alt="A star that I use to decorate my page">
<h1>Groovy images</h1>
</header>
<main>
<img src="images/teapot.jpg">
<img src="images/football.jpg">
</main>
</body>
</html>
================================================
FILE: accessibility/tasks/html-css/html/html-a11y4.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>HTML accessibility: Task 4</title>
<link rel="stylesheet" href="../styles.css" />
<style>
* {
box-sizing: border-box;
}
</style>
<style class="editable">
.preview {
width: 400px;
margin: 0 auto;
}
main img {
display: block;
width: 250px;
margin: 20px auto;
box-shadow: 5px 5px 0 black;
}
header {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
</style>
</head>
<body>
<section class="preview">
<header>
<img src="images/star.png" alt="A star that I use to decorate my page">
<h1>Groovy images</h1>
</header>
<main>
<img src="images/teapot.jpg">
<img src="images/football.jpg">
</main>
</section>
<textarea class="playable playable-css" style="height: 130px;">
.preview {
width: 400px;
margin: 0 auto;
}
main img {
display: block;
width: 250px;
margin: 20px auto;
box-shadow: 5px 5px 0 black;
}
header {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
</textarea>
<textarea class="playable playable-html" style="height: 220px;">
<header>
<img src="images/star.png" alt="A star that I use to decorate my page">
<h1>Groovy images</h1>
</header>
<main>
<img src="images/teapot.jpg">
<img src="images/football.jpg">
</main>
</textarea>
<div class="playable-buttons">
<input id="reset" type="button" value="Reset" />
</div>
</body>
<script src="../playable.js"></script>
</html>
================================================
FILE: accessibility/tasks/html-css/html/marking.md
================================================
# HTML accessibility marking guide
The aim of these tasks is to demonstrate an understanding of the techniques covered in the [HTML: A good basis for accessibility](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML) lesson in Learn Web Development on MDN.
## Task 1
In this task we will test your understanding of text semantics, and why they are good for accessibility. You don't need to worry too much about recreating the _exact_ same look and text sizing, as long as the semantics are good.
The given text is a simple information panel with action buttons:
```html
<font size="7">Need help?</font> <br /><br />
If you have any problems with our products, our support center can offer you all
the help you need, whether you want:
<br /><br />
1. Advice choosing a new product
<br />
2. Tech support on an existing product
<br />
3. Refund and cancellation assistance
<br /><br />
<font size="5">Contact us now</font>
<br /><br />
Our help center contains live chat, e-mail addresses, and phone numbers.
<br /><br />
<div class="button">Find Contact Details</div>
<br /><br />
<font size="5">Find out answers</font>
<br /><br />
Our Forums section contains a large knowledge base of searchable previously
asked questions, and you can always ask a new question if you can't find the
answer you're looking for.
<br /><br />
<div class="button">Access forums</div>
```
But of course, this is terrible for semantics and accessibility. A much better set of markup would look like so:
```html
<h2>Need help?</h2>
<p>
If you have any problems with our products, our support center can offer you
all the help you need, whether you want:
</p>
<ul>
<li>Advice choosing a new product</li>
<li>Tech support on an existing product</li>
<li>Refund and cancellation assistance</li>
</ul>
<h3>Contact us now</h3>
<p>Our help center contains live chat, e-mail addresses, and phone numbers.</p>
<button>Find Contact Details</button>
<h3>Find out answers</h3>
<p>
Our Forums section contains a large knowledge base of searchable previously
asked questions, and you can always ask a new question if you can't find the
answer you're looking for.
</p>
<button>Access forums</button>
```
You can get a couple of extra marks for:
1. Just using `<button>`, not `<button class="button">` (repeating semantics is unnecessary), and updating the CSS selector to make sure the button still picks up the styles
2. Using an unordered list, not an ordered list — the list of items doesn't really need to be in any order.
## Task 2
In the second task, you have a form containing three input fields. You need to:
1. Semantically associate the input with their labels.
2. Assume that these inputs will be part of a larger form, and wrap them in an element that associates them all together as a single related group.
3. Give the group a description/title that summarises all of the information as personal data.
This is fairly simple, especially if you have previously worked through our [Web forms](https://developer.mozilla.org/en-US/docs/Learn/Forms) module. You need to:
1. Use `<label>` elements and `id`s to associate labels with inputs.
2. Use a `<fieldset>` to associate the elements together as one group.
3. Use a `<legend>` to give the `<fieldset>` a description/title.
Your answer should end up looking something like this:
```html
<form>
<fieldset>
<legend>Personal data</legend>
<ul>
<li>
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</li>
<li>
<label for="age">Age</label>
<input type="number" name="age" id="age" />
</li>
<li>
<label for="email">Email address</label>
<input type="email" name="email" id="email" />
</li>
</ul>
</fieldset>
</form>
```
## Task 3
In this task you are required to turn all the information links in the paragraph into good, accessible links.
1. The first two links just go to regular web pages.
2. The third link goes to a PDF, and it's large — 8MB.
3. The fourth link goes to a Word document, so the user will need some kind of application installed that can handle that.
Initially the paragraph looks like this:
```html
<p>
For more information about our activities, check out our fundraising page (
<a href="/fundraising">click here</a>), education page (
<a href="/education">click here</a>), sponsorship pack (
<a href="/resources/sponsorship.pdf">click here</a>), and assessment sheets (
<a href="/resources/assessments.docx">click here</a>).
</p>
```
But you should update it to something like this:
```html
<p>
For more information about our activities, check out our
<a href="/fundraising">fundraising page</a>,
<a href="/education">education page</a>,
<a href="/resources/sponsorship.pdf">sponsorship pack (PDF, 8MB)</a>, and
<a href="/resources/assessments.docx">assessment sheets (Word document)</a>.
</p>
```
## Task 4
In our final HTML accessibility task, you are given a simple image gallery, which has some accessibility problems. Can you fix them?
1. The header image has an accessibility issue, and so do the gallery images.
2. You could take the header image further and implement it using CSS for better accessibility. Why is this better, and what would a solution look like?
So, on to the answers:
1. The header image is decorative, so doesn't really need alt text. The best solution if you are going to use decorative HTML images is to put `alt=""`, so a screenreader will just read out nothing — rather than a description, or the image file name. It is not part of the content.
2. The gallery images need alt text, and they are part of the content. The updated HTML could look something like this:
```html
<header>
<img src="images/star.png" alt="" />
<h1>Groovy images</h1>
</header>
<main>
<img
src="images/teapot.jpg"
alt="a black teapot placed on a shelf just inside a window"
/>
<img
src="images/football.jpg"
alt="A black and white round panelled ball"
/>
</main>
```
3. It would be arguable better to implement the background header image using CSS background images. To do this, you would remove the following line:
```html
<img src="images/star.png" alt="A star that I use to decorate my page" />
```
And add in a CSS rule along these lines:
```css
h1 {
background: url(images/star.png) no-repeat left;
padding-left: 50px;
}
```
================================================
FILE: accessibility/tasks/html-css/playable.js
================================================
var section = document.querySelector('section');
var editable = document.querySelector('.editable');
var textareaHTML = document.querySelector('.playable-html');
var textareaCSS = document.querySelector('.playable-css');
var reset = document.getElementById('reset');
var htmlCode = textareaHTML.value;
var cssCode = textareaCSS.value;
function fillCode() {
editable.innerHTML = textareaCSS.value;
section.innerHTML = textareaHTML.value;
}
reset.addEventListener('click', function () {
textareaHTML.value = htmlCode;
textareaCSS.value = cssCode;
fillCode();
});
textareaHTML.addEventListener('input', fillCode);
textareaCSS.addEventListener('input', fillCode);
window.addEventListener('load', fillCode);
================================================
FILE: accessibility/tasks/html-css/styles.css
================================================
/* Some default styling for cookbook examples */
/*
rgb(53,43,34)
rgb(75,70,74)
rgb(95,97,110)
rgb(137,151,188)
rgb(160,178,226)
*/
body {
background-color: #fff;
color: #333;
font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
}
h1 {
font-size: 2rem;
margin: 0;
}
h2 {
font-size: 1.6rem;
margin: 0;
}
p {
margin: 0.5em 0;
}
/* styles for the editor */
.playable {
font-family: monospace;
display: block;
margin-bottom: 10px;
background-color: #F4F7F8;
border: none;
border-left: 6px solid #558ABB;
color: #4D4E53;
width: 90%;
max-width: 700px;
padding: 10px 10px 0px;
font-size: 90%;
}
.playable-css {
height: 80px;
}
.playable-html {
height: 160px;
}
.playable-buttons {
text-align: right;
width: 90%;
max-width: 700px;
padding: 5px 10px 5px 26px;
font-size: 100%;
}
.preview {
width: 90%;
max-width: 700px;
border: 1px solid #4D4E53;
border-radius: 2px;
padding: 10px 14px 10px 10px;
margin-bottom: 10px;
}
.preview input {
display: block;
margin: 5px;
}
================================================
FILE: accessibility/tasks/js/aria/aria-js1-download.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8"/>
<title>JavaScript accessibility: Task 1</title>
<style>
p {
color: purple;
margin: 0.5em 0;
}
* {
box-sizing: border-box;
}
li {
cursor: pointer;
}
</style>
<link rel="stylesheet" href="../styles.css" />
</head>
<body>
<section class="preview">
<div class="animal-list">
<h1>Animal summaries</h1>
<p>The following list of animals can be clicked to display a description of that animal.</p>
<ul>
<li tabindex="0" data-description="A type of wild mountain goat, with large recurved horns, found in Eurasia, North Africa, and East Africa.">Ibex</li>
<li tabindex="0" data-description="A medium-sized marine mammal, similar to a manatee, but with a Dolphin-like tail.">Dugong</li>
<li tabindex="0" data-description="A rare marsupial, which looks rather like a tiny kangaroo, measuring around 50 to 75 centimeters.">Quokka</li>
</ul>
</div>
<div class="animal-description">
<h2></h2>
<p></p>
</div>
</section>
</body>
<script>
const listItems = document.querySelectorAll('li');
const descHeading = document.querySelector('.animal-description h2');
const descPara = document.querySelector('.animal-description p');
listItems.forEach(function(item) {
item.addEventListener('mouseup', handleSelection);
item.addEventListener('keyup', function(e) {
if(e.key === 'Enter') {
handleSelection(e);
}
});
})
function handleSelection(e) {
const heading = e.target.textContent;
const description = e.target.getAttribute('data-description');
descHeading.textContent = heading;
descPara.textContent = description;
}
</script>
</html>
================================================
FILE: accessibility/tasks/js/js/js1-download.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8"/>
<title>JavaScript accessibility: Task 1</title>
<style>
p {
color: purple;
margin: 0.5em 0;
}
* {
box-sizing: border-box;
}
li {
cursor: pointer;
}
</style>
<link rel="stylesheet" href="../styles.css" />
</head>
<body>
<section class="preview">
<div class="animal-list">
<h1>Animal summaries</h1>
<p>The following list of animals can be clicked to display a description of that animal.</p>
<ul>
<li data-description="A type of wild mountain goat, with large recurved horns, found in Eurasia, North Africa, and East Africa.">Ibex</li>
<li data-description="A medium-sized marine mammal, similar to a manatee, but with a Dolphin-like tail.">Dugong</li>
<li data-description="A rare marsupial, which looks rather like a tiny kangaroo, measuring around 50 to 75 centimeters.">Quokka</li>
</ul>
</div>
<div class="animal-description">
<h2></h2>
<p></p>
</div>
</section>
</body>
<script>
const listItems = document.querySelectorAll('li');
const descHeading = document.querySelector('.animal-description h2');
const descPara = document.querySelector('.animal-description p');
listItems.forEach(function(item) {
item.addEventListener('mouseup', handleSelection);
})
function handleSelection(e) {
const heading = e.target.textContent;
const description = e.target.getAttribute('data-description');
descHeading.textContent = heading;
descPara.textContent = description;
}
</script>
</html>
================================================
FILE: accessibility/tasks/js/playable.js
================================================
var section = document.querySelector('section');
var editable = document.querySelector('.editable');
var textareaJS = document.querySelector('.playable-js');
var reset = document.getElementById('reset');
var jsCode = textareaJS.value;
function fillCode() {
editable.textContent = textareaJS.value;
try {
eval(editable.textContent);
} catch(e) {
let para = document.createElement('p');
para.textContent = e;
section.appendChild(para);
}
}
reset.addEventListener('click', function () {
textareaJS.value = jsCode;
fillCode();
});
textareaJS.addEventListener('input', fillCode);
window.addEventListener('load', fillCode);
================================================
FILE: accessibility/tasks/js/styles.css
================================================
/* Some default styling for cookbook examples */
/*
rgb(53,43,34)
rgb(75,70,74)
rgb(95,97,110)
rgb(137,151,188)
rgb(160,178,226)
*/
body {
background-color: #fff;
color: #333;
font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
}
h1 {
font-size: 2rem;
margin: 0;
}
h2 {
font-size: 1.6rem;
margin: 0;
}
p {
margin: 0.5em 0;
}
/* styles for the editor */
.playable {
font-family: monospace;
display: block;
margin-bottom: 10px;
background-color: #F4F7F8;
border: none;
border-left: 6px solid #558ABB;
color: #4D4E53;
width: 90%;
max-width: 700px;
padding: 10px 10px 0px;
font-size: 90%;
}
.playable-css {
height: 80px;
}
.playable-js {
height: 160px;
}
.playable-buttons {
text-align: right;
width: 90%;
max-width: 700px;
padding: 5px 10px 5px 26px;
font-size: 100%;
}
.preview {
width: 90%;
max-width: 700px;
border: 1px solid #4D4E53;
border-radius: 2px;
padding: 10px 14px 10px 10px;
margin-bottom: 10px;
}
.preview input {
display: block;
margin: 5px;
}
================================================
FILE: css/css-layout/flexbox/complex-flexbox.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Complex flexbox example</title>
<style>
html {
font-family: sans-serif;
}
body {
margin: 0;
}
header {
background: purple;
height: 100px;
}
h1 {
text-align: center;
color: white;
line-height: 100px;
margin: 0;
}
article {
padding: 10px;
margin: 10px;
background: aqua;
}
/* Add your flexbox CSS below here */
section {
display: flex;
}
article {
flex: 1 200px;
}
article:nth-of-type(3) {
flex: 3 200px;
display: flex;
flex-flow: column;
}
article:nth-of-type(3) div:first-child {
flex: 1 100px;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-around;
}
button {
flex: 1 auto;
margin: 5px;
font-size: 18px;
line-height: 1.5;
}
</style>
</head>
<body>
<header>
<h1>Complex flexbox example</h1>
</header>
<section>
<article>
<h2>First article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Second article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<div>
<button>Smile</button>
<button>Laugh</button>
<button>Wink</button>
<button>Shrug</button>
<button>Blush</button>
</div>
<div>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</div>
<div>
<p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.</p>
</div>
</article>
</section>
</body>
</html>
================================================
FILE: css/css-layout/flexbox/flex-align0.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Flexbox align 0 — starting code</title>
<style>
html {
font-family: sans-serif;
}
body {
width: 70%;
max-width: 960px;
margin: 20px auto;
}
button {
font-size: 18px;
line-height: 1.5;
width: 15%;
}
div {
height: 100px;
border: 1px solid black;
}
/* Add your flexbox CSS below here */
</style>
</head>
<body>
<div>
<button>Smile</button>
<button>Laugh</button>
<button>Wink</button>
<button>Shrug</button>
<button>Blush</button>
</div>
</body>
</html>
================================================
FILE: css/css-layout/flexbox/flex-align1.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Flexbox align 1 — center aligned horizontally and vertically</title>
<style>
html {
font-family: sans-serif;
}
body {
width: 70%;
max-width: 960px;
margin: 20px auto;
}
button {
font-size: 18px;
line-height: 1.5;
width: 15%;
}
div {
height: 100px;
border: 1px solid black;
}
/* Add your flexbox CSS below here */
div {
display: flex;
align-items: center;
justify-content: space-around;
}
</style>
</head>
<body>
<div>
<button>Smile</button>
<button>Laugh</button>
<button>Wink</button>
<button>Shrug</button>
<button>Blush</button>
</div>
</body>
</html>
================================================
FILE: css/css-layout/flexbox/flex-ordering.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Flexbox ordering example</title>
<style>
html {
font-family: sans-serif;
}
body {
width: 70%;
max-width: 960px;
margin: 20px auto;
}
button {
font-size: 18px;
line-height: 1.5;
width: 15%;
}
div {
height: 100px;
border: 1px solid black;
}
/* Add your flexbox CSS below here */
div {
display: flex;
align-items: center;
justify-content: space-around;
}
button:first-child {
order: 1;
}
button:last-child {
order: -1;
}
</style>
</head>
<body>
<div>
<button>Smile</button>
<button>Laugh</button>
<button>Wink</button>
<button>Shrug</button>
<button>Blush</button>
</div>
</body>
</html>
================================================
FILE: css/css-layout/flexbox/flexbox-wrap0.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Flexbox wrap 0 — children overflowing</title>
<style>
html {
font-family: sans-serif;
}
body {
margin: 0;
}
header {
background: purple;
height: 100px;
}
h1 {
text-align: center;
color: white;
line-height: 100px;
margin: 0;
}
article {
padding: 10px;
margin: 10px;
background: aqua;
}
/* Add your flexbox CSS below here */
section {
display: flex;
flex-direction: row;
}
article {
}
</style>
</head>
<body>
<header>
<h1>Sample flexbox example</h1>
</header>
<section>
<article>
<h2>First article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Second article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Third article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
<p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.</p>
</article>
<article>
<h2>Fourth article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Fifth article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Sixth article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
<p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.</p>
</article>
<article>
<h2>Seventh article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Eighth article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Ninth article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
<p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.</p>
</article>
<article>
<h2>Tenth article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Eleventh article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Twelfth article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
<p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.</p>
</article>
</section>
</body>
</html>
================================================
FILE: css/css-layout/flexbox/flexbox-wrap1.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Flexbox wrap 1 — wrapping our content to new rows</title>
<style>
html {
font-family: sans-serif;
}
body {
margin: 0;
}
header {
background: purple;
height: 100px;
}
h1 {
text-align: center;
color: white;
line-height: 100px;
margin: 0;
}
article {
padding: 10px;
margin: 10px;
background: aqua;
}
/* Add your flexbox CSS below here */
section {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
}
article {
flex: 200px;
}
</style>
</head>
<body>
<header>
<h1>Sample flexbox example</h1>
</header>
<section>
<article>
<h2>First article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Second article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammoc
gitextract_a46r8vfx/
├── .github/
│ └── CODEOWNERS
├── .gitignore
├── .prettierignore
├── .prettierrc.json
├── .vscode/
│ ├── cspell.json
│ ├── extensions.json
│ └── project-words.txt
├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md
├── SECURITY.md
├── accessibility/
│ ├── aria/
│ │ ├── aria-div-buttons.html
│ │ ├── aria-live.html
│ │ ├── aria-no-live.html
│ │ ├── aria-tabbed-info-box.html
│ │ ├── form-validation-checkbox-disabled.html
│ │ ├── form-validation-updated.html
│ │ ├── quotes.json
│ │ ├── validation-checkbox-disabled.js
│ │ ├── validation.js
│ │ ├── website-aria-roles/
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ └── website-no-roles/
│ │ ├── index.html
│ │ └── style.css
│ ├── assessment-finished/
│ │ ├── index.html
│ │ ├── main.js
│ │ ├── marking-guide.md
│ │ ├── media/
│ │ │ └── bear.ogg
│ │ ├── style.css
│ │ └── transcript.html
│ ├── assessment-start/
│ │ ├── assessment-files/
│ │ │ ├── index.html
│ │ │ ├── main.js
│ │ │ ├── media/
│ │ │ │ └── bear.ogg
│ │ │ └── style.css
│ │ ├── index.html
│ │ ├── main.js
│ │ ├── media/
│ │ │ └── bear.ogg
│ │ └── style.css
│ ├── css/
│ │ ├── form-css.html
│ │ ├── form-validation.html
│ │ ├── mouse-and-keyboard-events.html
│ │ ├── table-css.html
│ │ └── validation.js
│ ├── html/
│ │ ├── accessible-image.html
│ │ ├── bad-form.html
│ │ ├── bad-links.html
│ │ ├── bad-semantics.html
│ │ ├── bad-table.html
│ │ ├── dino-info.html
│ │ ├── good-form.html
│ │ ├── good-links.html
│ │ ├── good-semantics.html
│ │ ├── native-keyboard-accessibility.html
│ │ ├── style.css
│ │ └── table-layout.html
│ ├── mobile/
│ │ ├── common-job-types.html
│ │ ├── html5-form-examples.html
│ │ ├── multi-control-box-drag.html
│ │ ├── simple-box-drag.html
│ │ └── simple-button-example.html
│ ├── multimedia/
│ │ ├── audio-transcript-ui/
│ │ │ ├── index.html
│ │ │ └── main.js
│ │ ├── custom-controls-OOJS/
│ │ │ ├── index.html
│ │ │ └── main.js
│ │ ├── custom-controls-basic/
│ │ │ ├── index.html
│ │ │ └── main.js
│ │ ├── custom-controls-start.html
│ │ ├── custom-controls.css
│ │ ├── native-controls.html
│ │ ├── rabbit320.webm
│ │ └── viper.ogg
│ └── tasks/
│ ├── html-css/
│ │ ├── aria/
│ │ │ ├── aria1-download.html
│ │ │ ├── aria1.html
│ │ │ ├── aria2-download.html
│ │ │ ├── aria2.html
│ │ │ └── marking.md
│ │ ├── css/
│ │ │ ├── css-a11y1-download.html
│ │ │ ├── css-a11y1.html
│ │ │ ├── css-a11y2-download.html
│ │ │ ├── css-a11y2.html
│ │ │ └── marking.md
│ │ ├── html/
│ │ │ ├── html-a11y1-download.html
│ │ │ ├── html-a11y1.html
│ │ │ ├── html-a11y2-download.html
│ │ │ ├── html-a11y2.html
│ │ │ ├── html-a11y3-download.html
│ │ │ ├── html-a11y3.html
│ │ │ ├── html-a11y4-download.html
│ │ │ ├── html-a11y4.html
│ │ │ └── marking.md
│ │ ├── playable.js
│ │ └── styles.css
│ └── js/
│ ├── aria/
│ │ └── aria-js1-download.html
│ ├── js/
│ │ └── js1-download.html
│ ├── playable.js
│ └── styles.css
├── css/
│ ├── css-layout/
│ │ ├── flexbox/
│ │ │ ├── complex-flexbox.html
│ │ │ ├── flex-align0.html
│ │ │ ├── flex-align1.html
│ │ │ ├── flex-ordering.html
│ │ │ ├── flexbox-wrap0.html
│ │ │ ├── flexbox-wrap1.html
│ │ │ ├── flexbox0.html
│ │ │ ├── flexbox1.html
│ │ │ └── flexbox2.html
│ │ ├── floats/
│ │ │ ├── 0_two-column-layout.html
│ │ │ ├── 1-basic-example.html
│ │ │ ├── 1_three-column-layout.html
│ │ │ ├── 2-line-boxes.html
│ │ │ ├── 2_float-disaster.html
│ │ │ ├── 2a_fixed-by-clear.html
│ │ │ ├── 3-clearing.html
│ │ │ ├── 3_broken-layout.html
│ │ │ ├── 4-clearfix.html
│ │ │ ├── 4_fixed-layout-border-box.html
│ │ │ ├── 5-overflow.html
│ │ │ ├── 5_fixed-height-columns.html
│ │ │ ├── 6-flow-root.html
│ │ │ ├── fixed-layout-adjusted-percentages.html
│ │ │ ├── simple-float.html
│ │ │ ├── three-column-layout-wrong-order.html
│ │ │ └── two-column-layout-fixed.html
│ │ ├── fundamental-layout-comprehension/
│ │ │ ├── index.html
│ │ │ └── styles.css
│ │ ├── fundamental-layout-comprehension-finish/
│ │ │ ├── index.html
│ │ │ ├── marking-guide.md
│ │ │ └── styles.css
│ │ ├── grids/
│ │ │ ├── 0-starting-point.html
│ │ │ ├── 1-fixed-columns.html
│ │ │ ├── 10-template-completed.html
│ │ │ ├── 11-grid-system-starting-point.html
│ │ │ ├── 12-grid-system-completed.html
│ │ │ ├── 2-fr-tracks.html
│ │ │ ├── 3-gaps.html
│ │ │ ├── 4-repeat.html
│ │ │ ├── 5-auto-rows.html
│ │ │ ├── 6-min-max.html
│ │ │ ├── 7-auto-fill.html
│ │ │ ├── 8-placement-starting-point.html
│ │ │ ├── 9-placement-completed.html
│ │ │ ├── css-grid-finished.html
│ │ │ ├── css-grid.html
│ │ │ ├── css-tables-as-grid.html
│ │ │ ├── flexbox-grid.html
│ │ │ ├── fluid-grid-calc.html
│ │ │ ├── fluid-grid-offset.html
│ │ │ ├── fluid-grid.html
│ │ │ ├── html-skeleton-finished.html
│ │ │ ├── html-skeleton.html
│ │ │ ├── normalize.css
│ │ │ ├── simple-grid-finished.html
│ │ │ ├── simple-grid.html
│ │ │ └── skeleton.css
│ │ ├── multicol/
│ │ │ ├── 0-starting-point.html
│ │ │ ├── 1-simple-example.html
│ │ │ ├── 2-simple-example-width.html
│ │ │ ├── 3-gaps-rules.html
│ │ │ └── 4-breaking.html
│ │ ├── positioning/
│ │ │ ├── 0_basic-flow.html
│ │ │ ├── 1_static-positioning.html
│ │ │ ├── 2_relative-positioning.html
│ │ │ ├── 3_absolute-positioning.html
│ │ │ ├── 4_positioning-context.html
│ │ │ ├── 5_z-index.html
│ │ │ ├── 6_fixed-positioning.html
│ │ │ └── 7_sticky-positioning.html
│ │ ├── practical-positioning-examples/
│ │ │ ├── fixed-info-box.html
│ │ │ ├── hidden-info-panel-start.html
│ │ │ ├── hidden-info-panel.html
│ │ │ ├── tabbed-info-box-start.html
│ │ │ ├── tabbed-info-box.html
│ │ │ └── tabs-manual.js
│ │ └── stacking-and-float/
│ │ └── index.html
│ ├── introduction-to-css/
│ │ ├── box-model/
│ │ │ ├── app/
│ │ │ │ └── sass
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ ├── cascade-and-inheritance/
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ ├── css-selectors/
│ │ │ ├── combinators.html
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ ├── css-values-and-units/
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ ├── debugging-css/
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ ├── debugging-css-finished/
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ ├── fundamental-css-comprehension/
│ │ │ ├── index.html
│ │ │ └── style-resources.txt
│ │ ├── fundamental-css-comprehension-finished/
│ │ │ ├── index.html
│ │ │ ├── marking-guide.md
│ │ │ └── style.css
│ │ └── how-css-works/
│ │ ├── index.html
│ │ └── style.css
│ ├── styling-boxes/
│ │ ├── advanced_box_effects/
│ │ │ ├── background-clip-text.html
│ │ │ ├── blend-modes.html
│ │ │ ├── box-shadow.html
│ │ │ └── filters.html
│ │ ├── backgrounds/
│ │ │ ├── background-attachment.css
│ │ │ ├── background-attachment.html
│ │ │ ├── index.html
│ │ │ └── repeating-background.html
│ │ ├── borders/
│ │ │ ├── border-image.html
│ │ │ ├── border-longhand.html
│ │ │ └── rounded-corners.html
│ │ ├── box-model-recap/
│ │ │ ├── box-sizing-example.css
│ │ │ ├── box-sizing-example.html
│ │ │ ├── css-tables-example.html
│ │ │ ├── flexbox-example.html
│ │ │ ├── min-max-container.css
│ │ │ ├── min-max-container.html
│ │ │ ├── min-max-image-container.css
│ │ │ └── min-max-image-container.html
│ │ ├── cool-information-box-finished/
│ │ │ ├── index.html
│ │ │ ├── marking-guide.md
│ │ │ └── style.css
│ │ ├── cool-information-box-start/
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ ├── letterheaded-paper-finished/
│ │ │ ├── index.html
│ │ │ ├── marking-guide.md
│ │ │ └── style.css
│ │ ├── letterheaded-paper-start/
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ └── styling-tables/
│ │ ├── punk-bands-complete.html
│ │ ├── punk-bands-unstyled.html
│ │ └── style.css
│ └── styling-text/
│ ├── fundamentals/
│ │ └── index.html
│ ├── styling-links/
│ │ ├── default-styles.html
│ │ ├── external-link-icon.html
│ │ ├── link-buttons.html
│ │ └── styled-links.html
│ ├── styling-lists/
│ │ ├── index.html
│ │ └── unstyled-list.html
│ ├── typesetting-a-homepage-finished/
│ │ ├── index.html
│ │ ├── marking-guide.md
│ │ ├── original-font-files/
│ │ │ ├── Lovato Light-Webfont/
│ │ │ │ ├── Licenses/
│ │ │ │ │ └── Webfont EULA 1.6.txt
│ │ │ │ ├── Reference/
│ │ │ │ │ └── How_to_use_webfonts.html
│ │ │ │ └── Webfonts/
│ │ │ │ └── lovato_light_macroman/
│ │ │ │ ├── Lovato-Light-demo.html
│ │ │ │ ├── specimen_files/
│ │ │ │ │ ├── easytabs.js
│ │ │ │ │ ├── grid_12-825-55-15.css
│ │ │ │ │ └── specimen_stylesheet.css
│ │ │ │ └── stylesheet.css
│ │ │ ├── josefin-slab/
│ │ │ │ └── SIL Open Font License.txt
│ │ │ └── webfontkit-20160419-074110/
│ │ │ ├── generator_config.txt
│ │ │ ├── josefinslab-bold-demo.html
│ │ │ ├── specimen_files/
│ │ │ │ ├── grid_12-825-55-15.css
│ │ │ │ └── specimen_stylesheet.css
│ │ │ └── stylesheet.css
│ │ └── style.css
│ ├── typesetting-a-homepage-start/
│ │ ├── index.html
│ │ └── style.css
│ └── web-fonts/
│ ├── fonts/
│ │ ├── cicle_fina-demo.html
│ │ ├── generator_config.txt
│ │ ├── specimen_files/
│ │ │ ├── grid_12-825-55-15.css
│ │ │ └── specimen_stylesheet.css
│ │ ├── stylesheet.css
│ │ └── zantroke-demo.html
│ ├── google-font.css
│ ├── google-font.html
│ ├── web-font-finished.css
│ ├── web-font-finished.html
│ ├── web-font-start.css
│ ├── web-font-start.html
│ └── zantroke/
│ ├── SIL Open Font License.txt
│ └── Zantroke.otf
├── html/
│ ├── forms/
│ │ ├── basic-input-examples/
│ │ │ └── index.html
│ │ ├── color-example/
│ │ │ └── index.html
│ │ ├── date-picker-fallback/
│ │ │ └── index.html
│ │ ├── datetime-local-example/
│ │ │ └── index.html
│ │ ├── datetime-local-picker-fallback/
│ │ │ └── index.html
│ │ ├── editable-input-example/
│ │ │ └── editable_input.html
│ │ ├── file-examples/
│ │ │ ├── file-example.html
│ │ │ ├── file-with-accept.html
│ │ │ └── simple-file.html
│ │ ├── form-validation/
│ │ │ ├── custom-error-message.html
│ │ │ ├── detailed-custom-validation.html
│ │ │ ├── fruit-length.html
│ │ │ ├── fruit-pattern.html
│ │ │ ├── fruit-required.html
│ │ │ ├── fruit-start.html
│ │ │ ├── full-example.html
│ │ │ └── min-max.html
│ │ ├── hidden-input-example/
│ │ │ └── index.html
│ │ ├── html-form-structure/
│ │ │ ├── checkbox-label.html
│ │ │ ├── fieldset-legend.html
│ │ │ └── required-labels.html
│ │ ├── image-type-example/
│ │ │ ├── index.html
│ │ │ └── xy-coordinates-example.html
│ │ ├── indeterminate-example/
│ │ │ └── index.html
│ │ ├── month-examples/
│ │ │ └── month-validation.html
│ │ ├── native-form-widgets/
│ │ │ ├── advanced-examples.html
│ │ │ ├── button-examples.html
│ │ │ ├── checkable-items.html
│ │ │ ├── drop-down-content.html
│ │ │ ├── multi-line-text-field.html
│ │ │ ├── other-examples.html
│ │ │ ├── positioned-legend.html
│ │ │ └── single-line-text-fields.html
│ │ ├── number-example/
│ │ │ └── index.html
│ │ ├── postcard-example/
│ │ │ ├── index.html
│ │ │ └── postcard-start.html
│ │ ├── pseudo-classes/
│ │ │ ├── basic-required-optional.html
│ │ │ ├── enabled-disabled-shipping.html
│ │ │ ├── out-of-range.html
│ │ │ ├── radios-checked-default.html
│ │ │ ├── radios-checked-indeterminate.html
│ │ │ ├── readonly-confirmation.html
│ │ │ ├── required-optional-generated.html
│ │ │ ├── user-valid-invalid.html
│ │ │ └── valid-invalid.html
│ │ ├── range-example/
│ │ │ └── index.html
│ │ ├── select-example/
│ │ │ └── select-multiple.html
│ │ ├── sending-form-data/
│ │ │ ├── get-method.html
│ │ │ ├── php-example.html
│ │ │ ├── php-example.php
│ │ │ ├── post-method.html
│ │ │ ├── python-example.py
│ │ │ └── templates/
│ │ │ ├── form.html
│ │ │ └── greeting.html
│ │ ├── styling-examples/
│ │ │ ├── appearance-tester.html
│ │ │ ├── checkboxes-styled.html
│ │ │ ├── radios-styled.html
│ │ │ ├── search-appearance.html
│ │ │ ├── styled-file-picker.html
│ │ │ ├── styled-search.html
│ │ │ └── ugly-controls.html
│ │ ├── tasks/
│ │ │ ├── advanced-styling/
│ │ │ │ ├── advanced-styling1-download.html
│ │ │ │ ├── advanced-styling1.html
│ │ │ │ ├── advanced-styling2-download.html
│ │ │ │ ├── advanced-styling2.html
│ │ │ │ ├── advanced-styling3-download.html
│ │ │ │ └── marking.md
│ │ │ ├── basic-controls/
│ │ │ │ ├── basic-controls1-download.html
│ │ │ │ ├── basic-controls1.html
│ │ │ │ ├── basic-controls2-download.html
│ │ │ │ ├── basic-controls2.html
│ │ │ │ ├── basic-controls3-download.html
│ │ │ │ ├── basic-controls3.html
│ │ │ │ └── marking.md
│ │ │ ├── form-structure/
│ │ │ │ ├── form-structure1-download.html
│ │ │ │ ├── form-structure1.html
│ │ │ │ └── marking.md
│ │ │ ├── form-validation/
│ │ │ │ ├── form-validation1-download.html
│ │ │ │ ├── form-validation2-download.html
│ │ │ │ ├── form-validation3-download.html
│ │ │ │ └── marking.md
│ │ │ ├── html5-controls/
│ │ │ │ ├── html5-controls1-download.html
│ │ │ │ ├── html5-controls1.html
│ │ │ │ ├── html5-controls2-download.html
│ │ │ │ ├── html5-controls2.html
│ │ │ │ └── marking.md
│ │ │ ├── other-controls/
│ │ │ │ ├── marking.md
│ │ │ │ ├── other-controls1-download.html
│ │ │ │ ├── other-controls1.html
│ │ │ │ ├── other-controls2-download.html
│ │ │ │ ├── other-controls2.html
│ │ │ │ ├── other-controls3-download.html
│ │ │ │ └── other-controls3.html
│ │ │ ├── playable.js
│ │ │ ├── styles.css
│ │ │ └── styling-basics/
│ │ │ ├── marking.md
│ │ │ └── styling-basics1-download.html
│ │ ├── tel-example/
│ │ │ └── index.html
│ │ ├── text-example/
│ │ │ └── index.html
│ │ ├── time-example/
│ │ │ └── index.html
│ │ ├── toggle-switch-example/
│ │ │ └── index.html
│ │ ├── url-example/
│ │ │ └── index.html
│ │ ├── week-example/
│ │ │ └── index.html
│ │ └── your-first-HTML-form/
│ │ ├── first-form-styled.html
│ │ └── first-form.html
│ ├── introduction-to-html/
│ │ ├── advanced-text-formatting/
│ │ │ ├── description-list.html
│ │ │ ├── other-semantics.html
│ │ │ └── quotations.html
│ │ ├── creating-hyperlinks/
│ │ │ ├── contacts.html
│ │ │ ├── index.html
│ │ │ └── projects/
│ │ │ └── index.html
│ │ ├── debugging-html/
│ │ │ ├── debug-example-fixed.html
│ │ │ └── debug-example.html
│ │ ├── document_and_website_structure/
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ ├── getting-started/
│ │ │ └── index.html
│ │ ├── html-text-formatting/
│ │ │ ├── text-complete.html
│ │ │ └── text-start.html
│ │ ├── marking-up-a-letter-finished/
│ │ │ ├── index.html
│ │ │ └── marking-guide.md
│ │ ├── marking-up-a-letter-start/
│ │ │ ├── css.txt
│ │ │ └── letter-text.txt
│ │ ├── navigation-menu-marked-up/
│ │ │ ├── index.html
│ │ │ ├── pictures.html
│ │ │ ├── projects.html
│ │ │ └── social.html
│ │ ├── navigation-menu-start/
│ │ │ ├── index.html
│ │ │ ├── pictures.html
│ │ │ ├── projects.html
│ │ │ └── social.html
│ │ ├── structuring-a-page-of-content-finished/
│ │ │ ├── index.html
│ │ │ ├── marking-guide.md
│ │ │ └── style.css
│ │ ├── structuring-a-page-of-content-start/
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ ├── tasks/
│ │ │ ├── advanced-text/
│ │ │ │ ├── advanced-text1-download.html
│ │ │ │ ├── advanced-text1-finished.html
│ │ │ │ ├── advanced-text1.html
│ │ │ │ ├── advanced-text2-download.html
│ │ │ │ ├── advanced-text2-finished.html
│ │ │ │ ├── advanced-text2.html
│ │ │ │ └── marking.md
│ │ │ ├── basic-text/
│ │ │ │ ├── basic-text1-download.html
│ │ │ │ ├── basic-text1-finished.html
│ │ │ │ ├── basic-text1.html
│ │ │ │ ├── basic-text2-download.html
│ │ │ │ ├── basic-text2-finished.html
│ │ │ │ ├── basic-text2.html
│ │ │ │ ├── basic-text3-download.html
│ │ │ │ ├── basic-text3-finished.html
│ │ │ │ ├── basic-text3.html
│ │ │ │ └── marking.md
│ │ │ ├── links/
│ │ │ │ ├── links1-download.html
│ │ │ │ ├── links1.html
│ │ │ │ ├── links2-download.html
│ │ │ │ ├── links2.html
│ │ │ │ ├── links3-download.html
│ │ │ │ ├── links3.html
│ │ │ │ ├── marking.md
│ │ │ │ ├── narwhals.html
│ │ │ │ └── whales.html
│ │ │ ├── playable.js
│ │ │ └── styles.css
│ │ └── the-html-head/
│ │ ├── css-and-js.html
│ │ ├── meta-example.html
│ │ ├── script.js
│ │ ├── style.css
│ │ └── title-example.html
│ ├── multimedia-and-embedding/
│ │ ├── adding-vector-graphics-to-the-web/
│ │ │ └── vector-versus-raster.html
│ │ ├── images-in-html/
│ │ │ └── index.html
│ │ ├── mdn-splash-page-finished/
│ │ │ ├── index.html
│ │ │ └── marking-guide.md
│ │ ├── mdn-splash-page-start/
│ │ │ └── index.html
│ │ ├── other-embedding-technologies/
│ │ │ ├── iframe-detail.html
│ │ │ ├── iframe-youtube.html
│ │ │ ├── object-image.html
│ │ │ └── object-pdf.html
│ │ ├── responsive-images/
│ │ │ ├── not-responsive.html
│ │ │ ├── responsive.html
│ │ │ └── srcset-resolutions.html
│ │ ├── tasks/
│ │ │ ├── images/
│ │ │ │ ├── images1-download.html
│ │ │ │ ├── images1.html
│ │ │ │ ├── images2-download.html
│ │ │ │ ├── images2.html
│ │ │ │ ├── images3-download.html
│ │ │ │ ├── images3.html
│ │ │ │ └── marking.md
│ │ │ ├── media-embed/
│ │ │ │ ├── marking.md
│ │ │ │ ├── media/
│ │ │ │ │ ├── subtitles_en.vtt
│ │ │ │ │ └── video.webm
│ │ │ │ ├── mediaembed1-download.html
│ │ │ │ ├── mediaembed1.html
│ │ │ │ ├── mediaembed2-download.html
│ │ │ │ ├── mediaembed2.html
│ │ │ │ ├── mediaembed3-download.html
│ │ │ │ └── mediaembed3.html
│ │ │ ├── playable.js
│ │ │ └── styles.css
│ │ └── video-and-audio-content/
│ │ ├── extra-video-features.html
│ │ ├── multiple-audio-formats.html
│ │ ├── multiple-video-formats-no-controls.html
│ │ ├── multiple-video-formats.html
│ │ ├── rabbit320.webm
│ │ ├── simple-video.html
│ │ └── viper.ogg
│ └── tables/
│ ├── advanced/
│ │ ├── items-sold-headers.html
│ │ ├── items-sold-scope.html
│ │ ├── items-sold.html
│ │ ├── minimal-table.css
│ │ ├── nested-tables.html
│ │ ├── spending-record-finished.html
│ │ ├── spending-record.html
│ │ └── timetable-caption.html
│ ├── assessment-finished/
│ │ ├── marking-guide.md
│ │ ├── minimal-table.css
│ │ └── planets-data.html
│ ├── assessment-start/
│ │ ├── blank-template.html
│ │ ├── minimal-table.css
│ │ └── planets-data.txt
│ └── basic/
│ ├── animals-table-fixed.html
│ ├── animals-table.html
│ ├── blank-template.html
│ ├── dogs-table-fixed.html
│ ├── dogs-table.html
│ ├── minimal-table.css
│ ├── personal-pronouns-styled.html
│ ├── personal-pronouns.html
│ ├── simple-table.html
│ ├── timetable-fixed.html
│ └── timetable.html
├── javascript/
│ ├── apis/
│ │ ├── client-side-storage/
│ │ │ ├── cache-sw/
│ │ │ │ └── video-store-offline/
│ │ │ │ ├── index.html
│ │ │ │ ├── index.js
│ │ │ │ ├── style.css
│ │ │ │ ├── sw.js
│ │ │ │ └── videos/
│ │ │ │ ├── crystal.webm
│ │ │ │ ├── elf.webm
│ │ │ │ ├── frog.webm
│ │ │ │ ├── monster.webm
│ │ │ │ ├── pig.webm
│ │ │ │ └── rabbit.webm
│ │ │ ├── indexeddb/
│ │ │ │ ├── notes/
│ │ │ │ │ ├── index-start.js
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── index.js
│ │ │ │ │ └── style.css
│ │ │ │ └── video-store/
│ │ │ │ ├── index.html
│ │ │ │ ├── index.js
│ │ │ │ ├── style.css
│ │ │ │ └── videos/
│ │ │ │ ├── crystal.webm
│ │ │ │ ├── elf.webm
│ │ │ │ ├── frog.webm
│ │ │ │ ├── monster.webm
│ │ │ │ ├── pig.webm
│ │ │ │ └── rabbit.webm
│ │ │ └── web-storage/
│ │ │ ├── index.html
│ │ │ ├── index.js
│ │ │ └── personal-greeting.html
│ │ ├── document-manipulation/
│ │ │ ├── dom-example-manipulated.html
│ │ │ ├── dom-example.html
│ │ │ ├── shopping-list-finished.html
│ │ │ └── shopping-list.html
│ │ ├── drawing-graphics/
│ │ │ ├── getting-started/
│ │ │ │ ├── 0_canvas_start/
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── script.js
│ │ │ │ │ └── style.css
│ │ │ │ ├── 1_canvas_template/
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── script.js
│ │ │ │ │ └── style.css
│ │ │ │ ├── 2_canvas_rectangles/
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── script.js
│ │ │ │ │ └── style.css
│ │ │ │ ├── 3_canvas_paths/
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── script.js
│ │ │ │ │ └── style.css
│ │ │ │ ├── 4_canvas_text/
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── script.js
│ │ │ │ │ └── style.css
│ │ │ │ └── 5_canvas_images/
│ │ │ │ ├── index.html
│ │ │ │ ├── script.js
│ │ │ │ └── style.css
│ │ │ ├── loops_animation/
│ │ │ │ ├── 6_canvas_for_loop/
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── script.js
│ │ │ │ │ └── style.css
│ │ │ │ ├── 7_canvas_walking_animation/
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── script.js
│ │ │ │ │ └── style.css
│ │ │ │ └── 8_canvas_drawing_app/
│ │ │ │ ├── index.html
│ │ │ │ ├── script.js
│ │ │ │ └── style.css
│ │ │ ├── threejs-cube/
│ │ │ │ ├── index.html
│ │ │ │ ├── script.js
│ │ │ │ └── style.css
│ │ │ └── threejs-video-cube/
│ │ │ ├── index.html
│ │ │ ├── script.js
│ │ │ └── style.css
│ │ ├── fetching-data/
│ │ │ ├── can-store/
│ │ │ │ ├── can-script.js
│ │ │ │ ├── can-style.css
│ │ │ │ ├── index.html
│ │ │ │ └── products.json
│ │ │ ├── can-store-xhr/
│ │ │ │ ├── can-script.js
│ │ │ │ ├── can-style.css
│ │ │ │ ├── index.html
│ │ │ │ └── products.json
│ │ │ ├── fetch-finish.html
│ │ │ ├── fetch-start.html
│ │ │ ├── verse1.txt
│ │ │ ├── verse2.txt
│ │ │ ├── verse3.txt
│ │ │ └── verse4.txt
│ │ ├── introduction/
│ │ │ ├── bouncing-balls.html
│ │ │ ├── main.js
│ │ │ ├── style.css
│ │ │ └── web-audio/
│ │ │ └── index.html
│ │ ├── third-party-apis/
│ │ │ ├── mapquest/
│ │ │ │ ├── finished/
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── script.js
│ │ │ │ │ └── style.css
│ │ │ │ └── start/
│ │ │ │ ├── index.html
│ │ │ │ ├── script.js
│ │ │ │ └── style.css
│ │ │ ├── nytimes/
│ │ │ │ ├── finished/
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── script.js
│ │ │ │ │ └── style.css
│ │ │ │ └── start/
│ │ │ │ ├── index.html
│ │ │ │ ├── script.js
│ │ │ │ └── style.css
│ │ │ └── youtube/
│ │ │ ├── index.html
│ │ │ ├── script.js
│ │ │ └── youtube.css
│ │ └── video-audio/
│ │ ├── finished/
│ │ │ ├── custom-player.js
│ │ │ ├── index.html
│ │ │ ├── style.css
│ │ │ └── video/
│ │ │ └── sintel-short.webm
│ │ └── start/
│ │ ├── index.html
│ │ ├── style.css
│ │ └── video/
│ │ └── sintel-short.webm
│ ├── asynchronous/
│ │ ├── sequencing-animations/
│ │ │ ├── finished/
│ │ │ │ ├── index.html
│ │ │ │ ├── main.js
│ │ │ │ └── style.css
│ │ │ ├── marking-guide.md
│ │ │ └── start/
│ │ │ ├── index.html
│ │ │ ├── main.js
│ │ │ └── style.css
│ │ └── workers/
│ │ ├── finished/
│ │ │ ├── generate.js
│ │ │ ├── index.html
│ │ │ ├── main.js
│ │ │ └── style.css
│ │ └── start/
│ │ ├── generate.js
│ │ ├── index.html
│ │ ├── main.js
│ │ └── style.css
│ ├── building-blocks/
│ │ ├── allowance-updater.html
│ │ ├── calendar-finished.html
│ │ ├── events/
│ │ │ ├── preventdefault-validation.html
│ │ │ ├── rabbit320.webm
│ │ │ ├── random-color-addeventlistener.html
│ │ │ ├── random-color-eventhandlerattributes.html
│ │ │ ├── random-color-eventhandlerproperty.html
│ │ │ ├── random-color-eventobject.html
│ │ │ ├── show-video-box-fixed.html
│ │ │ ├── show-video-box.html
│ │ │ └── useful-eventtarget.html
│ │ ├── functions/
│ │ │ ├── conflict.html
│ │ │ ├── first.js
│ │ │ ├── function-library-finished.html
│ │ │ ├── function-library.html
│ │ │ ├── function-scope.html
│ │ │ ├── function-stage-2.html
│ │ │ ├── function-stage-3.html
│ │ │ ├── function-stage-4.html
│ │ │ ├── function-start.html
│ │ │ └── second.js
│ │ ├── gallery/
│ │ │ ├── index.html
│ │ │ ├── main.js
│ │ │ ├── marking-guide.md
│ │ │ └── style.css
│ │ ├── loops/
│ │ │ ├── basic-for-improved.html
│ │ │ ├── basic-for.html
│ │ │ ├── contact-search.html
│ │ │ ├── do-while.html
│ │ │ ├── guest-list.html
│ │ │ ├── integer-squares.html
│ │ │ ├── launch-countdown.html
│ │ │ ├── random-canvas-circles.html
│ │ │ └── while.html
│ │ ├── more-color-choices-finished.html
│ │ ├── simple-else-if.html
│ │ ├── simple-switch.html
│ │ ├── simple-ternary.html
│ │ └── tasks/
│ │ ├── conditionals/
│ │ │ ├── conditionals1-download.html
│ │ │ ├── conditionals1.html
│ │ │ ├── conditionals2-download.html
│ │ │ ├── conditionals2.html
│ │ │ ├── conditionals3-download.html
│ │ │ ├── conditionals3.html
│ │ │ └── marking.md
│ │ ├── events/
│ │ │ ├── events1-download.html
│ │ │ ├── events1.html
│ │ │ ├── events2-download.html
│ │ │ ├── events2.html
│ │ │ ├── events3-download.html
│ │ │ ├── events3.html
│ │ │ └── marking.md
│ │ ├── functions/
│ │ │ ├── functions1-download.html
│ │ │ ├── functions1.html
│ │ │ ├── functions2-download.html
│ │ │ ├── functions2.html
│ │ │ ├── functions3-download.html
│ │ │ ├── functions3.html
│ │ │ ├── functions4-download.html
│ │ │ ├── functions4.html
│ │ │ └── marking.md
│ │ ├── loops/
│ │ │ ├── loops1-download.html
│ │ │ ├── loops2-download.html
│ │ │ ├── loops3-download.html
│ │ │ └── marking.md
│ │ ├── playable.js
│ │ └── styles.css
│ ├── introduction-to-js-1/
│ │ ├── assessment-finished/
│ │ │ ├── index.html
│ │ │ ├── main.js
│ │ │ └── marking-guide.md
│ │ ├── assessment-start/
│ │ │ ├── index.html
│ │ │ └── raw-text.txt
│ │ ├── first-splash/
│ │ │ ├── number-guessing-game-start.html
│ │ │ └── number-guessing-game.html
│ │ ├── maths/
│ │ │ ├── conditional.html
│ │ │ └── editable_canvas.html
│ │ ├── tasks/
│ │ │ ├── arrays/
│ │ │ │ ├── arrays1-download.html
│ │ │ │ ├── arrays1.html
│ │ │ │ ├── arrays2-download.html
│ │ │ │ ├── arrays2.html
│ │ │ │ ├── arrays3-download.html
│ │ │ │ ├── arrays3.html
│ │ │ │ ├── arrays4-download.html
│ │ │ │ ├── arrays4.html
│ │ │ │ └── marking.md
│ │ │ ├── math/
│ │ │ │ ├── marking.md
│ │ │ │ ├── math1-download.html
│ │ │ │ ├── math1.html
│ │ │ │ ├── math2-download.html
│ │ │ │ ├── math2.html
│ │ │ │ ├── math3-download.html
│ │ │ │ └── math3.html
│ │ │ ├── playable.js
│ │ │ ├── strings/
│ │ │ │ ├── marking.md
│ │ │ │ ├── strings1-download.html
│ │ │ │ ├── strings1.html
│ │ │ │ ├── strings2-download.html
│ │ │ │ ├── strings2.html
│ │ │ │ ├── strings3-download.html
│ │ │ │ ├── strings3.html
│ │ │ │ ├── strings4-download.html
│ │ │ │ └── strings4.html
│ │ │ ├── styles.css
│ │ │ └── variables/
│ │ │ ├── marking.md
│ │ │ ├── variables1-download.html
│ │ │ ├── variables1.html
│ │ │ ├── variables2-download.html
│ │ │ ├── variables2.html
│ │ │ ├── variables3-download.html
│ │ │ └── variables3.html
│ │ ├── troubleshooting/
│ │ │ └── number-game-errors.html
│ │ └── what-is-js/
│ │ ├── apply-javascript-external.html
│ │ ├── apply-javascript-internal.html
│ │ ├── apply-javascript.html
│ │ ├── javascript-label.html
│ │ └── script.js
│ └── oojs/
│ ├── advanced/
│ │ ├── es2015-class-inheritance.html
│ │ ├── es2015-getters-setters.html
│ │ ├── oojs-class-inheritance-finished.html
│ │ ├── oojs-class-inheritance-start.html
│ │ ├── oojs-class-inheritance-student.html
│ │ └── oojs-class-prototype.html
│ ├── assessment/
│ │ ├── index.html
│ │ ├── main.js
│ │ ├── marking-guide.md
│ │ └── style.css
│ ├── bouncing-balls/
│ │ ├── index-finished.html
│ │ ├── index.html
│ │ ├── main-finished.js
│ │ ├── main.js
│ │ └── style.css
│ ├── introduction/
│ │ ├── oojs-class-finished.html
│ │ ├── oojs-class-further-exercises.html
│ │ ├── oojs-finished.html
│ │ └── oojs.html
│ ├── json/
│ │ ├── JSONTest.html
│ │ ├── heroes-finished-json-parse.html
│ │ ├── heroes-finished.html
│ │ ├── heroes.html
│ │ ├── style.css
│ │ └── superheroes.json
│ └── tasks/
│ ├── json/
│ │ ├── json1-download.html
│ │ ├── json1.html
│ │ ├── marking.md
│ │ └── sample.json
│ ├── object-basics/
│ │ ├── marking.md
│ │ ├── object-basics1-download.html
│ │ ├── object-basics1.html
│ │ ├── object-basics2-download.html
│ │ ├── object-basics2.html
│ │ ├── object-basics3-download.html
│ │ ├── object-basics3.html
│ │ ├── object-basics4-download.html
│ │ └── object-basics4.html
│ ├── oojs/
│ │ ├── marking.md
│ │ ├── oojs1-download.html
│ │ ├── oojs1.html
│ │ ├── oojs2-download.html
│ │ └── oojs2.html
│ ├── playable.js
│ └── styles.css
└── tools-testing/
└── cross-browser-testing/
├── accessibility/
│ ├── bad-semantics.html
│ ├── fake-div-buttons.html
│ ├── good-semantics.html
│ └── native-keyboard-accessibility.html
├── automation/
│ ├── call_bstack.js
│ ├── call_sauce.js
│ ├── gulpfile.js
│ ├── index.html
│ ├── main.js
│ └── style.css
├── feature-detection/
│ ├── basic-styling.css
│ ├── css-feature-detect-finished.html
│ ├── css-feature-detect.html
│ ├── flex-layout.css
│ ├── float-layout.css
│ ├── modernizr-css.css
│ ├── modernizr-css.html
│ ├── modernizr-custom.js
│ ├── modernizr-js.html
│ ├── supports-feature-detect.html
│ └── supports-styling.css
├── html-css/
│ ├── MooTools-Core-1.6.0.js
│ ├── button-with-fallback.html
│ ├── forms-test.html
│ ├── selectivizr-example-start.html
│ ├── selectivizr-example.html
│ ├── selectivizr-min.js
│ └── style.css
├── javascript/
│ ├── .eslintrc.js
│ ├── arrow-function.html
│ ├── bad-for-loop.html
│ ├── broken-js-test.js
│ ├── es6-promise.js
│ ├── fetch-broken/
│ │ ├── index.html
│ │ ├── script.js
│ │ └── style.css
│ ├── fetch-fixed/
│ │ ├── index.html
│ │ ├── script.js
│ │ └── style.css
│ ├── fetch-polyfill-finished.html
│ ├── fetch-polyfill-only-when-needed.html
│ ├── fetch-polyfill.html
│ ├── fetch.js
│ ├── good-for-loop.html
│ ├── polyfills.js
│ └── style.css
├── selenium/
│ ├── bstack_google_test.js
│ ├── google_test.js
│ ├── google_test_multiple.js
│ ├── google_test_remote.js
│ ├── mocha_test.js
│ ├── quick_test.js
│ └── sauce_google_test.js
└── strategies/
└── hidden-info-panel.html
SYMBOL INDEX (291 symbols across 53 files)
FILE: accessibility/aria/validation-checkbox-disabled.js
function validate (line 33) | function validate(e) {
function createLink (line 48) | function createLink(testItem) {
function toggleMusician (line 68) | function toggleMusician(bool) {
FILE: accessibility/aria/validation.js
function validate (line 21) | function validate(e) {
function createLink (line 36) | function createLink(testItem) {
FILE: accessibility/assessment-finished/main.js
function submitComment (line 31) | function submitComment() {
FILE: accessibility/assessment-start/assessment-files/main.js
function submitComment (line 31) | function submitComment() {
FILE: accessibility/assessment-start/main.js
function submitComment (line 31) | function submitComment() {
FILE: accessibility/css/validation.js
function validate (line 21) | function validate(e) {
function createLink (line 36) | function createLink(testItem) {
FILE: accessibility/multimedia/custom-controls-OOJS/main.js
function PlayerController (line 26) | function PlayerController(player, playPauseBtn, stopBtn, rwdBtn, fwdBtn,...
FILE: accessibility/tasks/html-css/playable.js
function fillCode (line 9) | function fillCode() {
FILE: accessibility/tasks/js/playable.js
function fillCode (line 7) | function fillCode() {
FILE: css/css-layout/practical-positioning-examples/tabs-manual.js
class TabsManual (line 12) | class TabsManual {
method constructor (line 13) | constructor(groupNode) {
method setSelectedTab (line 46) | setSelectedTab(currentTab) {
method moveFocusToTab (line 61) | moveFocusToTab(currentTab) {
method moveFocusToPreviousTab (line 65) | moveFocusToPreviousTab(currentTab) {
method moveFocusToNextTab (line 76) | moveFocusToNextTab(currentTab) {
method onKeydown (line 89) | onKeydown(event) {
method onClick (line 126) | onClick(event) {
FILE: css/styling-text/typesetting-a-homepage-finished/original-font-files/Lovato Light-Webfont/Webfonts/lovato_light_macroman/specimen_files/easytabs.js
function hideAll (line 4) | function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
function changeContent (line 5) | function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClas...
FILE: html/forms/sending-form-data/python-example.py
function form (line 5) | def form():
function hello (line 9) | def hello():
FILE: html/forms/tasks/playable.js
function fillCode (line 9) | function fillCode() {
FILE: html/introduction-to-html/tasks/playable.js
function fillCode (line 9) | function fillCode() {
FILE: html/multimedia-and-embedding/tasks/playable.js
function fillCode (line 9) | function fillCode() {
FILE: javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js
function init (line 14) | function init() {
function fetchVideoFromNetwork (line 35) | function fetchVideoFromNetwork(video) {
function storeVideo (line 52) | function storeVideo(mp4Blob, webmBlob, name) {
function displayVideo (line 70) | function displayVideo(mp4Blob, webmBlob, title) {
FILE: javascript/apis/client-side-storage/indexeddb/notes/index.js
function addData (line 50) | function addData(e) {
function displayData (line 84) | function displayData() {
function deleteItem (line 143) | function deleteItem(e) {
FILE: javascript/apis/client-side-storage/indexeddb/video-store/index.js
function init (line 14) | function init() {
function fetchVideoFromNetwork (line 35) | function fetchVideoFromNetwork(video) {
function storeVideo (line 52) | function storeVideo(mp4Blob, webmBlob, name) {
function displayVideo (line 70) | function displayVideo(mp4Blob, webmBlob, title) {
FILE: javascript/apis/client-side-storage/web-storage/index.js
function nameDisplayCheck (line 32) | function nameDisplayCheck() {
FILE: javascript/apis/drawing-graphics/getting-started/3_canvas_paths/script.js
function degToRad (line 9) | function degToRad(degrees) {
FILE: javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop/script.js
function degToRad (line 11) | function degToRad(degrees) {
function rand (line 15) | function rand(min, max) {
FILE: javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation/script.js
function draw (line 18) | function draw() {
FILE: javascript/apis/drawing-graphics/loops_animation/8_canvas_drawing_app/script.js
function degToRad (line 15) | function degToRad(degrees) {
function draw (line 43) | function draw() {
FILE: javascript/apis/drawing-graphics/threejs-cube/script.js
function draw (line 35) | function draw() {
FILE: javascript/apis/drawing-graphics/threejs-video-cube/script.js
function threeRender (line 25) | function threeRender(video) {
FILE: javascript/apis/fetching-data/can-store-xhr/can-script.js
function initialize (line 21) | function initialize(products) {
FILE: javascript/apis/fetching-data/can-store/can-script.js
function initialize (line 16) | function initialize(products) {
FILE: javascript/apis/introduction/main.js
function random (line 11) | function random(min, max) {
function randomRGB (line 17) | function randomRGB() {
function Ball (line 23) | function Ball() {
function loop (line 99) | function loop() {
FILE: javascript/apis/third-party-apis/nytimes/finished/script.js
function submitSearch (line 27) | function submitSearch(e){
function fetchResults (line 32) | function fetchResults(e) {
function displayResults (line 54) | function displayResults(json) {
function nextPage (line 108) | function nextPage(e) {
function previousPage (line 113) | function previousPage(e) {
FILE: javascript/apis/third-party-apis/youtube/script.js
function onClientLoad (line 13) | function onClientLoad() {
function onYouTubeApiLoad (line 18) | function onYouTubeApiLoad() {
function search (line 37) | function search(e) {
function onSearchResponse (line 56) | function onSearchResponse(response) {
function displayVideo (line 71) | function displayVideo(result, i) {
FILE: javascript/apis/video-audio/finished/custom-player.js
function playPauseMedia (line 23) | function playPauseMedia() {
function stopMedia (line 37) | function stopMedia() {
function mediaBackward (line 50) | function mediaBackward() {
function mediaForward (line 65) | function mediaForward() {
function windBackward (line 80) | function windBackward() {
function windForward (line 90) | function windForward() {
function setTime (line 100) | function setTime() {
FILE: javascript/asynchronous/workers/finished/generate.js
function generatePrimes (line 7) | function generatePrimes(quota) {
FILE: javascript/building-blocks/functions/first.js
function greeting (line 2) | function greeting() {
FILE: javascript/building-blocks/functions/second.js
function greeting (line 2) | function greeting() {
FILE: javascript/building-blocks/tasks/playable.js
function fillCode (line 7) | function fillCode() {
FILE: javascript/introduction-to-js-1/assessment-finished/main.js
function randomValueFromArray (line 5) | function randomValueFromArray(array){
function result (line 17) | function result() {
FILE: javascript/introduction-to-js-1/tasks/playable.js
function fillCode (line 7) | function fillCode() {
FILE: javascript/introduction-to-js-1/what-is-js/script.js
function createParagraph (line 1) | function createParagraph() {
FILE: javascript/oojs/assessment/main.js
function random (line 16) | function random(min,max) {
function randomRGB (line 23) | function randomRGB() {
class Shape (line 27) | class Shape {
method constructor (line 29) | constructor(x, y, velX, velY) {
class Ball (line 38) | class Ball extends Shape {
method constructor (line 40) | constructor(x, y, velX, velY, color, size) {
method draw (line 48) | draw() {
method update (line 55) | update() {
method collisionDetect (line 77) | collisionDetect() {
class EvilCircle (line 93) | class EvilCircle extends Shape {
method constructor (line 95) | constructor(x, y) {
method draw (line 119) | draw() {
method checkBounds (line 127) | checkBounds() {
method collisionDetect (line 145) | collisionDetect() {
function loop (line 186) | function loop() {
FILE: javascript/oojs/bouncing-balls/main-finished.js
function random (line 11) | function random(min, max) {
function randomRGB (line 17) | function randomRGB() {
class Ball (line 21) | class Ball {
method constructor (line 22) | constructor(x, y, velX, velY, color, size) {
method draw (line 31) | draw() {
method update (line 38) | update() {
method collisionDetect (line 59) | collisionDetect() {
function loop (line 92) | function loop() {
FILE: javascript/oojs/bouncing-balls/main.js
function random (line 11) | function random(min, max) {
function randomRGB (line 17) | function randomRGB() {
FILE: javascript/oojs/tasks/playable.js
function fillCode (line 7) | function fillCode() {
FILE: tools-testing/cross-browser-testing/automation/call_bstack.js
function getPlanDetails (line 7) | function getPlanDetails(){
FILE: tools-testing/cross-browser-testing/automation/gulpfile.js
function html (line 9) | function html(cb) {
function css (line 16) | function css(cb) {
function js (line 27) | function js(cb) {
FILE: tools-testing/cross-browser-testing/feature-detection/modernizr-custom.js
function is (line 3) | function is(A,e){return typeof A===e}
function testRunner (line 3) | function testRunner(){var A,e,t,n,r,i,o;for(var d in tests)if(tests.hasO...
function setClasses (line 3) | function setClasses(A){var e=docElement.className,t=Modernizr._config.cl...
function addTest (line 3) | function addTest(A,e){if("object"==typeof A)for(var t in A)hasOwnProp(A,...
function createElement (line 3) | function createElement(){return"function"!=typeof document.createElement...
function cssToDOM (line 3) | function cssToDOM(A){return A.replace(/([a-z])-([a-z])/g,function(A,e,t)...
function domToCSS (line 3) | function domToCSS(A){return A.replace(/([A-Z])/g,function(A,e){return"-"...
function getBody (line 3) | function getBody(){var A=document.body;return A||(A=createElement(isSVG?...
function injectElementWithStyles (line 3) | function injectElementWithStyles(A,e,t,n){var r,i,o,d,a="modernizr",s=cr...
function contains (line 3) | function contains(A,e){return!!~(""+A).indexOf(e)}
function roundedEquals (line 3) | function roundedEquals(A,e){return A-1===e||A===e||A+1===e}
function nativeTestProps (line 3) | function nativeTestProps(A,e){var t=A.length;if("CSS"in window&&"support...
function testProps (line 3) | function testProps(A,e,t,n){function r(){o&&(delete mStyle.style,delete ...
function fnBind (line 3) | function fnBind(A,e){return function(){return A.apply(e,arguments)}}
function testDOMProps (line 3) | function testDOMProps(A,e,t){var n;for(var r in A)if(A[r]in e)return t==...
function testPropsAll (line 3) | function testPropsAll(A,e,t,n,r){var i=A.charAt(0).toUpperCase()+A.slice...
function testAllProps (line 3) | function testAllProps(A,e,t){return testPropsAll(A,undefined,undefined,e...
function t (line 3) | function t(A,e){var t=A.createElement("p"),n=A.getElementsByTagName("hea...
function n (line 3) | function n(){var A=h.elements;return"string"==typeof A?A.split(" "):A}
function r (line 3) | function r(A,e){var t=h.elements;"string"!=typeof t&&(t=t.join(" ")),"st...
function i (line 3) | function i(A){var e=E[A[f]];return e||(e={},g++,A[f]=g,E[g]=e),e}
function o (line 3) | function o(A,t,n){if(t||(t=e),c)return t.createElement(A);n||(n=i(t));va...
function d (line 3) | function d(A,t){if(A||(A=e),c)return A.createDocumentFragment();t=t||i(A...
function a (line 3) | function a(A,e){e.cache||(e.cache={},e.createElem=A.createElement,e.crea...
function s (line 3) | function s(A){A||(A=e);var n=i(A);return!h.shivCSS||l||n.hasCSS||(n.hasC...
function A (line 3) | function A(){clearTimeout(e),window.removeEventListener("deviceproximity...
function A (line 3) | function A(A,e,t){function n(e){var n=e&&"load"===e.type?1==r.width:!1,i...
function A (line 3) | function A(){var A=new Image;A.onerror=function(){addTest("datauri",!0),...
function A (line 3) | function A(){addTest("blobworkers",!1),e()}
function e (line 3) | function e(){d&&n.revokeObjectURL(d),o&&o.terminate(),a&&clearTimeout(a)}
function A (line 3) | function A(A,t){var n;return A?(t&&"string"!=typeof t||(t=createElement(...
function A (line 3) | function A(t){clearTimeout(e);var r=t!==undefined&&"loadeddata"===t.type...
function A (line 4) | function A(A,e){var t;return window.getComputedStyle?t=document.defaultV...
function e (line 4) | function e(){docElement.removeChild(t),t=null,n=null,r=null}
function A (line 4) | function A(o){r++,clearTimeout(e);var d=o&&"playing"===o.type||0!==i.cur...
function A (line 5) | function A(){addTest("transferables",!1),e()}
function e (line 5) | function e(){d&&URL.revokeObjectURL(d),a&&a.terminate(),r&&clearTimeout(r)}
function A (line 5) | function A(){function t(){try{var A=createElement("div"),e=createElement...
FILE: tools-testing/cross-browser-testing/html-css/MooTools-Core-1.6.0.js
function forEachObjectEnumberableKey (line 70) | function forEachObjectEnumberableKey(object, fn, bind){
function resolve (line 1376) | function resolve(thenable, value){
function fulfill (line 1422) | function fulfill(thenable, value){
function reject (line 1431) | function reject(thenable, reason){
function reset (line 1440) | function reset(thenable){
function react (line 1447) | function react(thenable){
function handle (line 1466) | function handle(result, reactions, type){
function parser (line 1726) | function parser(
function styleNumber (line 4943) | function styleNumber(element, style){
function topBorder (line 4949) | function topBorder(element){
function leftBorder (line 4953) | function leftBorder(element){
function isBody (line 4957) | function isBody(element){
function getCompatElement (line 4961) | function getCompatElement(element){
FILE: tools-testing/cross-browser-testing/html-css/selectivizr-min.js
function A (line 5) | function A(a){return a.replace(B,h).replace(C,function(a,d,b){for(var a=...
function I (line 5) | function I(a){var c=!0,d=w(a.slice(1)),b=a.substring(0,5)==":not(",e,f;b...
function w (line 5) | function w(a){return M+"-"+(m==6&&N?O++:a.replace(P,function(a){return a...
function D (line 5) | function D(a){return a.replace(x,h).replace(Q,o)}
function g (line 5) | function g(a,c,d){var b=a.className,c=u(b,c,d);if(c!=b)a.className=c,a.p...
function u (line 5) | function u(a,c,d){var b=RegExp("(^|\\s)"+c+"(\\s|$)"),e=b.test(a);return...
function k (line 5) | function k(a,c,d){a.attachEvent("on"+c,d)}
function r (line 5) | function r(a,c){if(/^https?:\/\//i.test(a))return c.substring(0,c.indexO...
function y (line 5) | function y(a){if(a)return n.open("GET",a,!1),n.send(),(n.status==200?n.r...
function U (line 5) | function U(){var a,c;a=f.getElementsByTagName("BASE");for(var d=a.length...
function d (line 5) | function d(){try{p.doScroll("left")}catch(a){setTimeout(d,50);return}b("...
function b (line 5) | function b(d){if(!(d.type=="readystatechange"&&f.readyState!="complete")...
FILE: tools-testing/cross-browser-testing/javascript/es6-promise.js
function objectOrFunction (line 15) | function objectOrFunction(x) {
function isFunction (line 19) | function isFunction(x) {
function setScheduler (line 54) | function setScheduler(scheduleFn) {
function setAsap (line 58) | function setAsap(asapFn) {
function useNextTick (line 71) | function useNextTick() {
function useVertxTimer (line 80) | function useVertxTimer() {
function useMutationObserver (line 90) | function useMutationObserver() {
function useMessageChannel (line 102) | function useMessageChannel() {
function useSetTimeout (line 110) | function useSetTimeout() {
function flush (line 120) | function flush() {
function attemptVertx (line 134) | function attemptVertx() {
function then (line 159) | function then(onFulfillment, onRejection) {
function resolve (line 217) | function resolve(object) {
function noop (line 232) | function noop() {}
function selfFulfillment (line 240) | function selfFulfillment() {
function cannotReturnOwn (line 244) | function cannotReturnOwn() {
function getThen (line 248) | function getThen(promise) {
function tryThen (line 257) | function tryThen(then, value, fulfillmentHandler, rejectionHandler) {
function handleForeignThenable (line 265) | function handleForeignThenable(promise, thenable, then) {
function handleOwnThenable (line 294) | function handleOwnThenable(promise, thenable) {
function handleMaybeThenable (line 308) | function handleMaybeThenable(promise, maybeThenable, then$$) {
function _resolve (line 324) | function _resolve(promise, value) {
function publishRejection (line 334) | function publishRejection(promise) {
function fulfill (line 342) | function fulfill(promise, value) {
function _reject (line 355) | function _reject(promise, reason) {
function subscribe (line 365) | function subscribe(parent, child, onFulfillment, onRejection) {
function publish (line 380) | function publish(promise) {
function ErrorObject (line 406) | function ErrorObject() {
function tryCatch (line 412) | function tryCatch(callback, detail) {
function invokeCallback (line 421) | function invokeCallback(settled, promise, callback, detail) {
function initializePromise (line 461) | function initializePromise(promise, resolver) {
function nextId (line 474) | function nextId() {
function makePromise (line 478) | function makePromise(promise) {
function Enumerator (line 485) | function Enumerator(Constructor, input) {
function validationError (line 514) | function validationError() {
function all (line 628) | function all(entries) {
function race (line 697) | function race(entries) {
function reject (line 749) | function reject(reason) {
function needsResolver (line 757) | function needsResolver() {
function needsNew (line 761) | function needsNew() {
function Promise (line 868) | function Promise(resolver) {
function polyfill (line 1117) | function polyfill() {
FILE: tools-testing/cross-browser-testing/javascript/fetch-broken/script.js
function populateHeader (line 11) | function populateHeader(jsonObj) {
function showHeroes (line 21) | function showHeroes(jsonObj) {
FILE: tools-testing/cross-browser-testing/javascript/fetch-fixed/script.js
function populateHeader (line 14) | function populateHeader(jsonObj) {
function showHeroes (line 24) | function showHeroes(jsonObj) {
FILE: tools-testing/cross-browser-testing/javascript/fetch.js
function normalizeName (line 23) | function normalizeName(name) {
function normalizeValue (line 33) | function normalizeValue(value) {
function iteratorFor (line 41) | function iteratorFor(items) {
function Headers (line 58) | function Headers(headers) {
function consumed (line 135) | function consumed(body) {
function fileReaderReady (line 142) | function fileReaderReady(reader) {
function readBlobAsArrayBuffer (line 153) | function readBlobAsArrayBuffer(blob) {
function readBlobAsText (line 159) | function readBlobAsText(blob) {
function Body (line 165) | function Body() {
function normalizeMethod (line 255) | function normalizeMethod(method) {
function Request (line 260) | function Request(input, options) {
function decode (line 300) | function decode(body) {
function headers (line 313) | function headers(xhr) {
function Response (line 327) | function Response(bodyInit, options) {
function responseURL (line 383) | function responseURL() {
FILE: tools-testing/cross-browser-testing/javascript/polyfills.js
function objectOrFunction (line 15) | function objectOrFunction(x) {
function isFunction (line 19) | function isFunction(x) {
function setScheduler (line 54) | function setScheduler(scheduleFn) {
function setAsap (line 58) | function setAsap(asapFn) {
function useNextTick (line 71) | function useNextTick() {
function useVertxTimer (line 80) | function useVertxTimer() {
function useMutationObserver (line 90) | function useMutationObserver() {
function useMessageChannel (line 102) | function useMessageChannel() {
function useSetTimeout (line 110) | function useSetTimeout() {
function flush (line 120) | function flush() {
function attemptVertx (line 134) | function attemptVertx() {
function then (line 159) | function then(onFulfillment, onRejection) {
function resolve (line 217) | function resolve(object) {
function noop (line 232) | function noop() {}
function selfFulfillment (line 240) | function selfFulfillment() {
function cannotReturnOwn (line 244) | function cannotReturnOwn() {
function getThen (line 248) | function getThen(promise) {
function tryThen (line 257) | function tryThen(then, value, fulfillmentHandler, rejectionHandler) {
function handleForeignThenable (line 265) | function handleForeignThenable(promise, thenable, then) {
function handleOwnThenable (line 294) | function handleOwnThenable(promise, thenable) {
function handleMaybeThenable (line 308) | function handleMaybeThenable(promise, maybeThenable, then$$) {
function _resolve (line 324) | function _resolve(promise, value) {
function publishRejection (line 334) | function publishRejection(promise) {
function fulfill (line 342) | function fulfill(promise, value) {
function _reject (line 355) | function _reject(promise, reason) {
function subscribe (line 365) | function subscribe(parent, child, onFulfillment, onRejection) {
function publish (line 380) | function publish(promise) {
function ErrorObject (line 406) | function ErrorObject() {
function tryCatch (line 412) | function tryCatch(callback, detail) {
function invokeCallback (line 421) | function invokeCallback(settled, promise, callback, detail) {
function initializePromise (line 461) | function initializePromise(promise, resolver) {
function nextId (line 474) | function nextId() {
function makePromise (line 478) | function makePromise(promise) {
function Enumerator (line 485) | function Enumerator(Constructor, input) {
function validationError (line 514) | function validationError() {
function all (line 628) | function all(entries) {
function race (line 697) | function race(entries) {
function reject (line 749) | function reject(reason) {
function needsResolver (line 757) | function needsResolver() {
function needsNew (line 761) | function needsNew() {
function Promise (line 868) | function Promise(resolver) {
function polyfill (line 1117) | function polyfill() {
function normalizeName (line 1184) | function normalizeName(name) {
function normalizeValue (line 1194) | function normalizeValue(value) {
function iteratorFor (line 1202) | function iteratorFor(items) {
function Headers (line 1219) | function Headers(headers) {
function consumed (line 1296) | function consumed(body) {
function fileReaderReady (line 1303) | function fileReaderReady(reader) {
function readBlobAsArrayBuffer (line 1314) | function readBlobAsArrayBuffer(blob) {
function readBlobAsText (line 1320) | function readBlobAsText(blob) {
function Body (line 1326) | function Body() {
function normalizeMethod (line 1416) | function normalizeMethod(method) {
function Request (line 1421) | function Request(input, options) {
function decode (line 1461) | function decode(body) {
function headers (line 1474) | function headers(xhr) {
function Response (line 1488) | function Response(bodyInit, options) {
function responseURL (line 1544) | function responseURL() {
FILE: tools-testing/cross-browser-testing/selenium/google_test_multiple.js
function searchTest (line 16) | function searchTest(driver) {
Condensed preview — 828 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (1,875K chars).
[
{
"path": ".github/CODEOWNERS",
"chars": 601,
"preview": "# ----------------------------------------------------------------------------\n# CODEOWNERS\n# --------------------------"
},
{
"path": ".gitignore",
"chars": 11,
"preview": "*.DS_Store\n"
},
{
"path": ".prettierignore",
"chars": 304,
"preview": "# This .prettierignore file uses .gitignore syntax\n# see https://prettier.io/docs/en/ignore.html#ignoring-files-prettier"
},
{
"path": ".prettierrc.json",
"chars": 30,
"preview": "{\n \"bracketSameLine\": true\n}\n"
},
{
"path": ".vscode/cspell.json",
"chars": 1830,
"preview": "{\n \"$schema\": \"https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json\",\n \"version\": \"0.2\""
},
{
"path": ".vscode/extensions.json",
"chars": 143,
"preview": "{\n \"recommendations\": [\n \"davidanson.vscode-markdownlint\",\n \"esbenp.prettier-vscode\",\n \"streetsidesoftware.cod"
},
{
"path": ".vscode/project-words.txt",
"chars": 228,
"preview": "Bublé\nCEST\ndöner\nDwindlings\ngastropub\nGriffiths\nHalloumi\niframes\nkombucha\nKruse\nLeia\nListicle\nLovato\nModernizr\nninjitsu\n"
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 691,
"preview": "# Community Participation Guidelines\n\nThis repository is governed by Mozilla's code of conduct and etiquette guidelines."
},
{
"path": "LICENSE",
"chars": 6555,
"preview": "CC0 1.0 Universal\n\nStatement of Purpose\n\nThe laws of most jurisdictions throughout the world automatically confer\nexclus"
},
{
"path": "README.md",
"chars": 598,
"preview": "# learning-area\nWelcome to the GitHub repository for the [MDN Learning Area](https://developer.mozilla.org/en-US/Learn)."
},
{
"path": "SECURITY.md",
"chars": 1334,
"preview": "# Security Policy\n\n## Overview\n\nThis policy applies to MDN's website (`developer.mozilla.org`), backend services, and Gi"
},
{
"path": "accessibility/aria/aria-div-buttons.html",
"chars": 1518,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/aria/aria-live.html",
"chars": 1356,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=devic"
},
{
"path": "accessibility/aria/aria-no-live.html",
"chars": 1315,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=devic"
},
{
"path": "accessibility/aria/aria-tabbed-info-box.html",
"chars": 3967,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/aria/form-validation-checkbox-disabled.html",
"chars": 2172,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/aria/form-validation-updated.html",
"chars": 1650,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/aria/quotes.json",
"chars": 3342,
"preview": "[\n {\n \"quote\" : \"Life is about making an impact, not making an income.\",\n \"author\" : \"Kevin Kruse\"\n },\n {\n \""
},
{
"path": "accessibility/aria/validation-checkbox-disabled.js",
"chars": 2177,
"preview": "const inputs = document.querySelectorAll('input');\nconst labels = document.querySelectorAll('label');\nconst form = docum"
},
{
"path": "accessibility/aria/validation.js",
"chars": 1199,
"preview": "const inputs = document.querySelectorAll('input');\nconst labels = document.querySelectorAll('label');\nconst form = docum"
},
{
"path": "accessibility/aria/website-aria-roles/index.html",
"chars": 3355,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/aria/website-aria-roles/style.css",
"chars": 1553,
"preview": "/* || General setup */\n\nhtml, body {\n margin: 0;\n padding: 0;\n}\n\nhtml {\n font-size: 10px;\n background-color: #a9a9a9"
},
{
"path": "accessibility/aria/website-no-roles/index.html",
"chars": 3294,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/aria/website-no-roles/style.css",
"chars": 1556,
"preview": "/* || General setup */\n\nhtml, body {\n margin: 0;\n padding: 0;\n}\n\nhtml {\n font-size: 10px;\n background-color: #a9a9a9"
},
{
"path": "accessibility/assessment-finished/index.html",
"chars": 7521,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/assessment-finished/main.js",
"chars": 1398,
"preview": "// functionality for showing/hiding the comments section\n\nconst showHideBtn = document.querySelector('.show-hide');\ncons"
},
{
"path": "accessibility/assessment-finished/marking-guide.md",
"chars": 7361,
"preview": "# Marking guide for \"Accessibility troubleshooting\"\nThe following guide outlines a marking guide for the MDN Learning Ar"
},
{
"path": "accessibility/assessment-finished/style.css",
"chars": 2962,
"preview": "/* || General setup */\n\nhtml, body {\n margin: 0;\n padding: 0;\n}\n\nhtml {\n font-size: 10px;\n background-color: #dde;\n}"
},
{
"path": "accessibility/assessment-finished/transcript.html",
"chars": 514,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/assessment-start/assessment-files/index.html",
"chars": 7106,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/assessment-start/assessment-files/main.js",
"chars": 1398,
"preview": "// functionality for showing/hiding the comments section\n\nconst showHideBtn = document.querySelector('.show-hide');\ncons"
},
{
"path": "accessibility/assessment-start/assessment-files/style.css",
"chars": 3223,
"preview": "/* || General setup */\n\nhtml, body {\n margin: 0;\n padding: 0;\n}\n\nhtml {\n font-size: 10px;\n background-color: #dde;\n}"
},
{
"path": "accessibility/assessment-start/index.html",
"chars": 7106,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/assessment-start/main.js",
"chars": 1398,
"preview": "// functionality for showing/hiding the comments section\n\nconst showHideBtn = document.querySelector('.show-hide');\ncons"
},
{
"path": "accessibility/assessment-start/style.css",
"chars": 3223,
"preview": "/* || General setup */\n\nhtml, body {\n margin: 0;\n padding: 0;\n}\n\nhtml {\n font-size: 10px;\n background-color: #dde;\n}"
},
{
"path": "accessibility/css/form-css.html",
"chars": 1134,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/css/form-validation.html",
"chars": 1515,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/css/mouse-and-keyboard-events.html",
"chars": 1351,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/css/table-css.html",
"chars": 1233,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/css/validation.js",
"chars": 1199,
"preview": "const inputs = document.querySelectorAll('input');\nconst labels = document.querySelectorAll('label');\nconst form = docum"
},
{
"path": "accessibility/html/accessible-image.html",
"chars": 994,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/html/bad-form.html",
"chars": 438,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/html/bad-links.html",
"chars": 535,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/html/bad-semantics.html",
"chars": 2942,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/html/bad-table.html",
"chars": 608,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/html/dino-info.html",
"chars": 355,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/html/good-form.html",
"chars": 496,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/html/good-links.html",
"chars": 498,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/html/good-semantics.html",
"chars": 2819,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/html/native-keyboard-accessibility.html",
"chars": 1904,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/html/style.css",
"chars": 1002,
"preview": "/* || General setup */\n\nhtml, body {\n margin: 0;\n padding: 0;\n}\n\nhtml {\n font-size: 10px;\n}\n\nbody {\n width: 1200px;\n"
},
{
"path": "accessibility/html/table-layout.html",
"chars": 3694,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/mobile/common-job-types.html",
"chars": 1323,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/mobile/html5-form-examples.html",
"chars": 1474,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/mobile/multi-control-box-drag.html",
"chars": 2373,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/mobile/simple-box-drag.html",
"chars": 1980,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/mobile/simple-button-example.html",
"chars": 730,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/multimedia/audio-transcript-ui/index.html",
"chars": 2895,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/multimedia/audio-transcript-ui/main.js",
"chars": 1991,
"preview": "// grab references to buttons and video\n\nconst playPauseBtn = document.querySelector('.playpause');\nconst stopBtn = docu"
},
{
"path": "accessibility/multimedia/custom-controls-OOJS/index.html",
"chars": 1038,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/multimedia/custom-controls-OOJS/main.js",
"chars": 3035,
"preview": "// Get references to all audio and video players\n// Store them all in a single array\n\nconst videos = document.querySelec"
},
{
"path": "accessibility/multimedia/custom-controls-basic/index.html",
"chars": 884,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/multimedia/custom-controls-basic/main.js",
"chars": 1535,
"preview": "// grab references to buttons and video\n\nconst playPauseBtn = document.querySelector('.playpause');\nconst stopBtn = docu"
},
{
"path": "accessibility/multimedia/custom-controls-start.html",
"chars": 872,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/multimedia/custom-controls.css",
"chars": 601,
"preview": "* {\n box-sizing: border-box;\n}\n\nhtml {\n font-family: sans-serif;\n}\n\n.player {\n width: 480px;\n margin: 10px auto;\n b"
},
{
"path": "accessibility/multimedia/native-controls.html",
"chars": 803,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "accessibility/tasks/html-css/aria/aria1-download.html",
"chars": 896,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\"/>\n <title>WAI-ARIA: Task 1</title>\n <style>"
},
{
"path": "accessibility/tasks/html-css/aria/aria1.html",
"chars": 1734,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\" />\n <title>WAI-ARIA: Task 1</title>\n <link "
},
{
"path": "accessibility/tasks/html-css/aria/aria2-download.html",
"chars": 476,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\"/>\n <title>WAI-ARIA: Task 2</title>\n <style>"
},
{
"path": "accessibility/tasks/html-css/aria/aria2.html",
"chars": 990,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\" />\n <title>WAI-ARIA: Task 2</title>\n <link "
},
{
"path": "accessibility/tasks/html-css/aria/marking.md",
"chars": 3185,
"preview": "# WAI-ARIA marking guide\n\nThe aim of these tasks is to demonstrate an understanding of the techniques covered in the [WA"
},
{
"path": "accessibility/tasks/html-css/css/css-a11y1-download.html",
"chars": 775,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\"/>\n <title>CSS accessibility: Task 1</title>\n "
},
{
"path": "accessibility/tasks/html-css/css/css-a11y1.html",
"chars": 1349,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\" />\n <title>CSS accessibility: Task 1</title>\n "
},
{
"path": "accessibility/tasks/html-css/css/css-a11y2-download.html",
"chars": 1193,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\"/>\n <title>CSS accessibility: Task 2</title>\n "
},
{
"path": "accessibility/tasks/html-css/css/css-a11y2.html",
"chars": 2309,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\" />\n <title>CSS accessibility: Task 2</title>\n "
},
{
"path": "accessibility/tasks/html-css/css/marking.md",
"chars": 4440,
"preview": "# CSS and JS accessibility marking guide\n\nThe aim of these tasks is to demonstrate an understanding of the techniques co"
},
{
"path": "accessibility/tasks/html-css/html/html-a11y1-download.html",
"chars": 1442,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\"/>\n <title>HTML accessibility: Task 1</title>\n "
},
{
"path": "accessibility/tasks/html-css/html/html-a11y1.html",
"chars": 2638,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\" />\n <title>HTML accessibility: Task 1</title>\n"
},
{
"path": "accessibility/tasks/html-css/html/html-a11y2-download.html",
"chars": 915,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\"/>\n <title>HTML accessibility: Task 2</title>\n "
},
{
"path": "accessibility/tasks/html-css/html/html-a11y2.html",
"chars": 1588,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\" />\n <title>HTML accessibility: Task 2</title>\n"
},
{
"path": "accessibility/tasks/html-css/html/html-a11y3-download.html",
"chars": 751,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\"/>\n <title>HTML accessibility: Task 3</title>\n "
},
{
"path": "accessibility/tasks/html-css/html/html-a11y3.html",
"chars": 1348,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\" />\n <title>HTML accessibility: Task 3</title>\n"
},
{
"path": "accessibility/tasks/html-css/html/html-a11y4-download.html",
"chars": 982,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\"/>\n <title>HTML accessibility: Task 4</title>\n "
},
{
"path": "accessibility/tasks/html-css/html/html-a11y4.html",
"chars": 1708,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\" />\n <title>HTML accessibility: Task 4</title>\n"
},
{
"path": "accessibility/tasks/html-css/html/marking.md",
"chars": 6505,
"preview": "# HTML accessibility marking guide\n\nThe aim of these tasks is to demonstrate an understanding of the techniques covered "
},
{
"path": "accessibility/tasks/html-css/playable.js",
"chars": 725,
"preview": "var section = document.querySelector('section');\nvar editable = document.querySelector('.editable');\nvar textareaHTML = "
},
{
"path": "accessibility/tasks/html-css/styles.css",
"chars": 1157,
"preview": "/* Some default styling for cookbook examples */\n/*\nrgb(53,43,34)\nrgb(75,70,74)\nrgb(95,97,110)\nrgb(137,151,188)\nrgb(160,"
},
{
"path": "accessibility/tasks/js/aria/aria-js1-download.html",
"chars": 1903,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\"/>\n <title>JavaScript accessibility: Task 1</ti"
},
{
"path": "accessibility/tasks/js/js/js1-download.html",
"chars": 1731,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\"/>\n <title>JavaScript accessibility: Task 1</ti"
},
{
"path": "accessibility/tasks/js/playable.js",
"chars": 669,
"preview": "var section = document.querySelector('section');\nvar editable = document.querySelector('.editable');\nvar textareaJS = do"
},
{
"path": "accessibility/tasks/js/styles.css",
"chars": 1155,
"preview": "/* Some default styling for cookbook examples */\n/*\nrgb(53,43,34)\nrgb(75,70,74)\nrgb(95,97,110)\nrgb(137,151,188)\nrgb(160,"
},
{
"path": "css/css-layout/flexbox/complex-flexbox.html",
"chars": 3112,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/flexbox/flex-align0.html",
"chars": 779,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/flexbox/flex-align1.html",
"chars": 921,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/flexbox/flex-ordering.html",
"chars": 992,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/flexbox/flexbox-wrap0.html",
"chars": 7292,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/flexbox/flexbox-wrap1.html",
"chars": 7327,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/flexbox/flexbox0.html",
"chars": 2366,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/flexbox/flexbox1.html",
"chars": 2426,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/flexbox/flexbox2.html",
"chars": 2530,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/floats/0_two-column-layout.html",
"chars": 1847,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/floats/1-basic-example.html",
"chars": 1894,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/floats/1_three-column-layout.html",
"chars": 2700,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/floats/2-line-boxes.html",
"chars": 2024,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/floats/2_float-disaster.html",
"chars": 2835,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/floats/2a_fixed-by-clear.html",
"chars": 2880,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/floats/3-clearing.html",
"chars": 1964,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/floats/3_broken-layout.html",
"chars": 2996,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/floats/4-clearfix.html",
"chars": 2169,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/floats/4_fixed-layout-border-box.html",
"chars": 3199,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/floats/5-overflow.html",
"chars": 2111,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/floats/5_fixed-height-columns.html",
"chars": 3241,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/floats/6-flow-root.html",
"chars": 2103,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/floats/fixed-layout-adjusted-percentages.html",
"chars": 3223,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/floats/simple-float.html",
"chars": 1843,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/floats/three-column-layout-wrong-order.html",
"chars": 2709,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/floats/two-column-layout-fixed.html",
"chars": 1839,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/fundamental-layout-comprehension/index.html",
"chars": 2958,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/fundamental-layout-comprehension/styles.css",
"chars": 691,
"preview": "body {\n background-color: #fff;\n color: #333;\n margin: 0;\n font: 1.2em / 1.2 Arial, Helvetica, sans-serif;\n "
},
{
"path": "css/css-layout/fundamental-layout-comprehension-finish/index.html",
"chars": 2958,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/fundamental-layout-comprehension-finish/marking-guide.md",
"chars": 2629,
"preview": "# Marking guide for \"Fundamental Layout Comprehension\"\n\nThe following guide outlines a marking guide for the MDN Learnin"
},
{
"path": "css/css-layout/fundamental-layout-comprehension-finish/styles.css",
"chars": 967,
"preview": "body {\n background-color: #fff;\n color: #333;\n margin: 0;\n font: 1.2em / 1.2 Arial, Helvetica, sans-serif;\n "
},
{
"path": "css/css-layout/grids/0-starting-point.html",
"chars": 829,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/grids/1-fixed-columns.html",
"chars": 947,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/grids/10-template-completed.html",
"chars": 2724,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/grids/11-grid-system-starting-point.html",
"chars": 2384,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/grids/12-grid-system-completed.html",
"chars": 2727,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/grids/2-fr-tracks.html",
"chars": 935,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/grids/3-gaps.html",
"chars": 951,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/grids/4-repeat.html",
"chars": 965,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/grids/5-auto-rows.html",
"chars": 1012,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/grids/6-min-max.html",
"chars": 1074,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/grids/7-auto-fill.html",
"chars": 1031,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/grids/8-placement-starting-point.html",
"chars": 2518,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=devic"
},
{
"path": "css/css-layout/grids/9-placement-completed.html",
"chars": 2693,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/grids/css-grid-finished.html",
"chars": 1550,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/grids/css-grid.html",
"chars": 791,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/grids/css-tables-as-grid.html",
"chars": 1084,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/grids/flexbox-grid.html",
"chars": 1951,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/grids/fluid-grid-calc.html",
"chars": 1915,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/grids/fluid-grid-offset.html",
"chars": 1932,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/grids/fluid-grid.html",
"chars": 1839,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/grids/html-skeleton-finished.html",
"chars": 1022,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/grids/html-skeleton.html",
"chars": 206,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/grids/normalize.css",
"chars": 7797,
"preview": "/*! normalize.css v3.0.2 | MIT License | git.io/normalize */\n\n/**\n * 1. Set default font family to sans-serif.\n * 2. Pre"
},
{
"path": "css/css-layout/grids/simple-grid-finished.html",
"chars": 1714,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/grids/simple-grid.html",
"chars": 896,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/grids/skeleton.css",
"chars": 9952,
"preview": "/*\n* Skeleton V2.0.4\n* Copyright 2014, Dave Gamache\n* www.getskeleton.com\n* Free to use under the MIT license.\n* http://"
},
{
"path": "css/css-layout/multicol/0-starting-point.html",
"chars": 1830,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/multicol/1-simple-example.html",
"chars": 1774,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/multicol/2-simple-example-width.html",
"chars": 1777,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/multicol/3-gaps-rules.html",
"chars": 1846,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/multicol/4-breaking.html",
"chars": 4357,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/positioning/0_basic-flow.html",
"chars": 1406,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/positioning/1_static-positioning.html",
"chars": 1500,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/positioning/2_relative-positioning.html",
"chars": 1545,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/positioning/3_absolute-positioning.html",
"chars": 1438,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/positioning/4_positioning-context.html",
"chars": 1518,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/positioning/5_z-index.html",
"chars": 1642,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/positioning/6_fixed-positioning.html",
"chars": 1604,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/positioning/7_sticky-positioning.html",
"chars": 1115,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/css-layout/practical-positioning-examples/fixed-info-box.html",
"chars": 5181,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=devic"
},
{
"path": "css/css-layout/practical-positioning-examples/hidden-info-panel-start.html",
"chars": 945,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=devic"
},
{
"path": "css/css-layout/practical-positioning-examples/hidden-info-panel.html",
"chars": 1842,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=devic"
},
{
"path": "css/css-layout/practical-positioning-examples/tabbed-info-box-start.html",
"chars": 2512,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=devic"
},
{
"path": "css/css-layout/practical-positioning-examples/tabbed-info-box.html",
"chars": 3912,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=devic"
},
{
"path": "css/css-layout/practical-positioning-examples/tabs-manual.js",
"chars": 3201,
"preview": "/*\n * This content is licensed according to the W3C Software License at\n * https://www.w3.org/Consortium/Legal/2015/"
},
{
"path": "css/css-layout/stacking-and-float/index.html",
"chars": 2002,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/introduction-to-css/box-model/app/sass",
"chars": 1758,
"preview": "/*\nErrno::ENOENT: No such file or directory - app/sass\n\nBacktrace:\n/Users/chrismills/.rvm/gems/ruby-1.9.3-p547/gems/sass"
},
{
"path": "css/introduction-to-css/box-model/index.html",
"chars": 325,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/introduction-to-css/box-model/style.css",
"chars": 281,
"preview": "/* General styles */\n\nbody {\n margin: 0;\n}\n\nbody > * {\n padding: 10px;\n font-size: 20px;\n border: 20px solid rgba(0,"
},
{
"path": "css/introduction-to-css/cascade-and-inheritance/index.html",
"chars": 978,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/introduction-to-css/cascade-and-inheritance/style.css",
"chars": 1440,
"preview": "/* General styles */\n\nhr {\n width: 80%;\n margin: 50px auto;\n}\n\n/* Important example */\n\n#important #winning {\n backgr"
},
{
"path": "css/introduction-to-css/css-selectors/combinators.html",
"chars": 668,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/introduction-to-css/css-selectors/index.html",
"chars": 2428,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/introduction-to-css/css-selectors/style.css",
"chars": 3038,
"preview": "/* General styles */\n\nhr {\n width: 80%;\n margin: 50px auto;\n}\n\n/* Element selectors example */\n\n#element-selectors h1 "
},
{
"path": "css/introduction-to-css/css-values-and-units/index.html",
"chars": 1493,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/introduction-to-css/css-values-and-units/style.css",
"chars": 2159,
"preview": "/* General styles */\n\nhr {\n width: 80%;\n margin: 50px auto;\n}\n\n/* Simple size/length example */\n\n#length-simple p {\n "
},
{
"path": "css/introduction-to-css/debugging-css/index.html",
"chars": 1285,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/introduction-to-css/debugging-css/style.css",
"chars": 608,
"preview": "/* General styles */\n\nhtml {\n font-family: 'Helvetica neue', Arial, 'sans serif';\n font-size: 10px;\n}\n\nbody {\n width:"
},
{
"path": "css/introduction-to-css/debugging-css-finished/index.html",
"chars": 1289,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/introduction-to-css/debugging-css-finished/style.css",
"chars": 606,
"preview": "/* General styles */\n\nhtml {\n font-family: 'Helvetica neue', Arial, 'sans serif';\n font-size: 10px;\n}\n\nbody {\n width:"
},
{
"path": "css/introduction-to-css/fundamental-css-comprehension/index.html",
"chars": 741,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/introduction-to-css/fundamental-css-comprehension/style-resources.txt",
"chars": 753,
"preview": "/* General styles - put these straight into your stylesheet */\n\nbody {\n margin: 0;\n}\n\nhtml {\n font-family: 'Helvetica "
},
{
"path": "css/introduction-to-css/fundamental-css-comprehension-finished/index.html",
"chars": 786,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/introduction-to-css/fundamental-css-comprehension-finished/marking-guide.md",
"chars": 7411,
"preview": "# Marking guide for \"Fundamental CSS comprehension\"\nThe following guide outlines a marking guide for the MDN Learning Ar"
},
{
"path": "css/introduction-to-css/fundamental-css-comprehension-finished/style.css",
"chars": 1050,
"preview": "/* General styles */\n\nbody {\n margin: 0;\n}\n\nhtml {\n font-family: 'Helvetica neue', Arial, 'sans serif';\n font-size: 1"
},
{
"path": "css/introduction-to-css/how-css-works/index.html",
"chars": 313,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/introduction-to-css/how-css-works/style.css",
"chars": 98,
"preview": "\nh1 {\n color: blue;\n background-color: yellow;\n border: 1px solid black;\n}\n\np {\n color: red;\n}"
},
{
"path": "css/styling-boxes/advanced_box_effects/background-clip-text.html",
"chars": 673,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/styling-boxes/advanced_box_effects/blend-modes.html",
"chars": 4110,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/styling-boxes/advanced_box_effects/box-shadow.html",
"chars": 1955,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/styling-boxes/advanced_box_effects/filters.html",
"chars": 2913,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/styling-boxes/backgrounds/background-attachment.css",
"chars": 768,
"preview": "html, body {\n margin: 0;\n padding: 0;\n}\n\nh1 {\n margin-top: 0;\n}\n\nbody {\n padding: 1em;\n}\n\nhtml {\n background-color:"
},
{
"path": "css/styling-boxes/backgrounds/background-attachment.html",
"chars": 1362,
"preview": "<!DOCTYPE HTML>\n<html lang=\"en-US\">\n <head>\n\t<meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "css/styling-boxes/backgrounds/index.html",
"chars": 540,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/styling-boxes/backgrounds/repeating-background.html",
"chars": 759,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/styling-boxes/borders/border-image.html",
"chars": 765,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/styling-boxes/borders/border-longhand.html",
"chars": 1342,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
},
{
"path": "css/styling-boxes/borders/rounded-corners.html",
"chars": 573,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-"
}
]
// ... and 628 more files (download for full content)
About this extraction
This page contains the full source code of the mdn/learning-area GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 828 files (1.6 MB), approximately 501.9k tokens, and a symbol index with 291 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.