├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── guides ├── README.md ├── flash-example │ ├── MayYourBladeBanner468x60_v2.fla │ ├── MayYourBladeBanner468x60_v2.html │ └── MayYourBladeBanner468x60_v2.swf ├── images │ ├── 10a.jpg │ ├── 10b.jpg │ ├── 2b.jpg │ ├── 4a.jpg │ ├── 4b.png │ ├── 4c.png │ ├── 5a.png │ ├── 6a.gif │ ├── 6b.png │ ├── 6c.png │ ├── 7a.png │ ├── 8a.png │ ├── 8b.png │ ├── 8c.png │ ├── browser-and-editor.png │ ├── browser-console.png │ ├── duck.jpg │ ├── kitten.jpg │ └── web-directory.jpg ├── index.html ├── javascript-examples │ ├── basic-canvas.html │ ├── canvas-loop.html │ ├── conditional.html │ ├── data-output-loop.html │ ├── firefox-logo.png │ ├── function.html │ ├── hello.html │ ├── javascript-gradient-image.html │ ├── javascript-sinewave-circles.html │ ├── javascript-sinewave-squares.html │ ├── multiply-numbers-blur.html │ ├── multiply-numbers-click.html │ ├── number-guessing-game.html │ ├── shopping-list.html │ ├── sinewave-function.html │ ├── template.html │ └── text-search.html ├── lesson1.html ├── lesson2.html ├── lesson3.html ├── lesson4.html ├── lesson5.html ├── lesson6.html ├── lesson7.html ├── lesson8.html ├── prism │ ├── prism.css │ └── prism.js └── style.css ├── index.html ├── l10n ├── en │ └── .gitkeep ├── es │ └── .gitkeep └── fr │ └── .gitkeep ├── slide-script └── index.html └── slides ├── License.md ├── Readme.md ├── index.html ├── pictures ├── cover.jpg ├── dom.jpg ├── logo.svg └── picture.jpg └── shower ├── License.md ├── Readme.md ├── shower.min.js └── themes ├── bright ├── License.md ├── Readme.md ├── fonts │ ├── Anka.Coder.Italic.woff │ ├── Anka.Coder.woff │ ├── OpenSans.Bold.Italic.woff │ ├── OpenSans.Bold.woff │ ├── OpenSans.Italic.woff │ ├── OpenSans.Light.woff │ └── OpenSans.woff ├── images │ ├── grid-16x10.svg │ └── grid-4x3.svg ├── index.html ├── pictures │ ├── exact.png │ ├── square.png │ ├── tall.png │ └── wide.png └── styles │ └── screen.css └── ribbon ├── License.md ├── Readme.md ├── fonts ├── PTMono.woff ├── PTSans.Bold.Italic.woff ├── PTSans.Bold.woff ├── PTSans.Italic.woff ├── PTSans.Narrow.Bold.woff └── PTSans.woff ├── images ├── grid-16x10.svg ├── grid-4x3.svg ├── linen.png ├── linen@2x.png └── ribbon.svg ├── index.html ├── pictures ├── exact.png ├── square.png ├── tall.png └── wide.png └── styles └── screen.css /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Community Participation Guidelines 2 | 3 | This repository is governed by Mozilla's code of conduct and etiquette guidelines. 4 | For more details, please read the 5 | [Mozilla Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/). 6 | 7 | ## How to Report 8 | 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. 9 | 10 | 16 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | CC0 1.0 Universal 2 | 3 | Statement of Purpose 4 | 5 | The laws of most jurisdictions throughout the world automatically confer 6 | exclusive Copyright and Related Rights (defined below) upon the creator and 7 | subsequent owner(s) (each and all, an "owner") of an original work of 8 | authorship and/or a database (each, a "Work"). 9 | 10 | Certain owners wish to permanently relinquish those rights to a Work for the 11 | purpose of contributing to a commons of creative, cultural and scientific 12 | works ("Commons") that the public can reliably and without fear of later 13 | claims of infringement build upon, modify, incorporate in other works, reuse 14 | and redistribute as freely as possible in any form whatsoever and for any 15 | purposes, including without limitation commercial purposes. These owners may 16 | contribute to the Commons to promote the ideal of a free culture and the 17 | further production of creative, cultural and scientific works, or to gain 18 | reputation or greater distribution for their Work in part through the use and 19 | efforts of others. 20 | 21 | For these and/or other purposes and motivations, and without any expectation 22 | of additional consideration or compensation, the person associating CC0 with a 23 | Work (the "Affirmer"), to the extent that he or she is an owner of Copyright 24 | and Related Rights in the Work, voluntarily elects to apply CC0 to the Work 25 | and publicly distribute the Work under its terms, with knowledge of his or her 26 | Copyright and Related Rights in the Work and the meaning and intended legal 27 | effect of CC0 on those rights. 28 | 29 | 1. Copyright and Related Rights. A Work made available under CC0 may be 30 | protected by copyright and related or neighboring rights ("Copyright and 31 | Related Rights"). Copyright and Related Rights include, but are not limited 32 | to, the following: 33 | 34 | i. the right to reproduce, adapt, distribute, perform, display, communicate, 35 | and translate a Work; 36 | 37 | ii. moral rights retained by the original author(s) and/or performer(s); 38 | 39 | iii. publicity and privacy rights pertaining to a person's image or likeness 40 | depicted in a Work; 41 | 42 | iv. rights protecting against unfair competition in regards to a Work, 43 | subject to the limitations in paragraph 4(a), below; 44 | 45 | v. rights protecting the extraction, dissemination, use and reuse of data in 46 | a Work; 47 | 48 | vi. database rights (such as those arising under Directive 96/9/EC of the 49 | European Parliament and of the Council of 11 March 1996 on the legal 50 | protection of databases, and under any national implementation thereof, 51 | including any amended or successor version of such directive); and 52 | 53 | vii. other similar, equivalent or corresponding rights throughout the world 54 | based on applicable law or treaty, and any national implementations thereof. 55 | 56 | 2. Waiver. To the greatest extent permitted by, but not in contravention of, 57 | applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and 58 | unconditionally waives, abandons, and surrenders all of Affirmer's Copyright 59 | and Related Rights and associated claims and causes of action, whether now 60 | known or unknown (including existing as well as future claims and causes of 61 | action), in the Work (i) in all territories worldwide, (ii) for the maximum 62 | duration provided by applicable law or treaty (including future time 63 | extensions), (iii) in any current or future medium and for any number of 64 | copies, and (iv) for any purpose whatsoever, including without limitation 65 | commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes 66 | the Waiver for the benefit of each member of the public at large and to the 67 | detriment of Affirmer's heirs and successors, fully intending that such Waiver 68 | shall not be subject to revocation, rescission, cancellation, termination, or 69 | any other legal or equitable action to disrupt the quiet enjoyment of the Work 70 | by the public as contemplated by Affirmer's express Statement of Purpose. 71 | 72 | 3. Public License Fallback. Should any part of the Waiver for any reason be 73 | judged legally invalid or ineffective under applicable law, then the Waiver 74 | shall be preserved to the maximum extent permitted taking into account 75 | Affirmer's express Statement of Purpose. In addition, to the extent the Waiver 76 | is so judged Affirmer hereby grants to each affected person a royalty-free, 77 | non transferable, non sublicensable, non exclusive, irrevocable and 78 | unconditional license to exercise Affirmer's Copyright and Related Rights in 79 | the Work (i) in all territories worldwide, (ii) for the maximum duration 80 | provided by applicable law or treaty (including future time extensions), (iii) 81 | in any current or future medium and for any number of copies, and (iv) for any 82 | purpose whatsoever, including without limitation commercial, advertising or 83 | promotional purposes (the "License"). The License shall be deemed effective as 84 | of the date CC0 was applied by Affirmer to the Work. Should any part of the 85 | License for any reason be judged legally invalid or ineffective under 86 | applicable law, such partial invalidity or ineffectiveness shall not 87 | invalidate the remainder of the License, and in such case Affirmer hereby 88 | affirms that he or she will not (i) exercise any of his or her remaining 89 | Copyright and Related Rights in the Work or (ii) assert any associated claims 90 | and causes of action with respect to the Work, in either case contrary to 91 | Affirmer's express Statement of Purpose. 92 | 93 | 4. Limitations and Disclaimers. 94 | 95 | a. No trademark or patent rights held by Affirmer are waived, abandoned, 96 | surrendered, licensed or otherwise affected by this document. 97 | 98 | b. Affirmer offers the Work as-is and makes no representations or warranties 99 | of any kind concerning the Work, express, implied, statutory or otherwise, 100 | including without limitation warranties of title, merchantability, fitness 101 | for a particular purpose, non infringement, or the absence of latent or 102 | other defects, accuracy, or the present or absence of errors, whether or not 103 | discoverable, all to the greatest extent permissible under applicable law. 104 | 105 | c. Affirmer disclaims responsibility for clearing rights of other persons 106 | that may apply to the Work or any use thereof, including without limitation 107 | any person's Copyright and Related Rights in the Work. Further, Affirmer 108 | disclaims responsibility for obtaining any necessary consents, permissions 109 | or other rights required for any use of the Work. 110 | 111 | d. Affirmer understands and acknowledges that Creative Commons is not a 112 | party to this document and has no duty or obligation with respect to this 113 | CC0 or use of the Work. 114 | 115 | For more information, please see 116 | 117 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Beginning Programming Content Kit 2 | Hello and welcome to the "Beginners programming" Content Kit. This kit contains resources that you can use the learn and teach general programming principles and the JavaScript language. 3 | 4 | To get started please go to [the start page](index.html). 5 | -------------------------------------------------------------------------------- /guides/README.md: -------------------------------------------------------------------------------- 1 | beginning-coding 2 | ================ 3 | 4 | This is a repository for the source code behind the " Introduction to programming: Beginning your journey towards learning to code" course that is currently live at http://people.mozilla.org/~cmills/coding-beginners/ 5 | -------------------------------------------------------------------------------- /guides/flash-example/MayYourBladeBanner468x60_v2.fla: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/guides/flash-example/MayYourBladeBanner468x60_v2.fla -------------------------------------------------------------------------------- /guides/flash-example/MayYourBladeBanner468x60_v2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | MayYourBladeBanner468x60_v2 5 | 6 | 7 | 8 | 9 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /guides/flash-example/MayYourBladeBanner468x60_v2.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/guides/flash-example/MayYourBladeBanner468x60_v2.swf -------------------------------------------------------------------------------- /guides/images/10a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/guides/images/10a.jpg -------------------------------------------------------------------------------- /guides/images/10b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/guides/images/10b.jpg -------------------------------------------------------------------------------- /guides/images/2b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/guides/images/2b.jpg -------------------------------------------------------------------------------- /guides/images/4a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/guides/images/4a.jpg -------------------------------------------------------------------------------- /guides/images/4b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/guides/images/4b.png -------------------------------------------------------------------------------- /guides/images/4c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/guides/images/4c.png -------------------------------------------------------------------------------- /guides/images/5a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/guides/images/5a.png -------------------------------------------------------------------------------- /guides/images/6a.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/guides/images/6a.gif -------------------------------------------------------------------------------- /guides/images/6b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/guides/images/6b.png -------------------------------------------------------------------------------- /guides/images/6c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/guides/images/6c.png -------------------------------------------------------------------------------- /guides/images/7a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/guides/images/7a.png -------------------------------------------------------------------------------- /guides/images/8a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/guides/images/8a.png -------------------------------------------------------------------------------- /guides/images/8b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/guides/images/8b.png -------------------------------------------------------------------------------- /guides/images/8c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/guides/images/8c.png -------------------------------------------------------------------------------- /guides/images/browser-and-editor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/guides/images/browser-and-editor.png -------------------------------------------------------------------------------- /guides/images/browser-console.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/guides/images/browser-console.png -------------------------------------------------------------------------------- /guides/images/duck.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/guides/images/duck.jpg -------------------------------------------------------------------------------- /guides/images/kitten.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/guides/images/kitten.jpg -------------------------------------------------------------------------------- /guides/images/web-directory.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/guides/images/web-directory.jpg -------------------------------------------------------------------------------- /guides/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Introduction to programming 9 | 10 | 11 | 12 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 |
24 |

Introduction to programming

25 |

Beginning your journey towards learning to code

26 |
27 | 28 |

Abstract

29 | 30 |

Our world is becoming increasingly controlled by computers, and you will come into contact with code and computer systems every day, most of the time not even realising it! For many of us, code is like voodoo, or black magic, and this is partially true - complex computer systems require complex code to control them. But understanding the basic principles and building blocks that underpin pretty much all programming languages is well with the grasp of all of us: really! In this course, I will take you gently through all the programming fundamentals you'll need to grasp a working understanding on how code and computer systems work, and even write some simple programs yourself.

31 | 32 |

Introduction

33 | 34 |

This is a basic course, aimed at people with no previous development/programming experience, which aims to teach the fundamentals of how systems work, and the very basics of how to program. The course uses JavaScript — the programming language that powers the Web — as the language for demonstrating all the taught concepts, but these concepts are shared across most programming languages.

35 | 36 |

To take part in this course, you just need access to a computer with a web browser and a text editor installed on it.

37 | 38 |

Note: if you have any feedback or change requests you want to give about the course, send pull requests/comments to the Introduction to programming Github repo, or send us a message on Twitter.

39 | 40 |

Resource checklist:

41 | 42 | 61 | 62 |

Assumed knowledge

63 | 64 |

No previous knowledge is assumed beyond the basics of general computer/web usage, but having some basic HTML and CSS knowledge would also be helpful.

65 | 66 |

Table of contents

67 | 68 |
    69 |
  1. Lesson 1: There's a lot of code. Everywhere
    2. 70 |
  2. Lesson 2: Variables
    3. 71 |
  3. Lesson 3: Conditions and loops
    4. 72 |
  4. Lesson 4: Doing useful things
    5. 73 |
  5. Lesson 5: Have fun drawing: HTML5 canvas basics
    6. 74 |
  6. Lesson 6: Functions and events
    7. 75 |
  7. Lesson 7: Further improving our guessing game with events
    8. 76 |
  8. Lesson 8: More challenges
    9. 77 |
  9. Lesson 9: Objects and going further
    10. 78 |
79 | 80 |

Further resources

81 | 82 |

Once you've worked your way through this beginner's course, we would advise you to go on to the following:

83 | 84 | 91 | 92 |
93 |

Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. Share it, make it better, use it for good.

94 | 95 |
96 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /guides/javascript-examples/basic-canvas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Basic canvas example 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 |

Your browser doesn't support Canvas.

19 | 20 | 21 | 24 | 25 | 26 | 39 | -------------------------------------------------------------------------------- /guides/javascript-examples/canvas-loop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Canvas loop 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 |

Your browser doesn't support Canvas.

19 | 20 | 21 | 24 | 25 | 26 | 38 | -------------------------------------------------------------------------------- /guides/javascript-examples/conditional.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Conditional example 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 35 | -------------------------------------------------------------------------------- /guides/javascript-examples/data-output-loop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JavaScript template 6 | 7 | 8 | 9 | 10 | 11 | 23 | 24 | -------------------------------------------------------------------------------- /guides/javascript-examples/firefox-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/guides/javascript-examples/firefox-logo.png -------------------------------------------------------------------------------- /guides/javascript-examples/function.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Basic function 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 19 | 36 | -------------------------------------------------------------------------------- /guides/javascript-examples/hello.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Hello example 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 29 | -------------------------------------------------------------------------------- /guides/javascript-examples/javascript-gradient-image.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JavaScript template 6 | 7 | 8 | 9 | 10 |

Your browser doesn't support Canvas.

11 | 12 | 13 | 14 | 15 | 39 | 40 | -------------------------------------------------------------------------------- /guides/javascript-examples/javascript-sinewave-circles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JavaScript template 6 | 7 | 8 | 9 | 10 |

Your browser doesn't support Canvas.

11 | 12 | 13 | 14 | 15 | 26 | 27 | -------------------------------------------------------------------------------- /guides/javascript-examples/javascript-sinewave-squares.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JavaScript template 6 | 7 | 8 | 9 | 10 |

Your browser doesn't support Canvas.

11 | 12 | 13 | 14 | 15 | 24 | 25 | -------------------------------------------------------------------------------- /guides/javascript-examples/multiply-numbers-blur.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Number multiplier 9 | 10 | 11 | 14 | 15 | 16 | 17 |

Number multiplier

18 | 19 |
20 | 21 | 22 |
23 | 24 |

The result is

25 | 26 | 27 | 45 | -------------------------------------------------------------------------------- /guides/javascript-examples/multiply-numbers-click.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Number multiplier 9 | 10 | 11 | 14 | 15 | 16 | 17 |

Number multiplier

18 | 19 |
20 | 21 | 22 | 23 |
24 | 25 |

The result is

26 | 27 | 28 | 43 | -------------------------------------------------------------------------------- /guides/javascript-examples/number-guessing-game.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Number guessing game 9 | 10 | 11 | 14 | 15 | 16 | 17 |

Number guessing game

18 |

19 |

20 |

21 | 22 |
23 | 24 | 25 |
26 | 27 |

28 | 29 | 30 | 77 | -------------------------------------------------------------------------------- /guides/javascript-examples/shopping-list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Shopping list 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 |

Shopping list

19 | 20 | 21 |
22 | 23 | 24 | 25 |
26 | 27 | 30 | 31 | 32 | 33 | 34 | 58 | -------------------------------------------------------------------------------- /guides/javascript-examples/sinewave-function.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Sinewave function 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 19 |

Your browser doesn't support Canvas.

20 | 21 | 22 | 23 | 38 | -------------------------------------------------------------------------------- /guides/javascript-examples/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Code template 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |

Example heading

25 | 26 | 27 | 28 | 29 | 39 | -------------------------------------------------------------------------------- /guides/javascript-examples/text-search.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Text search 9 | 10 | 11 | 14 | 15 | 21 | 22 | 23 | 24 |

Text search app

25 | 26 | 27 |
28 |
29 | 30 |
31 |
32 | 33 |
34 | 35 |
36 | 37 |

38 |

39 | 40 | 41 | 42 | 43 | 84 | -------------------------------------------------------------------------------- /guides/lesson1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Introduction to programming, Part 1 9 | 10 | 11 | 12 | 15 | 16 | 17 | 18 | 19 |
20 | 21 |
22 |

Introduction to programming

23 |

There's a lot of code. Everywhere

24 |
25 | 26 | 30 | 31 |

A huge amount of software exists in the world, controlling the systems that enrich our lives. Some code is really obvious, such as operating systems like Windows, web sites, and video games. Some is not so obvious, for example the embedded code that controls our microwave, our thermostat, or our car engine.

32 | 33 |

The exact format, syntax and usage of different types of code differs greatly, but most share fundamental structures and concepts. In this course, we'll aim to teach you these fundamentals. The particular type of code we'll use in this course is JavaScript, the programming language that powers many web sites and applications. We've chosen this one because it is readily available, and very easy to demonstrate tangible results with, but the aim here is not really to just teach you JavaScript, but to teach you the underlying principles that apply to pretty much every programming language.

34 | 35 |

What are we doing when we write code?

36 | 37 |

Regardless of what type of code we write, we write it to control computer systems: this could be because we want to find more information about those systems, give them information/data to process, or give them instructions. In the same way that we can use a language like English, German or Chinese to ask a person questions and give them instructions, we can use a language like JavaScript to ask computers questions and give them instructions.

38 | 39 |

The computer has to take in this code in some way, read it, and then do something as a result. For the computer to understand the code, it has to be written in the right syntax: the structure of any language is important, for making yourself understood. The syntax of English and other human languages is verbs, nouns, adjectives, etc. The syntax of JavaScript is variables, functions, loops, etc.

40 | 41 |

The computer will have a piece of software that reads the code you write, works out what to do with it, and then returns a result. This is often called an interpreter, or an engine perhaps. In the case of JavaScript, the interpreter is the web browser you are using. A web browser downloads web pages, interprets the code contained within them (which will usually include some JavaScript), and gives you a web page to look at.

42 | 43 |

Note:: To make sense of this, let's have a quick look at my javascript-gradient-image.html example. This simply creates a drawing canvas on the page using the HTML <canvas> element, then uses JavaScript to place some pixels on the canvas, in this case, a circle filled with a colour gradient, and a copy of the Firefox logo, which it grabs out of an image file. You can view the source of the example by right clicking/Cmd + clicking on the page and selecting the "View Source" or "source" option.

44 | 45 |

Compiler: Some languages also need a compiler to run: an application that turns code into a package that can then be run to create an output. Flash is an example of a compiled language — you create some Flash source code, then compile it into a Flash Movie. A web browser with the Flash Player plugin installed can then display this Flash movie, which is its own standalone little block; the source code is no longer readable.

46 | 47 |

Note: Let's now look at a Flash example to see how this works. Open up our flash example, which is an old advertising banner for an old metal band. If you try to "View source" on the banner, you won't be able to: the code is compiled and locked away.

48 | 49 |

Interpreted languages are often easier to learn than compiled languages, because with interpreted languages you can just open up the source code and see how it works. You can't do that with compiled languages because the language is converted into a non-human readable form when compiled.

50 | 51 |

A quick course in Web

52 | 53 |

The web works like so: when you type a web address into your browser, it sends a request to the server that the web site is stored on. The server then sends the files that comprise the web page back to the web browser, which is on the client, aka your computer.

54 | 55 | 59 | 60 |

Server-side and client languages are no better than each other; they have different uses on the Web. Client-side is for displaying and interacting with content; server-side is more for storing data, and providing the right data to the client, based on instructions it is given. For example, when you look at Amazon, you are not looking at a different page every time you look at a product. You are looking at the same page, but with different information inserted into it. when you search for a product using the interface displayed to you on the client-side, a query is sent to a database on the server-side, and server-side technologies find and retrieve the correct data that matches your search, and sends it back to the client to be displayed on the page.

61 | 62 | 63 |

Fundamentals of working with code

64 | 65 |

In this course we'll be using a basic template file to manipulate and view the results of our code. Let's have a look at this sample file now, and explain some code basics.

66 | 67 |

The file is inside this Topic kit at guides/javascript-programming/template.html. Find it and open it in your text editor, and Open it in your browser too. You should end up with something a bit like this:

68 | 69 | The same webite code being shown in a web browser and a text editor 70 | 71 |

The rendered code view inside the browser doesn't look like much right now. You've just got a line of text coloured red. The source code view inside the text editor reveals a lot more however — you'll see a whole bunch of code that you can add to, to make the code do more interesting things.

72 | 73 |

It is recommended that before working on each new example, you make a new copy of the template.html file to write your code into. Close the original template file, make a copy now and put it somewhere easy to find, and open it up again in both text editor and browser.

74 | 75 |

Leave the original intact so that you've always got it to refer to.

76 | 77 |

HTML

78 | 79 |

HTML stands for HyperText Markup Language, and it is the language we use on the Web to add structure and meaning to website content/data. For the purposes of this course, we'll get you to add any HTML you need to write into the indicated section:

80 | 81 | 
<!-- ANY HTML YOU WRITE GOES BETWEEN THIS COMMENT, AND THE END HTML
 82 | COMMENT BELOW. DO NOT PUT ANY HTML OUTSIDE THESE BOUNDARIES UNLESS YOU
 83 | KNOW WHAT YOU ARE DOING. AN HTML HEADING IS INCLUDED TO GIVE YOU
 84 | AN IDEA. -->
 85 | 
 86 |   <h1>Example heading</h1>
 87 | 
 88 | <!-- END HTML -->
89 | 90 |

The uppercase text surrounded by the <!-- and --> are HTML comments: these are ignored by browsers and can be used to include comments in your work to help you (and others) understand what is going on in your code. In this case we are providing boundaries for your to write your HTML into, so if you are completely new to this, you will be less likely to break anything.

91 | 92 |

We have included one HTML element to start you off: <h1>Example heading</h1>. This is an HTML heading element: wrapping any text in an opening <h1> tag and a closing </h1> tag will make that text into the top level heading (or main title) of your site.

93 | 94 |
95 |

Exercise: Adding some more HTML

96 |

try adding another HTML element just below the existing one, then save the page and refresh the browser:

97 | 98 | 
<p>I am a paragraph.</p>
99 |
100 | 101 |

Note: For more on the basics of HTML, read HTML basics.

102 | 103 |

CSS

104 | 105 |

CSS stands for Cascading Style Sheets, and it is the language we use on the Web to style HTML content — to getting it looking how you want. For the purposes of this course, we'll get you to add any CSS you need to write into the indicated section:

106 | 107 | 
/* ANY CSS THAT YOU WRITE GOES BETWEEN THIS COMMENT, AND THE END CSS
108 | COMMENT BELOW. DO NOT PUT ANY CSS ABOVE THE <style> OR BELOW THE
109 | </style> tag! AN EXAMPLE IS INCLUDED TO GIVE YOU AN IDEA.  */
110 | 
111 |   h1 {
112 |     color: red;
113 |   }
114 | 
115 | /* END CSS */
116 | 117 |

The uppercase text surrounded by the /* and */ are CSS comments, which look different but have the same purpose/effect as HTML comments. These are boundaries for your to write your CSS into.

118 | 119 |

We have included one CSS rule to start you off: h1 { color: red; }. This selects our <h1> element and changes the value of its color property to red, which has the effect of turning the text color red.

120 | 121 |
122 |

Exercise: More CSS

123 |

Try changing red to blue, saving the page and refreshing the browser.

124 | 125 |

Now try adding a second CSS rule to select the paragraph you added in the last section, under the first one:

126 | 127 | 
p {
128 |   background-color: red;
129 |   color: white;
130 |   padding: 10px;
131 |   text-align: center;
132 | }
133 | 134 |

This shows usage of multiple lines of CSS in the same rule.

135 |
136 | 137 |

Note: For more on the basics of CSS, read CSS basics.

138 | 139 |

JavaScript

140 | 141 |

JavaScript is the language we use to program dynamic functionality on the Web. For the purposes of this course, we'll get you to add any JavaScript you need to write into the indicated section:

142 | 143 | 
//ANY JAVASCRIPT YOU WRITE GOES BETWEEN THIS COMMENT, AND THE END
144 | //JAVASCRIPT COMMENT BELOW. DO NOT PUT ANY JAVASCRIPT OUTSIDE THESE 
145 | //BOUNDARIES UNLESS YOU KNOW WHAT YOU ARE DOING. SOME SIMPLE JAVASCRIPT
146 | //IS INCLUDED TO GIVE YOU AN IDEA.
147 | 
148 |   console.log('JavaScript test!');
149 | 
150 | // END JAVASCRIPT
151 | 152 |

JavaScript comment lines start with a double forward slash — //. We have provided these as boundaries for you to write your JavaScript into.

153 | 154 |
155 |

Exercise: Playing with JavaScript using browser developer tools

156 |

We have included one JavaScript line to start you off: console.log('JavaScript test!');. This writes a message into your browser's developer console, accessed by pressing Ctrl + Shift + I (Cmd + Opt + I on Mac OSX, F12 on Internet Explorer) and clicking on the Console tab. Have a look now: you should see something like this:

157 | 158 | browser console with message saying JavaScript test written into it 159 | 160 |

Note: The browser developer console is a really useful tool for trying things out, and debugging your code when it isn't working as it should be. Make sure you are familiar with it — discover browser developer tools is a good place to start.

161 | 162 |

Now let's try adding a second JavaScript line underneath the first one:

163 | 164 | 
document.querySelector('h1').innerHTML = 'Updated heading!!';
165 | 166 |

If you include this in your code, save it in the text editor and then refresh the browser, you'll see that we've updated the contents of our heading using JavaScript.

167 |
168 | 169 | 173 | 174 |
175 |

Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. Share it, make it better, use it for good.

176 | 177 |
178 | 179 | 180 | 181 | -------------------------------------------------------------------------------- /guides/lesson2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Introduction to programming, Part 2 9 | 10 | 11 | 12 | 15 | 16 | 17 | 18 | 19 |
20 | 21 |
22 |

Introduction to programming

23 |

Variables

24 |
25 | 26 | 31 | 32 |

Now on to the interesting stuff! We'll now have a look at the programming basics that exist in pretty much every programming language, in one form or another. Before starting this section, make a new copy of the template.html file and open it in your browser and text editor.

33 | 34 |

Variable basics

35 | 36 |

Variables are containers that allow you to store something that you want to use later on, be that a simple name or age value, or something more complicated. Why would you want to do this? Let's look at a simple program that says hello to you: See my Hello example (don't look at the source code!)

37 | 38 |

Without variables, it would be impossible to create a personalised hello message. You'd just have to stick to "Hello there.", which would be really boring. So variables are all about allowing us to create programs that dynamically change depending on things that differ as the program is being used, such as the user using the program, the date and time of day, the weather, and so on. Programming is pretty much impossible without variables.

39 | 40 |

To use a variable, we first have to declare it — we say "I am making this variable exist. Its name is x, and its initial value is y."

41 | 42 |

A really simple code example:

43 | 44 | 
var myHairColor = "brown";
 45 | // Note the quotes; these can be single or double quotes;
 46 | //your choice, as long as you are consistent
47 | 48 |

You could also then change a variable later on, once it is declared.

49 | 50 | 
var myHairColor = "brown";
 51 | // declare a variable myHairColor, with an initial value of "brown"
 52 | 
 53 | myHairColor = "red";
 54 | // change the existing variable myHairColor's value to "red"
55 | 56 |

A few more simple examples follow:

57 | 58 | 
var myName = "Chris";
 59 | // A string
 60 | // Also note that JavaScript is case sensitive, so myname is
 61 | // a different variable to myName
 62 | 
 63 | var myAge = 35; // a number
 64 | var haveKids = true; // a boolean
 65 | var favouriteThings = ['raindrops','kettles','packages','ponies'] // an array
66 | 67 |
68 |

Exercise: Proving how variables exist and are stored

69 | 70 |

As a quick exercise, let's go into the browser developer console and try accessing a new variable the console pane (the console is basically a way to access the internal state of the code or application). To open the console, press Ctrl + Shift + I; Cmd + Opt + I on Mac OSX; F12 on Internet Explorer, and click the console tab.

71 | 72 |

To call or access a variable, you just use the variable name. Enter this into the console:

73 | 74 | 
myCar
75 | 76 |

This should give you a result of undefined, because the variable doesn't yet exist.

77 | 78 |

Let's try declaring the variable: type the following into the console:

79 | 80 | 
var myCar = "Citroen";
81 | 82 |

and then trying this again in the console:

83 | 84 | 
myCar
85 | 86 |

The console should now return the variable's value to you.

87 | 88 |
89 | 90 |

When we have a value stored in a variable, we can use it in our program by simply saying the variable name again. Let's look at something slightly more complex that actually does something interesting. The prompt function opens up a dialog box asking the user to enter a value into a text box. When they have done so, it stores that value in a variable:

91 | 92 | 
var myHairColor = prompt("Enter your hair color");
 93 | // Ask the user for their hair color
94 | 95 |

You can then choose to do something else with that value:

96 | 97 | 
alert("Chris has " + myHairColor + " hair.");
 98 | // display a personalised message about hair colour
99 | 100 |

alert is a simple function that pings up a dialog box containing whatever message you include inside it, in this case Chris has " + myHairColor + " hair.".

101 | 102 |

This string of text may look strange, and we'll explain it better later on. For now, let's just say that we are gluing together three things:

103 | 104 |
    105 |
  1. The text "Chris has "
    2. 106 |
  2. The current value inside the myHairColor variable
    3. 107 |
  3. The text " hair."
    4. 108 |
109 | 110 |

A lot of programming involves gluing different things together to get the output you want.

111 | 112 |
113 |

Exercise: write the hello example from before

114 |

The hello example that we checked out at the very start of this section is very similar in the way that it works to the hair colour example we just studied. I'd like you to try writing the hello example into your working template file, and then run it to get it working. DON'T look at the source code unless you get stuck!

115 |
116 | 117 |

Variable types

118 | 119 |

In JavaScript, different variables have different assigned types:

120 | 121 |
255 | 256 | 257 | 258 | -------------------------------------------------------------------------------- /guides/lesson4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Introduction to programming, Part 4 9 | 10 | 11 | 12 | 15 | 16 | 17 | 18 | 19 |
20 | 21 |
22 |

Introduction to programming

23 |

Doing useful things

24 |
25 | 26 | 31 | 32 |

In general, to do useful things with programming languages, you need to grab an item you want to do something to, and then use code to do something to it.

33 | 34 |

In JavaScript, we do this by grabbing a reference to the object we want to have an effect on. We've already done this — we've stored some items in variables. You can store anything in a variable, whether it is a simple string or number value, or something more complicated, like a video, paragraph or other element on a web page. This is done via the document object model.

35 | 36 |

Making a start

37 | 38 |

For this section, make a new copy of the template file. Put the following HTML into your HTML area:

39 | 40 | 
<h1 class="myHeading">My heading</h1>
41 | 42 |

We can grab a reference to this element using the following line — put this in your JavaScript area:

43 | 44 | 
var myH1 = document.querySelector('.myHeading');
 45 | // Store a reference to the h1 element inside a variable called myH1
46 | 47 |

We could then do things to our heading by affecting the variable with more JavaScript. For example, to alter the text inside the heading, you could do this:

48 | 49 | 
myH1.innerHTML = "My updated heading";
 50 | // Change the content inside our h1 to equal the specified string
51 | 52 |
53 | 54 |

Exercise: improving our game to make things happen in the HTML

55 | 56 |

Let's improve the user experience of our game. It is pretty bad form to have all your messages appearing in alert dialog boxes. This isn't something you want to see people using in the real world. It'd be better to have the messages appearing inside your web page. The current code looks like this:

57 | 58 | 
var randomNumber = Math.floor(Math.random() * 100) + 1;
 59 | 
 60 | for(i = 1; i <= 10 ; i++) {
 61 |   var userGuess = prompt("Enter guess " + i);
 62 | 
 63 |   if(userGuess === randomNumber) {
 64 |     alert("Congratulations. You got it right!");
 65 |     break;
 66 |   } else {
 67 |     alert("wrong");
 68 |     if(userGuess < randomNumber) {
 69 |       alert("Your guess is too low!");
 70 |     } else if(userGuess > randomNumber) {
 71 |       alert("Your guess is too high!");
 72 |     }
 73 |   }
 74 | }
75 | 76 |

At this point, open up the template file copy that you wrote the game code into previously. If you haven't got a copy, just create a new copy of the template and paste the above code into the JavaScript section.

77 | 78 |
    79 |
  1. To do this, we need to first create some HTML elements for the previous guesses, result of the last guess, and whether it is too low or too high. Add the following into your HTML area:
    2. 80 | 81 | 
    <h1>Number guessing game</h1>
 82 | <p class="guesses"></p>
 83 | <p class="lastResult"></p>
 84 | <p class="lowOrHi"></p>
    85 | 86 |
  2. Now we need to store these in variables so we can get at them and do things with them in JavaScript. Add the following lines into the top of your JavaScript area:
    3. 87 | 88 | 
    var guesses = document.querySelector(".guesses");
 89 | var lastResult = document.querySelector(".lastResult");
 90 | var lowOrHi = document.querySelector(".lowOrHi");
    91 | 92 |
  3. Next we need to replace the alert() functions with lines to write the results into those paragraphs, not just shout them out in alert boxes. First, find the line var userGuess = prompt("Enter guess " + i);; directly below this line add the following:
    4. 93 | 94 | 
    guesses.innerHTML += userGuess + " ";
    95 | 96 |
  4. Now replace the line alert("Congratulations. You got it right!"); with
    5. 97 | 98 | 
    lastResult.innerHTML = "Congratulations! You got it right!";
 99 | lowOrHi.innerHTML = "";
    100 | 101 |
  5. Replace alert("wrong"); with
    6. 102 | 103 | 
    lastResult.innerHTML = "Wrong!";
    104 | 105 |
  6. Replace alert("Your guess is too low!"); with
    7. 106 | 107 | 
    lowOrHi.innerHTML = "Your guess is too low!";
    108 | 109 |
  7. Replace alert("Your guess is too high!"); with
    8. 110 | 111 | 
    lowOrHi.innerHTML = "Your guess is too high!";
    112 | 113 |
114 | 115 |

Your final code should look like this:

116 | 117 | 
var randomNumber = Math.floor(Math.random() * 100) + 1;
118 | 
119 | for(i = 1; i <= 10 ; i++) {
120 |   var userGuess = prompt("Enter guess " + i);
121 |   guesses.innerHTML += userGuess + " ";
122 | 
123 |   if(userGuess === randomNumber) {
124 |     lastResult.innerHTML = "Congratulations! You got it right!";
125 |     lowOrHi.innerHTML = "";
126 |     break;
127 |   } else {
128 |     lastResult.innerHTML = "Wrong!";
129 |     if(userGuess < randomNumber) {
130 |       lowOrHi.innerHTML = "Your guess is too low!";
131 |     } else if(userGuess > randomNumber) {
132 |       lowOrHi.innerHTML = "Your guess is too high!";
133 |     }
134 |   }
135 | }
136 | 137 |
138 | 139 | 144 | 145 |
146 |

Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. Share it, make it better, use it for good.

147 | 148 |
149 | 150 | 151 | 152 | -------------------------------------------------------------------------------- /guides/lesson5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Introduction to programming, Part 5 9 | 10 | 11 | 12 | 15 | 16 | 17 | 18 | 19 |
20 | 21 |
22 |

Introduction to programming

23 |

Have fun drawing: HTML5 canvas basics

24 |
25 | 26 | 31 | 32 |

One of the best way to see instant results with JavaScript is by writing some simple HTML5 <canvas> examples. Canvas is a technology that allows you to use JavaScript to draw a bitmap image, which can then be manipulated/changed.

33 | 34 |

To do something with a canvas, you first have create one on your HTML page, like putting a picture frame on your wall.

35 | 36 |

Getting started

37 | 38 |

Make a new copy of the template file. Add the following to your HTML area:

39 | 40 | 
<canvas width="500" height="500">
 41 | </canvas>
 42 | 
 43 | <!-- Create a canvas to draw on, 500 x 500 big.
 44 |      Note that HTML comments look different to
 45 |      JavaScript comments! -->
46 | 47 |

This creates a blank canvas 500 x 500 pixels big, ready for you to draw on.

48 | 49 |

To grab a reference to this canvas, we need to add two lines to our JavaScript area:

50 | 51 | 
var myCanvas = document.querySelector('canvas');
 52 | // Grab a reference to the canvas element
 53 | 
 54 | var myContext = myCanvas.getContext('2d');
 55 | // Create the context we will draw in
56 | 57 |

First of all we store a reference to the Canvas inside the myCanvas variable, in the same way as we saw above. Then we create a drawing context for our canvas, inside a myContext variable. Why did this take two steps? Well, 2d is not the only context you can draw in using canvas. There is also an experimental WebGL (3D context) that allows you to draw things into real 3D space, but we won't touch that here because it's way too complicated!

58 | 59 |

Next, let's draw a simple rectangle on our canvas — add these lines to the bottom of the JavaScript area:

60 | 61 | 
myContext.fillStyle = 'rgba(0,0,255,0.5)';
 62 | // What colour do we want to draw the rectangle?
 63 | 
 64 | myContext.fillRect(0,0,200,200);
 65 | // Draw the rectangle itself
66 | 67 |

Note: You can see this basic example running live in our Basic canvas page.

68 | 69 |

These two in-built functions are doing the following:

70 | 71 | 75 | 76 |

Have a play with drawing different rectangles and squares; adjust the values to see what happens. Try playing with these too:

77 | 78 | 
myContext.strokeStyle = 'rgba(0,255,0,0.5)';
 79 | // Set a colour for the stroke, which is the outer
 80 | //bound of the rectangle. 
 81 | 
 82 | myContext.lineWidth = 1;
 83 | // How thick do we want the stroke to be?
 84 | 
 85 | myContext.strokeRect(200,200,50,50);
 86 | // Draw an outline rectangle, not a solid colour
 87 | //rectangle like before
88 | 89 |

Canvas loops

90 | 91 |

Lets look at some more complex loop examples with canvas. Type in the following, at the bottom of your JavaScipt area:

92 | 93 | 
myContext.fillStyle = 'rgba(0,0,255,0.15)';
 94 | for(i = 0; i <= 9; i++) {
 95 | // start with variable i having the value 0. Run the loop
 96 | // over and over again until i equals 9, increasing the value
 97 | // of i by 1 after each time
 98 |   myContext.fillRect(i,i,25+i,25+i);  
 99 | }
100 | 101 |

Here we are setting a specific colour, then running a loop 10 times. Each time we run the loop, we draw a square that is slightly bigger, in a slightly different place. You can use this as a template for your experimentations in the next section (see Canvas loop for the example running live.)

102 | 103 |
104 | 105 |

Exercise: hacking your canvas loops

106 | 107 |

Let's try altering some of the code to make different effects.

108 | 109 |
    110 |
  1. Altering some other values of the square each time to loop runs by modifying them by i. For example, you could make the square bigger each time, by modifying the size by a multiple of i:
    2. 111 | 112 | 
    myContext.fillRect((i*6),(i*4),25+(i*10),25+(i*10));
    113 | 114 |
  2. Start i and the square values bigger and use a minus iterator to make the square smaller each time: i-- instead of i++. But remember to alter the exit condition too, so you don't end up with an infinite loop!
    3. 115 | 116 |
  3. Increase the value of the exit condition so the loop draws more squares.
    4. 117 | 118 |
  4. Make the iterator itself bigger so the loop draws the squares further apart, for example i+=5, which is equivalent to i = i + 5 — "take the existing value of i and add 5 to it".
    5. 119 | 120 |
  5. Define the square colour inside the loop and modify it by i too, for example:
    6. 121 | 122 | 
    myContext.fillStyle = 'rgba(0,0,' + (150+(i*6)) + ',0.15)';
    123 | 124 |
  6. Ok, so that looks quote horrible. the colour value is actually passed in as a string, so to construct the final string we want to pass in we've had to concatenate (glue together) a string of "rgba(0,0,", followed by the blue value created by multiplying i by 6 then adding 50, followed by a string of ",0.5)".
    7. 125 | 126 |
  7. You could also try using random values; Try using say Math.floor(Math.random()*200) for one or more of the RGB colour values, for example.
    8. 127 |
128 | 129 |

Advanced loop ideas

130 | 131 |

How about rotating the squares? Canvas has a built-in rotate function, which unhelpfully takes a rotation value in radians. Just try playing with really small values; for example, try adding this at the bottom of your for loop (just before the closing curly brace (})):

132 | 133 | 
myContext.rotate(0.025);
134 | 135 |

How about trigonometry? How about a sine wave of squares? Try something like this:

136 | 137 | 
for(i=0;i<=60;i++) {
138 |   myContext.fillRect((i*5),(250+(Math.sin(i/6))*50),10,10);  
139 | }
140 | 141 |

Or how about replacing our square with a circle? You can draw a circle using the arc() function, but this is a bit more complicated than before. To draw a circle you need to tell canvas to begin the drawing path with beginPath(), and then draw the circle using fill() (or stroke(), if you only want an outline circle; you'd have to use strokeStyle() to set the stroke colour in this case, not fillStyle()):

142 | 143 | 
var myCanvas = document.getElementById('myCanvas');
144 | var myContext = myCanvas.getContext('2d');
145 | 
146 | for(i=0;i<=100;i++) {
147 |   myContext.fillStyle = 'rgba(0,0,'
148 |     + (Math.floor(Math.random()*200)) + ',0.15)';
149 |   myContext.beginPath();
150 |   myContext.arc((i*5),(250+(Math.sin(i/6))*50),10,0,Math.PI*2,true);
151 |   myContext.fill();
152 | }
153 | 154 |

This is where programming starts to get fun. The possibilities really are endless! Let's create something interesting, and save it for later use.

155 |
156 | 157 | 162 | 163 |
164 |

Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. Share it, make it better, use it for good.

165 | 166 |
167 | 168 | 169 | 170 | -------------------------------------------------------------------------------- /guides/lesson7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Introduction to programming, Part 7 9 | 10 | 11 | 12 | 15 | 16 | 17 | 18 | 19 |
20 | 21 |
22 |

Introduction to programming

23 |

Further improving our guessing game with functions and events

24 |
25 | 26 | 31 | 32 |

Our game from earlier has still got a problem. We are still using a prompt() function to bring up a dialog box to ask players for guesses. This is still really bad for user experience. One of the core rules of user experience is to keep the number of pop ups down to a minimum. You all know how annoying popups can be. We should be able to do our entire app inside the web page, collecting data from the user with form elements. Our code currently looks like this:

33 | 34 |

The HTML:

35 | 36 | 
<h1>Number guessing game</h1>
 37 | <p class="guesses"></p>
 38 | <p class="lastResult"></p>
 39 | <p class="lowOrHi"></p>
40 | 41 |

The JavaScript:

42 | 43 | 
var randomNumber = Math.floor(Math.random() * 100) + 1;
 44 | 
 45 | var guesses = document.querySelector(".guesses");
 46 | var lastResult = document.querySelector(".lastResult");
 47 | var lowOrHi = document.querySelector(".lowOrHi");
 48 | 
 49 | for(i = 1; i <= 10 ; i++) {
 50 |   var userGuess = prompt("Enter guess " + i);
 51 |   guesses.innerHTML += userGuess + " ";
 52 | 
 53 |   if(userGuess === randomNumber) {
 54 |     lastResult.innerHTML = "Congratulations! You got it right!";
 55 |     lowOrHi.innerHTML = "";
 56 |     break;
 57 |   } else {
 58 |     lastResult.innerHTML = "Wrong!";
 59 |     if(userGuess < randomNumber) {
 60 |       lowOrHi.innerHTML = "Your guess is too low!";
 61 |     } else if(userGuess > randomNumber) {
 62 |       lowOrHi.innerHTML = "Your guess is too high!";
 63 |     }
 64 |   }
 65 | }
66 | 67 |

Before running through the below steps, find the template file that you previously wrote your cgame code into. If you don't have it or can't find it, then no matter - you can create a new copy of the template and copy the code into it.

68 | 69 |
    70 |
  1. So first we need to provide a different way for the user to give us their guesses, given that we want to get rid of the prompt() function. The best way to collect information from users is to use <input> elements. In your HTML, add the following at the bottom of your </body> area.
    2. 71 | 72 | 
    <div class="form">
 73 |   <label for="guessField">Enter your next guess: </label>
 74 |   <input type="text" class="guessField" id="guessField">
 75 |   <button class="guessSubmit">Enter Guess</button>
 76 | </div>
    77 | 78 |
  2. Now we need to change our JavaScript so that in each turn of the game, the user's guess is taken from the submitted form, and not a prompt() function. This is trickier than you'd think, so I'll give you some clues: 79 | 80 |
      81 |
    • You will need to get rid of the loop and instead encapsulate the guess processing code in a function
      • 82 |
    • You will need to add an event listener that listens for the form being submitted (the button being clicked) and as a result runs the function
      • 83 |
    • You will need a variable that tracks what guess number we are on and is incremented each time the function runs
      • 84 |
    • After 10 guesses we need to end the game with some kind of "Game over" message
      • 85 |
    • When the number is guessed correctly, the game should end and no more guesses should be allowed
      • 86 |
    87 | 88 |
    3. 89 | 90 |
91 | 92 |

Lets handle these, one at a time.

93 | 94 |

Get rid of the loop and instead encapsulate the guess processing code in a function

95 | 96 | 101 | 102 |

To grab the form element references, enter the following variable definitions, beneath the existing ones:

103 | 104 | 

105 | var guessSubmit = document.querySelector(".guessSubmit");
106 | // reference to the button that submits the guess
107 | var guessField = document.querySelector(".guessField");
108 | // reference to the text input field that the guess is typed into
109 | 110 |

Now replace the entire for loop with the following function:

111 | 112 | 
function checkGuess() {
113 | // replace the for loop with a function
114 |   var userGuess = Number(guessField.value);
115 |   // no more prompt. The guess is now equal to the value inside
116 |   // the input field when the function is run.
117 |   guesses.innerHTML += userGuess + " ";
118 | 
119 |   if(userGuess === randomNumber) {
120 |     lastResult.innerHTML = "Congratulations! You got it right!";
121 |     lowOrHi.innerHTML = "";
122 |   } else {
123 |     lastResult.innerHTML = "Wrong!";
124 |     if(userGuess < randomNumber) {
125 |       lowOrHi.innerHTML = "Your guess is too low!";
126 |     } else if(userGuess > randomNumber) {
127 |       lowOrHi.innerHTML = "Your guess is too high!";
128 |     }
129 | 
130 |   }
131 | }
132 | 133 |

Note the line var userGuess = Number(guessField.value);. This is what grabs the guess from the guessField value once the function is run. Note that we've also had to wrap it in a Number() function, to make sure the guess is treated like a number, not a string.

134 | 135 |

Add an event listener that listens to when the form is submitted (the button is clicked) and as a result runs the function

136 | 137 |

This is an easy step compared to all the changes we had to make before. Here we just need to add a line below the function that adds an onclick listener to the button that functions the function when the click happens.

138 | 139 |

Add this at the bottom of your JavaScript area:

140 | 141 | 
guessSubmit.onclick = checkGuess;
142 | 143 |

Add a variable that tracks what guess number we are on and is incremented each time the function runs

144 | 145 |

Because we no longer have a loop, the guess number will no longer increment on its own. we need to emulate the loop functionality by first adding a variable that tracks the guess number. We then need to increase that value by one each time the checkGuess function is run.

146 | 147 |

Add this below the other variable definitions:

148 | 149 | 
var guessCount = 1;
150 | // Add a variable that tracks the guess number we are on
151 | 152 |

Now add the following lines. These need to go at the bottom of the else { ... } code block (just above the seoncd-to-last closing curly brace), as we want to update the guess count each time the player gets the answer wrong:

153 | 154 | 
guessCount++;
155 | // after each guess, increase the guess count
156 | guessField.value = "";
157 | // and empty the text input field ready for the next guess
158 | 159 |

The second line empties the form <input>element, ready for the player to enter the next guess.

160 | 161 |

After 10 guesses we need to end the game with some kind of "Game over" message

162 | 163 |

This is slightly trickier and requires us to add to our if ... else structure to check if the guessCount is equal to 10 or not. If so, we'll end the game with some kind of message. If not, we'll carry on with the code as it was before.

164 | 165 |

The existing if ... else structure looks like this:

166 | 167 | 
if(userGuess === randomNumber) {
168 |   lastResult.innerHTML = "Congratulations! You got it right!";
169 |   lowOrHi.innerHTML = "";
170 | } else {
171 |   lastResult.innerHTML = "Wrong!";
172 |   if(userGuess < randomNumber) {
173 |     lowOrHi.innerHTML = "Your guess is too low!";
174 |   } else if(userGuess > randomNumber) {
175 |     lowOrHi.innerHTML = "Your guess is too high!";
176 |   }
177 | 
178 |   guessCount++;
179 |   // after each guess, increase the guess count
180 |   guessField.value = "";
181 |   // and empty the text input field ready for the next guess
182 | 
183 | }
184 | 185 |

You need to wrap all of this in the following additional if ... else structure:

186 | 187 | 
if(guessCount === 10) {
188 |   // if 10 guesses have been had
189 |   lastResult.innerHTML = "!!!GAME OVER!!!";
190 |   // provide a game over message
191 | } else {
192 |   
193 |   // place the existing if...else here
194 | 
195 | }
196 | 197 |

If the game is over, then let the player know. If not, then carry on with the game.

198 | 199 |

When the number is guessed correctly, the game should end and no more guesses should be allowed.

200 | 201 |

This is a big issue: when the number is guessed correctly, we no longer want users to be able to enter more guesses, otherwise it totally breaks the flow of the game. There are a lot of different options that could be chosen to rectify this. We will add a function called disableForm() that stops the form being clickable when run. We will call this function when either the 10th guess is reached, or the number is guessed correctly.

202 | 203 |

first of all, add the disableForm() function somewhere near the bottom of the code. Just above the .onclick line will be fine:

204 | 205 | 
function disableForm() {
206 |   var wholeForm = document.querySelector(".form");
207 |   // grab a reference to the whole form (the contents of the
208 |   // div with class form)
209 |   wholeForm.style.opacity = 0.5;
210 |   // change the opacity of the form to 0.5
211 |   guessField.setAttribute("disabled", "disabled");
212 |   guessSubmit.setAttribute("disabled", "disabled");
213 |   // disable the form field and submit button so they can
214 |   // no longer be used
215 | }
216 | 217 |

Now invoke this function in appropriate places using disableForm(); — you want to invoke it if guessCount === 10, and if userGuess === randomNumber, to give you a large clue.

218 | 219 |

Note: As an extra advanced exercise, you could try adding a button that when clicked starts a new game by resetting the state of the program and begins it all again.

220 | 221 | 226 | 227 |
228 |

Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. Share it, make it better, use it for good.

229 | 230 |
231 | 232 | 233 | -------------------------------------------------------------------------------- /guides/prism/prism.css: -------------------------------------------------------------------------------- 1 | /** 2 | * prism.js default theme for JavaScript, CSS and HTML 3 | * Based on dabblet (http://dabblet.com) 4 | * @author Lea Verou 5 | */ 6 | 7 | code[class*="language-"], 8 | pre[class*="language-"] { 9 | color: black; 10 | text-shadow: 0 1px white; 11 | font-family: Consolas, Monaco, 'Andale Mono', monospace; 12 | direction: ltr; 13 | text-align: left; 14 | white-space: pre; 15 | word-spacing: normal; 16 | word-break: normal; 17 | 18 | 19 | -moz-tab-size: 4; 20 | -o-tab-size: 4; 21 | tab-size: 4; 22 | 23 | -webkit-hyphens: none; 24 | -moz-hyphens: none; 25 | -ms-hyphens: none; 26 | hyphens: none; 27 | } 28 | 29 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 30 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 31 | text-shadow: none; 32 | background: #b3d4fc; 33 | } 34 | 35 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 36 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 37 | text-shadow: none; 38 | background: #b3d4fc; 39 | } 40 | 41 | @media print { 42 | code[class*="language-"], 43 | pre[class*="language-"] { 44 | text-shadow: none; 45 | } 46 | } 47 | 48 | /* Code blocks */ 49 | pre[class*="language-"] { 50 | padding: 1em; 51 | margin: .5em 0; 52 | overflow: auto; 53 | } 54 | 55 | :not(pre) > code[class*="language-"], 56 | pre[class*="language-"] { 57 | background: #f5f2f0; 58 | } 59 | 60 | /* Inline code */ 61 | :not(pre) > code[class*="language-"] { 62 | padding: .1em; 63 | border-radius: .3em; 64 | } 65 | 66 | .token.comment, 67 | .token.prolog, 68 | .token.doctype, 69 | .token.cdata { 70 | color: slategray; 71 | } 72 | 73 | .token.punctuation { 74 | color: #999; 75 | } 76 | 77 | .namespace { 78 | opacity: .7; 79 | } 80 | 81 | .token.property, 82 | .token.tag, 83 | .token.boolean, 84 | .token.number, 85 | .token.constant, 86 | .token.symbol { 87 | color: #905; 88 | } 89 | 90 | .token.selector, 91 | .token.attr-name, 92 | .token.string, 93 | .token.builtin { 94 | color: #690; 95 | } 96 | 97 | .token.operator, 98 | .token.entity, 99 | .token.url, 100 | .language-css .token.string, 101 | .style .token.string, 102 | .token.variable { 103 | color: #a67f59; 104 | background: hsla(0,0%,100%,.5); 105 | } 106 | 107 | .token.atrule, 108 | .token.attr-value, 109 | .token.keyword { 110 | color: #07a; 111 | } 112 | 113 | 114 | .token.regex, 115 | .token.important { 116 | color: #e90; 117 | } 118 | 119 | .token.important { 120 | font-weight: bold; 121 | } 122 | 123 | .token.entity { 124 | cursor: help; 125 | } 126 | 127 | pre.line-numbers { 128 | position: relative; 129 | padding-left: 3.8em; 130 | counter-reset: linenumber; 131 | } 132 | 133 | pre.line-numbers > code { 134 | position: relative; 135 | } 136 | 137 | .line-numbers .line-numbers-rows { 138 | position: absolute; 139 | pointer-events: none; 140 | top: 0; 141 | font-size: 100%; 142 | left: -3.8em; 143 | width: 3em; /* works for line-numbers below 1000 lines */ 144 | letter-spacing: -1px; 145 | border-right: 1px solid #999; 146 | 147 | -webkit-user-select: none; 148 | -moz-user-select: none; 149 | -ms-user-select: none; 150 | user-select: none; 151 | 152 | } 153 | 154 | .line-numbers-rows > span { 155 | pointer-events: none; 156 | display: block; 157 | counter-increment: linenumber; 158 | } 159 | 160 | .line-numbers-rows > span:before { 161 | content: counter(linenumber); 162 | color: #999; 163 | display: block; 164 | padding-right: 0.8em; 165 | text-align: right; 166 | } 167 | -------------------------------------------------------------------------------- /guides/prism/prism.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Prism: Lightweight, robust, elegant syntax highlighting 3 | * MIT license http://www.opensource.org/licenses/mit-license.php/ 4 | * @author Lea Verou http://lea.verou.me 5 | */(function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var r={};for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));return r;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var r=t.util.clone(t.languages[e]);for(var i in n)r[i]=n[i];return r},insertBefore:function(e,n,r,i){i=i||t.languages;var s=i[e],o={};for(var u in s)if(s.hasOwnProperty(u)){if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);o[u]=s[u]}return i[e]=o},DFS:function(e,n){for(var r in e){n.call(e,r,e[r]);t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}}},highlightAll:function(e,n){var r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');for(var i=0,s;s=r[i++];)t.highlightElement(s,e===!0,n)},highlightElement:function(r,i,s){var o,u,a=r;while(a&&!e.test(a.className))a=a.parentNode;if(a){o=(a.className.match(e)||[,""])[1];u=t.languages[o]}if(!u)return;r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;a=r.parentNode;/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);var f=r.textContent;if(!f)return;f=f.replace(/&/g,"&").replace(/e.length)break e;if(p instanceof i)continue;a.lastIndex=0;var d=a.exec(p);if(d){l&&(c=d[1].length);var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];y&&w.push(y);var E=new i(u,f?t.tokenize(d,f):d);w.push(E);b&&w.push(b);Array.prototype.splice.apply(s,w)}}}return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");t.hooks.run("wrap",s);var o="";for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+""};if(!self.document){self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}})();; 6 | Prism.languages.markup={comment:/<!--[\w\W]*?-->/g,prolog:/<\?.+?\?>/,doctype:/<!DOCTYPE.+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/&#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&/,"&"))});; 7 | Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,ignore:/&(lt|gt|amp);/gi,punctuation:/[\{\};:]/g};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/(<|<)style[\w\W]*?(>|>)[\w\W]*?(<|<)\/style(>|>)/ig,inside:{tag:{pattern:/(<|<)style[\w\W]*?(>|>)|(<|<)\/style(>|>)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});; 8 | Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/ig,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/ig,inside:{punctuation:/\(/}}, number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|(&){1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g}; 9 | ; 10 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|throw|catch|finally|null|break|continue)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g});Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}});Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(<|<)script[\w\W]*?(>|>)[\w\W]*?(<|<)\/script(>|>)/ig,inside:{tag:{pattern:/(<|<)script[\w\W]*?(>|>)|(<|<)\/script(>|>)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}}); 11 | ; 12 | Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)}) 13 | ; 14 | -------------------------------------------------------------------------------- /guides/style.css: -------------------------------------------------------------------------------- 1 | *, *:before, *:after { 2 | -moz-box-sizing: border-box; 3 | -webkit-box-sizing: border-box; 4 | box-sizing: border-box; 5 | } 6 | 7 | 8 | html, body { 9 | margin: 0; 10 | padding: 0; 11 | } 12 | 13 | html { 14 | font-family: 'Sorts Mill Goudy', serif; 15 | font-size: 10px; 16 | background-color: white; 17 | } 18 | 19 | body { 20 | max-width: 700px; 21 | margin: 0 auto; 22 | background-color: white; 23 | position: relative; 24 | } 25 | 26 | main { 27 | padding: 10px; 28 | } 29 | 30 | p, li { 31 | font-size: 1.7rem; 32 | line-height: 3rem; 33 | } 34 | 35 | h2 + p, h3 + p { 36 | text-indent: 1.5rem; 37 | } 38 | 39 | h1, h2, h3 { 40 | font-family: 'Alfa Slab One', cursive; 41 | } 42 | 43 | hgroup { 44 | margin: 0; 45 | } 46 | 47 | h1 { 48 | text-transform: uppercase; 49 | text-align: center; 50 | font-size: 4rem; 51 | width: 100%; 52 | margin: 0; 53 | padding: 30px 20px; 54 | color: white; 55 | background-color: purple; 56 | letter-spacing: 0.3rem; 57 | text-shadow: -1px -1px 1px #aaa, 58 | 0px 4px 1px rgba(0,0,0,0.5), 59 | 4px 4px 5px rgba(0,0,0,0.7), 60 | 0px 0px 7px rgba(0,0,0,0.4); 61 | box-shadow: 0px 5px 10px 3px rgba(0,0,0,0.5); 62 | } 63 | 64 | h2 { 65 | font-size: 3rem; 66 | letter-spacing: 0.2rem; 67 | color: purple; 68 | } 69 | 70 | hgroup h2 { 71 | text-align: center; 72 | margin-bottom: -1rem; 73 | } 74 | 75 | h3 { 76 | font-size: 2rem; 77 | letter-spacing: 0.2rem; 78 | } 79 | 80 | h4 { 81 | font-size: 2rem; 82 | letter-spacing: 0.2rem; 83 | } 84 | 85 | a:link { 86 | font-weight: bold; 87 | } 88 | 89 | a:hover, a:focus { 90 | text-decoration: none; 91 | } 92 | 93 | .note, pre, nav { 94 | padding: 20px 10px; 95 | border-radius: 20px; 96 | background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.2)); 97 | background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.2)); 98 | background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.2)); 99 | background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.2)); 100 | font-size: 1.5em; 101 | } 102 | 103 | .note { 104 | background-color: red; 105 | background-color: rgba(255,0,0,0.5); 106 | } 107 | 108 | pre { 109 | background-color: #eee; 110 | position: relative; 111 | } 112 | 113 | p > code, li > code { 114 | background-color: rgba(0,0,0,0.1); 115 | color: purple; 116 | padding: 2px 4px; 117 | } 118 | 119 | blockquote { 120 | font-style: italic; 121 | color: #666; 122 | position: relative; 123 | } 124 | 125 | blockquote:before { 126 | content: "“"; 127 | font-size: 10em; 128 | position: absolute; 129 | left: -0.7em; 130 | top: -0.3em; 131 | color: purple; 132 | } 133 | 134 | main img, main iframe { 135 | display: block; 136 | max-width: 100%; 137 | margin: 0 auto; 138 | border: 1px solid black; 139 | } 140 | 141 | .highlight1 { 142 | background-color: rgba(255,0,0,0.2); 143 | border: 1px dashed rgba(255,0,0,0.7); 144 | } 145 | 146 | .highlight2 { 147 | background-color: rgba(0,150,150,0.2); 148 | border: 1px dashed rgba(0,150,150,0.7); 149 | } 150 | 151 | .highlight3 { 152 | background-color: rgba(0,0,255,0.2); 153 | border: 1px dashed rgba(0,0,255,0.7); 154 | } 155 | 156 | .highlight4 { 157 | background-color: rgba(255,255,0,0.2); 158 | border: 1px dashed rgba(255,255,0,0.7); 159 | } 160 | 161 | pre span { 162 | cursor: pointer; 163 | } 164 | 165 | pre span:before { 166 | content: attr(data-label); 167 | opacity: 0; 168 | 169 | padding: 5px 20px 5px 5px; 170 | border-radius: 5px 0 0 5px; 171 | color: white; 172 | font-size: 0.8em; 173 | box-shadow: -2px 0px 0px black; 174 | 175 | position: absolute; 176 | left: -24em; 177 | 178 | text-align: right; 179 | width: 25em; 180 | 181 | -webkit-transform: translateY(-5px); 182 | -moz-transform: translateY(-5px); 183 | -ms-transform: translateY(-5px); 184 | transform: translateY(-5px); 185 | 186 | background: #666; 187 | background: linear-gradient(225deg, transparent 8px, #666 9px) top right no-repeat, 188 | linear-gradient(315deg, transparent 8px, #666 9px) bottom right no-repeat; 189 | background-size: 100% 50%; 190 | } 191 | 192 | pre span:hover:before, pre span:focus:before { 193 | opacity: 1; 194 | transition: 1s all; 195 | } 196 | 197 | nav p { 198 | font-size: 0.8em; 199 | line-height: 1.5; 200 | } 201 | 202 | nav { 203 | padding: 1em; 204 | margin-top: 3em; 205 | margin-bottom: 1em; 206 | 207 | display: -webkit-flex; 208 | display: -webkit-box; 209 | display: -ms-flexbox; 210 | display: -moz-flex; 211 | display: -moz-box; 212 | display: flex; 213 | 214 | -webkit-align-items: center; 215 | -moz-align-items: center; 216 | -ms-align-items: center; 217 | align-items: center; 218 | 219 | -webkit-box-align: center; 220 | -moz-box-align: center; 221 | -ms-box-align: center; 222 | 223 | -webkit-justify-content: space-between; 224 | -moz-justify-content: space-between; 225 | -ms-justify-content: space-between; 226 | justify-content: space-between; 227 | 228 | -webkit-box-pack: justify; 229 | -moz-box-pack: justify; 230 | -ms-box-pack: justify; 231 | } 232 | 233 | .exercise { 234 | border-left: 10px solid purple; 235 | padding-left: 10px; 236 | } 237 | 238 | /* || slide numbers */ 239 | 240 | [id]:before { 241 | content: attr(id); 242 | position: absolute; 243 | left: -1em; 244 | color: #ddd; 245 | font-size: 36px; 246 | font-family: sans-serif; 247 | } 248 | 249 | /* || media query */ 250 | 251 | @media all and (max-width: 600px) { 252 | body { 253 | max-width: none; 254 | width: 100%; 255 | background 256 | } 257 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Beginners programming TopicKit 9 | 10 | 11 | 12 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 |
24 |

Beginners programming ContentKit

25 |

Beginning your journey towards learning to code

26 |
27 | 28 |

Hello and welcome to the "Beginners programming" ContentKit. This kit contains resources that you can use the learn and teach general programming principles and the JavaScript language. The material is divided into three sections:

29 | 30 |
    31 |
  1. Guides: This section contains a full 8-part tutorial series that you can work through on your own, or use for collaborative learning or teaching a class. This section also contains a number of demos to demonstrate the topics in action.
    2. 32 |
  2. Slides: This section contains a slide deck that can be used to give a presentation on the main topic of the TopicKit.
    3. 33 |
  3. Slide script: This section contains notes to go along with the slide deck. We have kept these separate from the slides so they are easier to translate.
    4. 34 |
35 | 36 |

How to use this ContentKit

37 | 38 |

If you are a self-learning student, you can just open up the Guides and start learning. If you get stuck, try talking to other students, or follow some of the advice in the Getting help section below.

39 | 40 |

If you are a teacher, then a general practice for using the Content Kit is as follows:

41 | 42 |
    43 |
  1. Make sure all the students have got a computer available, with a text editor and modern web browser available on them.
    2. 44 |
  2. Internet access is very useful, but not essential for this course. You should make sure that you have the complete set of course material available offline, in case Internet access is not availalble. Put it on a USB stick or CD perhaps, so it can be easily shared around all the students before the course starts.
    3. 45 |
  3. Get all the students to open up the Guides landing page in their browser, ready to get started.
    4. 46 |
  4. You should open up the Guides landing page in your browser too, but in addition have the Slides open in another tab, and also have the Slide script available to refer to in case you need guidance on presenting the slides (ideally have these open on another monitor or computer, or print them out and keep a set beside your computer.)
    5. 47 |
  5. Each lesson should take between 1 hour and 1 hour 30 minutes to go through. Take it slowly and give your students regular breaks if going thorugh multiple lessons in one session.
    6. 48 |
  6. As well as testing the students with the exercises that you'll find in the Guides, you should feel free to add your own test questions.
    7. 49 |
  7. To make finding where you are up and allowing your students to follow along easier, we've included numbers on the left hand side of the Guides that match up to the slide numbers and slide script numbers. Use these to find where you are in relation to the slides if you are following along and get lost.
    8. 50 |
51 | 52 |

Getting help

53 | 54 |

When you get stuck with a programming problem and need somewhere to turn for help, life can be frustrating unless you know where to go. If you don't have a programming genius friend you can call, here are some other suggestions:

55 | 56 | 67 | 68 |

Translations

69 | 70 |

No translations as yet. If you are interested in submitting one, please add it to the l10n directory in the repo, and submit a pull request.

71 | 72 |

Contact us

73 | 74 |

These resources are created in collaboration between the Mozilla MDN Technical Writers and Tech Evangelism teams. If you want to reach out to us, get in touch via the #mdn IRC channel and the dev-mdc mailing list.

75 | 76 | 77 |
78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /l10n/en/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /l10n/es/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /l10n/fr/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /slide-script/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Beginners programming slide notes 9 | 10 | 11 | 35 | 38 | 39 | 40 | 41 |
42 |

Slide notes for Beginners Programming

43 |
44 | 45 |
    46 |
  1. Title slide: Hello and welcome
    2. 47 |
  2. Table of contents: This is what we will cover in this workshop
    3. 48 |
  3. Intro
    4. 49 |
  4. Code is just another language: When we want to talk to humans and give them instructions, we use a human language, like English, Chinese or Urdu. When we want to talk to computers and give them instructions, we use code. JavaScript in particular is code that talks to a web browser.
    5. 50 |
  5. JavaScript is interpreted: By the JavaScript engine inside the web browser. JavaScript, and other languages like HTML and CSS, are interpreted to output web pages that a computer user can use.
    6. 51 |
  6. How the Web works: 52 |
      53 |
    • When a web user types a web address into their address bar or follows a link, their browser requests the web page from the server it is stored on.
      • 54 |
    • If the request is successful, the server sends the web page files (code, images, etc.) back to the browser
      • 55 |
    • The browser turns all these files into a web page and shows it to the user.
      • 56 |
    57 |
    7. 58 |
  7. Server-side vs client-side: Server-side code is run on the server, and the result is then sent to the client and displayed. Think of the code that finds the results when you do an Amazon search. Client-side code on the other hand is sent to the client as is, then interpreted by the client and displayed. We are only covering client-side code in this course.
    8. 59 |
  8. HTML: HTML is the language you use to structure your page content and give it meaning. HTML is composed of elements: tags that wrap around content.
    9. 60 |
  9. CSS: CSS is the language you use specify what you want your content to look like. It is made up of rules that select element to style, and change their style properties to new values.
    10. 61 |
  10. JavaScript: The JavaScript language is comprised of objects that you manipulate to create exciting dynamic functionality on web pages. Programming for the Web.
    11. 62 |
  11. Browser developer tools: Every browser has a set of developer tools that can be used to solve problems with web site code (fix bugs). These include a console that can be used to directly test the page's JavaScript. Developer tools are accessed using Ctrl + Shift + I (Cmd + Opt + I on Mac OSX, F12 on Internet Explorer)
    12. 63 |
  12. Variables
    13. 64 |
  13. Variables: You create a variable using the var keyword, followed by the variable name you choose. You assign a variable using the assignment operator, for example myVariable = "Chris". You can assign the variable different values after it has been created.
    14. 65 |
  14. Common variable data types: An integer is a whole number value, and is assigned without quote. A string is a series of characters, and must be surrounded in quotes. A boolean is a true/false value. Arrays and other objects return a data type of object.
    15. 66 |
  15. Syntax rules: There are various syntax rules you need to remember about JavaScript. The most important ones are listed here.
    16. 67 |
  16. Operators: These slides list the most common JS operators. Most of these are obvious. + is used to add numbers together and join strings together. Modulo returns the remainder after one number is divided by another, and is mainly useful for detecting whether a number is even or odd. For example, 4 % 2 is 0, as 2 divides exactly into 4. 5 % 2 is 1, as 2 divides into 5 twice, with 1 left over.
    17. 68 |
  17. Operators: These operators are mostly used to compare values (comparison operators). We've already seen assignment, and we'll see a lot more of the others later in the course. For example, < tests whether one value is less than another — 3 < 5 returns true, because 3 is less than 5.
    18. 69 |
  18. Operator precedence is the order in which operators are executed in a sum. Division/multiplication are executed first, then addition/subtraction. This is why 8 + 4 / 3 * 4 perhaps doesn't return the result you thought it might. The divide is run first, then the multiply, then finally the addition. You can force the order using brackets, for example (8 + 4) / (3 * 4)
    19. 70 |
  19. Conditions and loops
    20. 71 |
  20. Conditional code allows us to test a condition (for example 5 < 3.) If the condition returns true then one block of code will be run. If it returns false, something else will happen. Let's look at the code structure.
    21. 72 |
  21. if ... else pseudocode: The basic if ... else code structure looks like this.
    22. 73 |
  22. if ... else example: and here is a real code example. Here we prompt the user to enter a town/city name. If they enter "Manchester" then they'll see the first alert message. If they enter anything else, they'll see the second alert.
    23. 74 |
  23. if ... else if ... else example: else if() {} is used to chain a further condition check onto the code block.
    24. 75 |
  24. logical OR and AND: As you can see in the code examples, these operators can be used to create a conditional check where either or both conditions need to return true before the overall condition will return true.
    25. 76 |
  25. Nesting if ... else: This is just fine.
    26. 77 |
  26. Loops: These code structures allow you to run the same code several times, updating part of the code each time to iterate through a set of data for example.
    27. 78 |
  27. For loop pseudocode: The for loop structure looks like this.
    28. 79 |
  28. For loop features 80 |
      81 |
    • i — variable
      • 82 |
    • starting value — what i begins at
      • 83 |
    • exit-condition — what value i has to be for the loop to keep running
      • 84 |
    • iterator — how i changes each time the loop is run
      • 85 |
    • Run code — the code run each time the loop runs
      • 86 |
    87 |
    29. 88 |
  29. For loop example: Here is a real for loop example.
    30. 89 |
  30. Document Object Model
    31. 90 |
  31. The browser converts HTML to a DOM tree: The Document node is the top node in the tree. Then all the elements in your page are converted into nodes, which form a hierarchy based on how they are nested. The html node is top, then the head and body, then the elements inside those.
    32. 91 |
  32. JavaScript and CSS accessing the DOM: When you used CSS and JavaScript to affect nodes in the DOM, they walk up and down the tree until they find the element(s) they want.
    33. 92 |
  33. Example: JavaScript updating element contents: In this example, we grab a reference to the <h1> element using the document.querySelector() function, then store it in a variable called myH1. We then update the content inside the element by setting a new value for myH1's innerHTML property.
    34. 93 |
  34. Canvas
    35. 94 |
  35. Canvas is a way to script images using JavaScript. This doesn't sound very impressive to begin with, but you can do a lot with this, such as coding games inside the browser.
    36. 95 |
  36. Create a canvas + get a context: To manipulate a canvas, there are three steps to go through: 96 |
      97 |
    • Put a <canvas> element onto your HTML page.
      • 98 |
    • Grab a reference to that element and store it in a variable.
      • 99 |
    • Use the getContext() function of the canvas variable to get a 2D drawing context; store this context in a variable. This can then be manipulated to update the <canvas> element.
      • 100 |
    101 |
    37. 102 |
  37. Draw squares: it is easy to draw squares in canvas — fillRect and strokeRect allow you to draw filled and outline rectangles, respectively. Their four arguments are the x and y coordinates on the canvas, and the x and y dimensions. You cna use fillStyle and strokeStyle to set the colours the rectangles will be, and lineWidth will set the thickness of the stroke.
    38. 103 |
  38. Canvas loops: It doesn't take much imagination to start combining loops with drawing on a canvas, to create pretty patterns.
    39. 104 |
  39. More loop ideas: Here are some more ideas for you to try in your loops
    40. 105 |
  40. More loop ideas: And some more! Bear in mind that there is no easy primitive to draw a circle like there is for a rectangle, so you need to start a drawing path with beginPath(), draw a 360 degree arc(), and then end the drawing path with fill().
    41. 106 |
  41. Functions are blocks of code that can be defined once, and then called as many times as you like, meaning much more efficient code. We've already used a number of JavaScript's built-in functions, but here we'll look at how to define our own.
    42. 107 |
  42. Sample function: In this sample function, we see one way of defining a function — using the function keyword, followed by the name you want your function to have, followed by brackets(()), followed by curly braces ({}). Inside the curly brances we put our function code. In this case we are generating a random number between 1 and 10, after which we return the result out of the function using the return keyword. This in effect is the result you get returned when you run the function. You have to call (run) the function using its name followed by brackets.
    43. 108 |
  43. Function with argument: In this case the code structure is the same, except that inside the brackets we include an argument — this is a variable that we can use inside the function, depending on what result you want. In this case we can now generate a random number between 1 and any number, by specifying it as the argument when we call the function.
    44. 109 |
  44. Canvas function: This slide shows a simple example of a function that can generate a canvas sine wave of a certain length, at a certain position on the y axis, as specified by two arguments (separated by commas). A good example of how to encapsulte complex code so you only have to write it once.
    45. 110 |
  45. Events
    46. 111 |
  46. Events are... a feature of JavaScript that allow us to run code in response to user actions — such as clicking a button or moving the mouse — or actions run by other parts of the code — such as a database successfully being saved.
    47. 112 |
  47. Sample event usage (anonymous function): The simplest event example involes a button in your HTML. We grab a reference to this button, then attach an event handler property to it — onclick. Its value is set to an anonymouse function that wil fun when the button is clicked.
    48. 113 |
  48. Sample event usage (named function): This example does the same thing, but using a named function (which is the same structure as we saw earlier in the functions section.) This fnuction is rthen called on a separate line, but without the brackets you'd usaually use. This is because including the brackets would run the function straight away, but you don't want it to run until you've clicked the button. This code is more complex, but more reusable. You could potentially call this function multiple times.
    49. 114 |
  49. Credits
    50. 115 |
116 | 117 | -------------------------------------------------------------------------------- /slides/License.md: -------------------------------------------------------------------------------- 1 | # The MIT License 2 | 3 | Copyright © 2010–2014 Vadim Makeev, http://pepelsbey.net/ 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | 11 | --- 12 | 13 | # Лицензия MIT 14 | 15 | Copyright © 2010–2014 Вадим Макеев, http://pepelsbey.net/ 16 | 17 | Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, добавление, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, также как и лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий: 18 | 19 | Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения. 20 | 21 | ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ГАРАНТИЯМИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ ПРАВ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО ИСКАМ О ВОЗМЕЩЕНИИ УЩЕРБА, УБЫТКОВ ИЛИ ДРУГИХ ТРЕБОВАНИЙ ПО ДЕЙСТВУЮЩИМ КОНТРАКТАМ, ДЕЛИКТАМ ИЛИ ИНОМУ, ВОЗНИКШИМ ИЗ, ИМЕЮЩИМ ПРИЧИНОЙ ИЛИ СВЯЗАННЫМ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫМИ ДЕЙСТВИЯМИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ. -------------------------------------------------------------------------------- /slides/Readme.md: -------------------------------------------------------------------------------- 1 | # Shower HTML presentation engine 2 | 3 | Follow [@shower_me](https://twitter.com/shower_me) for support and updates 4 | 5 | To see Shower in action: 6 | 7 | - Open [shwr.me](http://shwr.me/) 8 | - Click any slide to enter presentation mode 9 | - Use arrow keys or presenter remote to navigate 10 | - Press `Esc` to exit presentation mode 11 | 12 | See [Wiki](https://github.com/shower/shower/wiki) for more information how to use Shower. 13 | 14 | ## Using Shower 15 | 16 | There are two ways of making presentation using Shower: you can just download an archive with all you need or you can install needed Shower modules using [npm](https://www.npmjs.org) or [bower](http://bower.io). 17 | 18 | ### Simple Way 19 | 20 | In a simple way you just download the latest Shower version with built-in themes and use it. 21 | 22 | 1. Download and unarchive [shower.zip](http://shwr.me/shower.zip) 23 | 2. Open `index.html` in any code or text editor, edit your slides in HTML 24 | 3. Use `pictures` folder for pictures used in presentation 25 | 4. Once finished, open `index.html` in a browser, enter full screen and start presenting 26 | 27 | ### Advanced Way 28 | 29 | Advanced way allows you to manually install needed Shower packages and requires [Node.js](http://nodejs.org/) installed together with package managment system: `npm` or `bower`. 30 | 31 | 1. Run `npm install shower-core shower-ribbon` 32 | 2. Link core and theme files in `node_modules` folder to your presentation file 33 | 3. You’re probably know what to do next, it’s an advanced way. 34 | 35 | **Note:** you can use `bower` instead of `npm` or `shower-bright` instead of `shower-ribbon` in command above to install Shower using Bower or get Bright theme. 36 | 37 | ## Usage examples 38 | 39 | - [Clear and Sharp](http://pepelsbey.net/pres/clear-and-sharp/) 40 | - [CSS Management](http://pepelsbey.net/pres/knife-train/) 41 | - [Push it!](http://pepelsbey.net/pres/push-it/) 42 | - [Pre-fixes](http://pepelsbey.net/pres/pre-fixes/) 43 | - [Web In Curves](http://pepelsbey.net/pres/web-in-curves/) 44 | - [Sense Coding](http://pepelsbey.net/pres/sense-coding/) 45 | 46 | ## Browser support 47 | 48 | Latest stable versions of Chrome, Internet Explorer, Firefox, Opera and Safari are supported. 49 | 50 | ## Contributing 51 | 52 | You’re always welcome to contibute. Fork project, make changes and send it as pull request. But it’s better to file an [issue](https://github.com/shower/shower/issues) with your idea first. Read [contributing rules](https://github.com/shower/shower/blob/master/Contributing.md) for more details. 53 | 54 | Main contributors: [pepelsbey](https://github.com/pepelsbey), [jahson](https://github.com/jahson), [miripiruni](https://github.com/miripiruni), [kizu](https://github.com/kizu), [artpolikarpov](https://github.com/artpolikarpov), [tonyganch](https://github.com/tonyganch). 55 | 56 | --- 57 | Licensed under [MIT License](http://en.wikipedia.org/wiki/MIT_License), see [license page](https://github.com/shower/shower/wiki/MIT-License) for details. -------------------------------------------------------------------------------- /slides/pictures/cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/slides/pictures/cover.jpg -------------------------------------------------------------------------------- /slides/pictures/dom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/slides/pictures/dom.jpg -------------------------------------------------------------------------------- /slides/pictures/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /slides/pictures/picture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/slides/pictures/picture.jpg -------------------------------------------------------------------------------- /slides/shower/License.md: -------------------------------------------------------------------------------- 1 | # The MIT License 2 | 3 | Copyright © 2010–2014 Vadim Makeev, http://pepelsbey.net/ 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | 11 | --- 12 | 13 | # Лицензия MIT 14 | 15 | Copyright © 2010–2014 Вадим Макеев, http://pepelsbey.net/ 16 | 17 | Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, добавление, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, также как и лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий: 18 | 19 | Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения. 20 | 21 | ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ГАРАНТИЯМИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ ПРАВ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО ИСКАМ О ВОЗМЕЩЕНИИ УЩЕРБА, УБЫТКОВ ИЛИ ДРУГИХ ТРЕБОВАНИЙ ПО ДЕЙСТВУЮЩИМ КОНТРАКТАМ, ДЕЛИКТАМ ИЛИ ИНОМУ, ВОЗНИКШИМ ИЗ, ИМЕЮЩИМ ПРИЧИНОЙ ИЛИ СВЯЗАННЫМ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫМИ ДЕЙСТВИЯМИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ. -------------------------------------------------------------------------------- /slides/shower/Readme.md: -------------------------------------------------------------------------------- 1 | # Core for Shower [![Build Status](https://travis-ci.org/shower/core.svg?branch=master)](https://travis-ci.org/shower/core) 2 | 3 | Follow [@shower_me](https://twitter.com/shower_me) for support and updates 4 | 5 | To see Shower in action: 6 | 7 | - Open [shwr.me](http://shwr.me/) 8 | - Click any slide to enter presentation mode 9 | - Use arrow keys or presenter remote to navigate 10 | - Press `Esc` to exit presentation mode 11 | 12 | Part of [Shower presentation template](https://github.com/shower/shower/). See [Wiki](https://github.com/shower/shower/wiki) for more information how to use Shower. 13 | 14 | --- 15 | Licensed under [MIT License](http://en.wikipedia.org/wiki/MIT_License), see [license page](https://github.com/shower/shower/wiki/MIT-License) for details. 16 | -------------------------------------------------------------------------------- /slides/shower/shower.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Core for Shower HTML presentation engine 3 | * shower-core v1.0.6, https://github.com/shower/core 4 | * @copyright 2010–2014 Vadim Makeev, http://pepelsbey.net 5 | * @license MIT license: github.com/shower/shower/wiki/MIT-License 6 | */ 7 | window.shower&&window.shower.init||(window.shower=function(a,b){function c(a){for(var b in a)a.hasOwnProperty(b)&&(this[b]=a[b])}var d,e={},f=a.location,g=a.console,h=b.title,i=[],j=[],k=!(!a.history||!a.history.pushState);e.debugMode=!1,c.prototype={getSlideNumber:function(){return this.number},isLast:function(){return e.slideList.length===this.number+1},isFinished:function(){return this.innerComplete>=this.innerLength},process:function(a){return this.timing?(this.initTimer(a),this):(this.next(a),this)},initTimer:function(a){var b=this;return b.timing?(b.stopTimer(),d=b.isFinished()?setInterval(function(){b.stopTimer(),a.next()},b.timing*(b.innerLength||1)):setInterval(function(){b.isFinished()?(b.stopTimer(),a.next()):b.next(a)},b.timing),this):!1},stopTimer:function(){return d&&(clearInterval(d),d=!1),this},prev:function(a){var c,d=this;return!d.hasInnerNavigation||d.isFinished()||0===d.innerComplete?(a.prev(),!1):(c=b.getElementById(d.id).querySelectorAll(".next.active"),!c||c.length<1?!1:(d.innerComplete>0?(d.innerComplete--,c[c.length-1].classList.remove("active")):a.prev(),this))},next:function(a){var c,d=this;return!d.hasInnerNavigation||d.isFinished()?(a.next(),!1):(d.isFinished()||(c=b.getElementById(d.id).querySelectorAll(".next:not(.active)"),c[0].classList.add("active"),d.innerComplete++),this)}},e._getData=function(a,b){return a.dataset?a.dataset[b]:a.getAttribute("data-"+b)},e.slideList=[],e.init=function(a,d){var f;e.debugMode&&(b.body.classList.add("debug"),g.log("Debug mode on")),a=a||".slide",d=d||"div.progress div";var h=b.createElement("section");h.className="live-region",h.setAttribute("role","region"),h.setAttribute("aria-live","assertive"),h.setAttribute("aria-relevant","additions"),h.setAttribute("aria-label","Slide Content: Auto-updating"),b.body.appendChild(h),i=b.querySelectorAll(a),j=b.querySelector(d);for(var k=0;k=0&&e.go(a),c&&e.enterSlideMode()},e._getTransform=function(){var c=Math.max(b.body.clientWidth/a.innerWidth,b.body.clientHeight/a.innerHeight);return"scale("+1/c+")"},e._applyTransform=function(a){return["WebkitTransform","MozTransform","msTransform","OTransform","transform"].forEach(function(c){b.body.style[c]=a}),!0},e._isNumber=function(a){return!isNaN(parseFloat(a))&&isFinite(a)},e._normalizeSlideNumber=function(a){if(!e._isNumber(a))throw new Error("Gimme slide number as Number, baby!");return 0>a&&(a=0),a>=e.slideList.length&&(a=e.slideList.length-1),a},e._getSlideIdByEl=function(a){for(;"BODY"!==a.nodeName&&"HTML"!==a.nodeName;){if(a.classList.contains("slide"))return a.id;a=a.parentNode}return""},e._checkInteractiveElement=function(a){return"A"===a.target.nodeName},e.getSlideNumber=function(a){var b,c=e.slideList.length-1;for(""===a&&(b=0);c>=0;--c)if(a===e.slideList[c].id){b=c;break}return b},e.go=function(a,b){var c;if(!e._isNumber(a))throw new Error("Gimme slide number as Number, baby!");return e.slideList[a]?(f.hash=e.getSlideHash(a),e.updateProgress(a),e.updateActiveAndVisitedSlides(a),e.isSlideMode()&&(e.showPresenterNotes(a),c=e.slideList[a],c.timing&&c.initTimer(e)),"function"==typeof b&&b(),a):!1},e.next=function(a){var b=e.getCurrentSlideNumber(),c=e.slideList[b+1];return c?(e.go(b+1),"function"==typeof a&&a(),this):!1},e._turnNextSlide=function(a){var b=e.getCurrentSlideNumber(),c=e.slideList[b];e.isSlideMode()?(c.stopTimer(),c.next(e)):e.go(b+1),"function"==typeof a&&a()},e.prev=e.previous=function(a){var b=e.getCurrentSlideNumber();return 1>b?!1:(e.go(b-1),"function"==typeof a&&a(),!0)},e._turnPreviousSlide=function(a){var b=e.getCurrentSlideNumber(),c=e.slideList[b];return c.stopTimer(),e.isSlideMode()?c.prev(e):e.go(b-1),"function"==typeof a&&a(),!0},e.first=function(a){var b=e.slideList[e.getCurrentSlideNumber()];b&&b.timing&&b.stopTimer(),e.go(0),"function"==typeof a&&a()},e.last=function(a){var b=e.slideList[e.getCurrentSlideNumber()];b&&b.timing&&b.stopTimer(),e.go(e.slideList.length-1),"function"==typeof a&&a()},e.enterSlideMode=function(a){var c=e.getCurrentSlideNumber();return b.body.classList.remove("list"),b.body.classList.add("full"),e.isListMode()&&k&&history.pushState(null,null,f.pathname+"?full"+e.getSlideHash(c)),e._applyTransform(e._getTransform()),"function"==typeof a&&a(),!0},e.enterListMode=function(a){var c;return b.body.classList.remove("full"),b.body.classList.add("list"),e.clearPresenterNotes(),e._applyTransform("none"),e.isListMode()?!1:(c=e.getCurrentSlideNumber(),e.slideList[c].stopTimer(),e.isSlideMode()&&k&&history.pushState(null,null,f.pathname+e.getSlideHash(c)),e.scrollToSlide(c),"function"==typeof a&&a(),!0)},e.toggleMode=function(a){return e.isListMode()?e.enterSlideMode():e.enterListMode(),"function"==typeof a&&a(),!0},e.getCurrentSlideNumber=function(){var a=e.slideList.length-1,b=f.hash.substr(1);if(""===b)return-1;for(;a>=0;--a)if(b===e.slideList[a].id)return a;return-1},e.scrollToSlide=function(c){var d,f=!1;if(!e._isNumber(c))throw new Error("Gimme slide number as Number, baby!");if(e.isSlideMode())throw new Error("You can't scroll to because you in slide mode. Please, switch to list mode.");if(-1===c)return f;if(!e.slideList[c])throw new Error("There is no slide with number "+c);return d=b.getElementById(e.slideList[c].id),a.scrollTo(0,d.offsetTop),f=!0,f},e.isListMode=function(){return k?!/^full.*/.test(f.search.substr(1)):b.body.classList.contains("list")},e.isSlideMode=function(){return k?/^full.*/.test(f.search.substr(1)):b.body.classList.contains("full")},e.updateProgress=function(a){if(null===j)return!1;if(!e._isNumber(a))throw new Error("Gimme slide number as Number, baby!");return progressVal=(100/(e.slideList.length-1)*e._normalizeSlideNumber(a)).toFixed(2)+"%",j.style.width=progressVal,j.setAttribute("role","progressbar"),j.setAttribute("aria-valuenow",progressVal),j.setAttribute("aria-valuemin","0"),j.setAttribute("aria-valuemax","100"),j.setAttribute("aria-valuetext","Slideshow Progress: "+progressVal),!0},e.updateActiveAndVisitedSlides=function(a){var c,d,f=e.slideList.length;if(a=e._normalizeSlideNumber(a),!e._isNumber(a))throw new Error("Gimme slide number as Number, baby!");for(c=0;f>c;++c)d=b.getElementById(e.slideList[c].id),a>c?(d.classList.remove("active"),d.classList.add("visited")):c>a?(d.classList.remove("visited"),d.classList.remove("active")):(d.classList.remove("visited"),d.classList.add("active"),b.querySelector(".live-region").innerHTML=d.innerHTML);return!0},e.clearPresenterNotes=function(){e.isSlideMode()&&g&&g.clear&&!e.debugMode&&g.clear()},e.showPresenterNotes=function(a){if(e.clearPresenterNotes(),g){a=e._normalizeSlideNumber(a);var c=e.slideList[a].id,d=b.getElementById(c).querySelector("footer");d&&d.innerHTML&&g.info(d.innerHTML.replace(/\n\s+/g,"\n"));var f=e._getSlideTitle(a+1);f&&g.info("NEXT: "+f)}},e._getSlideTitle=function(a){if(!e.slideList[a])return"";var c=e.slideList[a].id,d=b.getElementById(c).querySelector("h2");return d?d.textContent.replace(/\s+/g," ").replace(/^\s+|\s+$/g,""):void 0},e.getSlideHash=function(a){if(!e._isNumber(a))throw new Error("Gimme slide number as Number, baby!");return a=e._normalizeSlideNumber(a),"#"+e.slideList[a].id};for(var l in a.shower)e[l]=a.shower[l];return a.addEventListener("DOMContentLoaded",function(){e.init().run()},!1),a.addEventListener("popstate",function(){var a=e.getCurrentSlideNumber(),c=b.body.classList.contains("full")||e.isSlideMode();b.title=e._getSlideTitle(a)?e._getSlideTitle(a)+" — "+h:h,c&&-1===a?e.go(0):-1===a&&""!==f.hash&&e.go(0),e.isListMode()?e.enterListMode():e.enterSlideMode()},!1),a.addEventListener("resize",function(){e.isSlideMode()&&e._applyTransform(e._getTransform())},!1),b.addEventListener("keydown",function(a){var b,c=e.getCurrentSlideNumber(),d=e.slideList[-1!==c?c:0];switch(a.which){case 80:e.isListMode()&&a.altKey&&a.metaKey&&(a.preventDefault(),b=d.number,e.go(b),e.enterSlideMode(),e.showPresenterNotes(b),d.timing&&d.initTimer(e));break;case 116:a.preventDefault(),e.isListMode()?(b=a.shiftKey?d.number:0,e.go(b),e.enterSlideMode(),e.showPresenterNotes(b),d.timing&&d.initTimer(e)):e.enterListMode();break;case 13:e.isListMode()&&-1!==c&&(a.preventDefault(),e.enterSlideMode(),e.showPresenterNotes(c),d.timing&&d.initTimer(e));break;case 27:e.isSlideMode()&&(a.preventDefault(),e.enterListMode());break;case 33:case 38:case 37:case 72:case 75:if(a.altKey||a.ctrlKey||a.metaKey)return;a.preventDefault(),e._turnPreviousSlide();break;case 34:case 40:case 39:case 76:case 74:if(a.altKey||a.ctrlKey||a.metaKey)return;a.preventDefault(),e._turnNextSlide();break;case 36:a.preventDefault(),e.first();break;case 35:a.preventDefault(),e.last();break;case 9:case 32:if(a.altKey||a.ctrlKey||a.metaKey)return;a.preventDefault(),e[a.shiftKey?"_turnPreviousSlide":"_turnNextSlide"]()}},!1),b.addEventListener("click",function(a){var b,c,d=e._getSlideIdByEl(a.target);d&&e.isListMode()&&(b=e.getSlideNumber(d),e.go(b),e.enterSlideMode(),e.showPresenterNotes(b),c=e.slideList[b],c.timing&&c.initTimer(e))},!1),b.addEventListener("touchstart",function(b){var c,d,f,g=e._getSlideIdByEl(b.target);g&&(e.isSlideMode()&&!e._checkInteractiveElement(b)&&(f=b.touches[0].pageX,f>a.innerWidth/2?e._turnNextSlide():e._turnPreviousSlide()),e.isListMode()&&(c=e.getSlideNumber(g),e.go(c),e.enterSlideMode(),e.showPresenterNotes(c),d=e.slideList[c],d.timing&&d.initTimer(e)))},!1),b.addEventListener("touchmove",function(a){e.isSlideMode()&&a.preventDefault()},!1),e}(this,this.document)); -------------------------------------------------------------------------------- /slides/shower/themes/bright/License.md: -------------------------------------------------------------------------------- 1 | # The MIT License 2 | 3 | Copyright © 2010–2014 Vadim Makeev, http://pepelsbey.net/ 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | 11 | --- 12 | 13 | # Лицензия MIT 14 | 15 | Copyright © 2010–2014 Вадим Макеев, http://pepelsbey.net/ 16 | 17 | Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, добавление, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, также как и лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий: 18 | 19 | Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения. 20 | 21 | ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ГАРАНТИЯМИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ ПРАВ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО ИСКАМ О ВОЗМЕЩЕНИИ УЩЕРБА, УБЫТКОВ ИЛИ ДРУГИХ ТРЕБОВАНИЙ ПО ДЕЙСТВУЮЩИМ КОНТРАКТАМ, ДЕЛИКТАМ ИЛИ ИНОМУ, ВОЗНИКШИМ ИЗ, ИМЕЮЩИМ ПРИЧИНОЙ ИЛИ СВЯЗАННЫМ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫМИ ДЕЙСТВИЯМИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ. -------------------------------------------------------------------------------- /slides/shower/themes/bright/Readme.md: -------------------------------------------------------------------------------- 1 | # Bright theme for Shower 2 | 3 | Follow [@shower_me](https://twitter.com/shower_me) for support and updates 4 | 5 | To see Bright theme for Shower in action: 6 | 7 | - Open [shwr.me/shower/themes/bright](http://shwr.me/shower/themes/bright/) 8 | - Click any slide to enter presentation mode 9 | - Use arrow keys or presenter remote to navigate 10 | - Press `Esc` to exit presentation mode 11 | 12 | Part of [Shower presentation template](https://github.com/shower/shower/). See [Wiki](https://github.com/shower/shower/wiki) for more information how to use Shower. 13 | 14 | --- 15 | Licensed under [MIT License](http://en.wikipedia.org/wiki/MIT_License), see [license page](https://github.com/shower/shower/wiki/MIT-License) for details. 16 | -------------------------------------------------------------------------------- /slides/shower/themes/bright/fonts/Anka.Coder.Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/slides/shower/themes/bright/fonts/Anka.Coder.Italic.woff -------------------------------------------------------------------------------- /slides/shower/themes/bright/fonts/Anka.Coder.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/slides/shower/themes/bright/fonts/Anka.Coder.woff -------------------------------------------------------------------------------- /slides/shower/themes/bright/fonts/OpenSans.Bold.Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/slides/shower/themes/bright/fonts/OpenSans.Bold.Italic.woff -------------------------------------------------------------------------------- /slides/shower/themes/bright/fonts/OpenSans.Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/slides/shower/themes/bright/fonts/OpenSans.Bold.woff -------------------------------------------------------------------------------- /slides/shower/themes/bright/fonts/OpenSans.Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/slides/shower/themes/bright/fonts/OpenSans.Italic.woff -------------------------------------------------------------------------------- /slides/shower/themes/bright/fonts/OpenSans.Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/slides/shower/themes/bright/fonts/OpenSans.Light.woff -------------------------------------------------------------------------------- /slides/shower/themes/bright/fonts/OpenSans.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/slides/shower/themes/bright/fonts/OpenSans.woff -------------------------------------------------------------------------------- /slides/shower/themes/bright/images/grid-16x10.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /slides/shower/themes/bright/images/grid-4x3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /slides/shower/themes/bright/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Bright theme for Shower 5 | 6 | 7 | 8 | 9 | 10 | 11 | 15 |
16 |

Presentation Title

17 |

Yours Truly, Famous Inc.

18 |
19 |
20 |

Header

21 |

Typewriter etsy messenger bag fingerstache, aesthetic vinyl semiotics twee DIY forage chillwave. Thundercats ennui messenger bag, squid carles chillwave shoreditch pickled cliche letterpress. DIY beard locavore occupy salvia, whatever single-origin <coffee> fanny pack 3 wolf moon typewriter gastropub1 kale H20 chips. Ennui keffiyeh thundercats jean shorts biodiesel. Terry richardson, swag blog locavore umami vegan helvetica. Fingerstache kale chips.

22 |
23 |

Typewriter etsy messenger bag fingerstache, aesthetic vinyl semiotics twee DIY forage chillwave. Thundercats ennui messenger bag, squid carles chillwave shoreditch pickled cliche letterpress. DIY beard locavore occupy salvia, whatever single-origin <coffee> fanny pack 3 wolf moon typewriter gastropub1 kale H20 chips. Ennui keffiyeh thundercats jean shorts biodiesel. Terry richardson, swag blog locavore umami vegan helvetica. Fingerstache kale chips.

24 |
25 |
26 |
27 |

Header

28 |

Thundercats ennui messenger bag, squid carles chillwave shoreditch pickled cliche letterpress. DIY beard locavore occupy salvia, whatever single-origin coffee fanny pack 3 wolf moon typewriter gastropub kale chips. Ennui keffiyeh thundercats jean shorts biodiesel. Terry richardson, swag blog locavore umami vegan helvetica.

29 |

Typewriter etsy messenger bag fingerstache.

30 |
31 |

Typewriter etsy messenger bag fingerstache, aesthetic vinyl semiotics twee DIY forage chillwave. Thundercats ennui messenger bag, squid carles chillwave shoreditch pickled cliche letterpress.

32 |

DIY beard locavore occupy salvia, whatever single-origin coffee fanny pack 3 wolf moon typewriter gastropub kale chips. Ennui keffiyeh thundercats jean shorts biodiesel.

33 |
34 |
35 |
36 |

Lists in English typography

37 |
    38 |
  • Ennui keffiyeh thundercats
    • 39 |
  • Jean shorts biodiesel
    • 40 |
  • Terry richardson, swag blog 41 |
      42 |
    1. Locavore umami vegan helvetica
      2. 43 |
    2. Fingerstache kale chips
      3. 44 |
    3. Keytar sriracha gluten-free
      4. 45 |
    46 |
    • 47 |
  • Before they sold out master
    • 48 |
49 |
50 |
51 |

Lists in Russian typography

52 |
    53 |
  • Ennui keffiyeh thundercats
    • 54 |
  • Jean shorts biodiesel
    • 55 |
  • Terry richardson, swag blog 56 |
      57 |
    1. Locavore umami vegan helvetica
      2. 58 |
    2. Fingerstache kale chips
      3. 59 |
    3. Keytar sriracha gluten-free
      4. 60 |
    61 |
    • 62 |
  • Before they sold out master
    • 63 |
64 |
65 |
66 |

Lists in English typography

67 |
    68 |
  1. Locavore umami vegan helvetica
    2. 69 |
  2. Fingerstache kale chips
    3. 70 |
  3. Keytar sriracha gluten-free
    4. 71 |
72 |
    73 |
  • Ennui keffiyeh thundercats
    • 74 |
  • Jean shorts biodiesel
    • 75 |
  • Terry richardson, swag blog
    • 76 |
77 |
78 |
79 |

Quote

80 |
81 |
82 |

Typewriter etsy messenger bag fingerstache, aesthetic vinyl semiotics twee DIY forage chillwave. Thundercats ennui messenger bag, squid carles chillwave shoreditch pickled cliche letterpress.

83 |
84 |
Author Name
85 |
86 |

DIY beard locavore occupy salvia, whatever single-origin coffee fanny pack 3 wolf moon typewriter gastropub kale chips.

87 |
88 |
89 |

Table

90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 |
LocavoreUmamiHelveticaVegan
FingerstacheKaleChipsKeytar
SrirachaGluten-freeEnnuiKeffiyeh
ThundercatsJeanShortsBiodiesel
TerryRichardsonSwagBlog
122 |

Typewriter etsy messenger bag fingerstache.

123 |
124 |
125 |

Numbered code listing

126 | 
127 | 			<html lang="en">
128 | 			<head> <!--Comment-->
129 | 				<title>Shower</title>
130 | 				<meta charset="UTF-8">
131 | 				<link rel="stylesheet" href="s/screen.css">
132 | 				<script src="j/jquery.js"></script>
133 | 			</head>
134 |
135 |
136 |
137 |

Plain code listing

138 | 
<html lang="en">
139 | <head> <!--Comment-->
140 | 	<title>Shower</title>
141 | 	<meta charset="UTF-8">
142 | 	<link rel="stylesheet" href="s/screen.css">
143 | 	<script src="j/jquery.js"></script>
144 | </head>
145 |
146 |
147 |

148 | You Can
149 | Shout This Way 150 |

151 |
152 |

Typewriter etsy messenger bag fingerstache.

153 |
154 |
155 |
156 |

Linked Shout

157 |
158 |
159 |

Sliding Right

160 |
161 |
162 |

Sliding Up

163 |
164 |
165 | 166 |
167 |
168 | 169 |
170 |
171 | 172 |
173 |

Typewriter etsy messenger bag fingerstache.

174 |
175 |
176 |
177 | 178 |
179 |
180 | 181 |
182 |
183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 |
193 |
194 |

Timer

195 |

Three seconds to go.

196 |
197 |
198 |

List navigation

199 |
    200 |
  1. Ennui keffiyeh thundercats
    2. 201 | 202 | 203 | 204 | 205 |
206 |

Before they sold out master

207 |
208 |

Fork me on Github

209 | 213 |
214 | 215 | 216 | 217 | 218 | -------------------------------------------------------------------------------- /slides/shower/themes/bright/pictures/exact.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/slides/shower/themes/bright/pictures/exact.png -------------------------------------------------------------------------------- /slides/shower/themes/bright/pictures/square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/slides/shower/themes/bright/pictures/square.png -------------------------------------------------------------------------------- /slides/shower/themes/bright/pictures/tall.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/slides/shower/themes/bright/pictures/tall.png -------------------------------------------------------------------------------- /slides/shower/themes/bright/pictures/wide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/slides/shower/themes/bright/pictures/wide.png -------------------------------------------------------------------------------- /slides/shower/themes/bright/styles/screen.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Bright theme for Shower HTML presentation engine 3 | * shower-bright v1.0.10, https://github.com/shower/bright 4 | * Copyright © 2010–2014 Vadim Makeev, http://pepelsbey.net 5 | * Licensed under MIT license: github.com/shower/shower/wiki/MIT-License 6 | */ 7 | @font-face{font-family:'Open Sans';src:url(../fonts/OpenSans.woff) format('woff')}@font-face{font-weight:700;font-family:'Open Sans';src:url(../fonts/OpenSans.Bold.woff) format('woff')}@font-face{font-style:italic;font-family:'Open Sans';src:url(../fonts/OpenSans.Italic.woff) format('woff')}@font-face{font-style:italic;font-weight:700;font-family:'Open Sans';src:url(../fonts/OpenSans.Bold.Italic.woff) format('woff')}@font-face{font-family:'Open Sans Light';src:url(../fonts/OpenSans.Light.woff) format('woff')}@font-face{font-family:'Anka Coder';src:url(../fonts/Anka.Coder.woff) format('woff')}@font-face{font-style:italic;font-family:'Anka Coder';src:url(../fonts/Anka.Coder.Italic.woff) format('woff')}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}body{counter-reset:slide;font:24px/2 'Open Sans',sans-serif}@media print{body{text-rendering:geometricPrecision}}a{color:#52A2DF;background:-webkit-linear-gradient(bottom,currentColor,currentColor .09em,transparent .09em,transparent)repeat-x;background:linear-gradient(to top,currentColor,currentColor .09em,transparent .09em,transparent)repeat-x;text-decoration:none}.caption{display:none;margin:0 0 60px;padding:0 50px 0 0;color:#555}.caption h1{font:50px 'Open Sans Light',sans-serif}.badge{position:absolute;top:0;right:0;display:none;overflow:hidden;visibility:hidden;width:11em;height:11em;line-height:2.5;font-size:15px}.badge a{position:absolute;bottom:50%;right:-50%;left:-50%;visibility:visible;background:#52A2DF;color:#FFF;text-align:center;-webkit-transform-origin:50% 100%;-ms-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transform:rotate(45deg)translateY(-1em);-ms-transform:rotate(45deg)translateY(-1em);transform:rotate(45deg)translateY(-1em)}.live-region{display:none}.slide{position:relative;width:1024px;height:640px;background:#FFF;color:#000;-webkit-print-color-adjust:exact;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none}@media print{.slide{page-break-before:always}}.slide:after{position:absolute;right:0;bottom:45px;left:0;color:#AAA;counter-increment:slide;content:counter(slide);text-align:center;line-height:1}.slide>div{position:absolute;top:0;left:0;overflow:hidden;padding:100px 96px 0 128px;width:800px;height:540px}.slide h2{margin:0 0 58px;font:48px/1 'Open Sans Light',sans-serif}.slide p{margin:0 0 48px}.slide p.note{color:#AAA}.slide b,.slide strong{font-weight:700}.slide i,.slide em{font-style:italic}.slide code,.slide kbd,.slide samp{padding:5px 7px 1px;background:rgba(0,0,0,.08);color:#000;line-height:1;font-family:'Anka Coder',monospace}.slide mark{padding:2px 7px;background:#FAFAC4;color:#000}.slide sub,.slide sup{position:relative;line-height:0;font-size:75%}.slide sub{bottom:-.25em}.slide sup{top:-.5em}.slide blockquote{font-style:italic}.slide blockquote:before{position:absolute;margin:-49px 0 0 -100px;color:#DDD;content:'\201C';line-height:1;font-size:200px}.slide blockquote+figcaption{margin:-48px 0 48px;font-style:italic;font-weight:700}.slide ol,.slide ul{margin:0 0 48px;counter-reset:list}.slide ol li,.slide ul li{text-indent:-2em}.slide ol li:before,.slide ul li:before{display:inline-block;width:2em;color:#AAA;text-align:right}.slide ol ol,.slide ol ul,.slide ul ol,.slide ul ul{margin:0 0 0 2em}.slide ul>li:before{content:'\2022\00A0\00A0\2009'}.slide ul>li:lang(ru):before{content:'\2014\00A0\2009'}.slide ol>li:before{counter-increment:list;content:counter(list)'.\00A0\2009'}.slide pre{margin:0 0 45px;padding:3px 0 0;counter-reset:code;white-space:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4}.slide pre code{display:block;padding:0;background:0 0;white-space:pre;line-height:2}.slide pre code:before{position:absolute;margin-left:-50px;color:#AAA;counter-increment:code;content:counter(code,decimal-leading-zero)'.'}.slide pre code:only-child:before{content:''}.slide pre mark{padding:5px 7px 1px}.slide pre mark.important{background:#52A2DF;color:#FFF}.slide pre mark.comment{padding:0;background:0 0;color:#AAA}.slide table{margin:0 0 50px;width:100%;border-collapse:collapse;border-spacing:0}.slide table th,.slide table td{background:-webkit-linear-gradient(bottom,#52A2DF,#52A2DF .055em,transparent .055em,transparent)repeat-x;background:linear-gradient(to top,#52A2DF,#52A2DF .055em,transparent .055em,transparent)repeat-x}.slide table th{text-align:left;font-weight:700}.slide table.striped tr:nth-child(even){background:#f1f7fc}.slide.cover,.slide.shout{z-index:1}.slide.cover:after,.slide.shout:after{content:''}.slide.cover{background:#000}.slide.cover img,.slide.cover svg,.slide.cover video,.slide.cover object,.slide.cover canvas,.slide.cover iframe{position:absolute;top:0;left:0;z-index:-1}.slide.cover.w img,.slide.cover.w svg,.slide.cover.w video,.slide.cover.w object,.slide.cover.w canvas,.slide.cover.w iframe{top:50%;width:100%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.slide.cover.h img,.slide.cover.h svg,.slide.cover.h video,.slide.cover.h object,.slide.cover.h canvas,.slide.cover.h iframe{left:50%;height:100%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.slide.cover.w.h img,.slide.cover.w.h svg,.slide.cover.w.h video,.slide.cover.w.h object,.slide.cover.w.h canvas,.slide.cover.w.h iframe{top:0;left:0;-webkit-transform:none;-ms-transform:none;transform:none}.slide.shout{background:#52A2DF}.slide.shout h2{position:absolute;top:50%;left:128px;right:96px;color:#FFF;font-size:100px;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.slide.shout h2 a{background:-webkit-linear-gradient(bottom,currentColor,currentColor .055em,transparent .055em,transparent)repeat-x;background:linear-gradient(to top,currentColor,currentColor .055em,transparent .055em,transparent)repeat-x;color:#FFF}.slide .place{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.slide .place.t.l,.slide .place.t.r,.slide .place.b.r,.slide .place.b.l{-webkit-transform:none;-ms-transform:none;transform:none}.slide .place.t,.slide .place.b{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0)}.slide .place.l,.slide .place.r{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%)}.slide .place.t,.slide .place.t.l,.slide .place.t.r{top:0}.slide .place.r{right:0;left:auto}.slide .place.b,.slide .place.b.r,.slide .place.b.l{top:auto;bottom:0}.slide .place.l{left:0}.slide footer{position:absolute;left:0;right:0;bottom:-640px;z-index:1;display:none;padding:21px 96px 4px 128px;background:#FAFAC4;box-shadow:0 0 0 2px rgba(0,0,0,.05);-webkit-transition:bottom .3s;transition:bottom .3s}.slide footer p{margin:0 0 16px}.slide footer mark{background:rgba(255,255,255,.7)}.slide:hover footer{bottom:0}@media screen{.list{position:absolute;clip:rect(0,auto,auto,0);padding:50px 0 50px 50px;background:#e3e5e7;text-align:center}.list .caption,.list .badge{display:block}.list .slide{position:relative;top:270px;display:inline-block;margin:-270px -462px 0 0;text-align:left;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5)}@media (max-width:1180px){.list .slide{top:430px;margin:-430px -718px 0 0;-webkit-transform:scale(.25);-ms-transform:scale(.25);transform:scale(.25)}}.list .slide:before{position:absolute;top:0;left:0;z-index:-1;width:512px;height:320px;box-shadow:0 0 0 1px #DDD;content:'';-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(2);-ms-transform:scale(2);transform:scale(2)}@media (max-width:1180px){.list .slide:before{width:256px;height:160px;-webkit-transform:scale(4);-ms-transform:scale(4);transform:scale(4)}}.list .slide:after{top:100%;bottom:auto;padding-top:50px}@media (max-width:1180px){.list .slide:after{width:512px;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(2);-ms-transform:scale(2);transform:scale(2)}}.list .slide:hover:before{box-shadow:0 0 0 1px #EEE,0 0 0 12px rgba(255,255,255,.5)}.list .slide:target:before{box-shadow:0 0 10px 0 #3c99db,0 0 0 12px #52A2DF}.list .slide:target:after{color:#52A2DF}.list .slide>div:before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;content:''}.list .slide.cover:after,.list .slide.shout:after{content:counter(slide)}.list .slide footer{display:block}.full{position:absolute;top:50%;left:50%;overflow:hidden;margin:-320px 0 0 -512px;width:1024px;height:640px;background:#000}.full.debug:after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background:url(../images/grid-16x10.svg) no-repeat;content:''}.full .live-region{position:absolute;clip:rect(0 0 0 0);overflow:hidden;margin:-1px;padding:0;width:1px;height:1px;border:none;display:block}.full .slide{position:absolute;top:0;left:0;margin-left:150%}.full .slide .next{visibility:hidden}.full .slide .next.active{visibility:visible}.full .slide:target{margin:0}.full .slide.shout.right h2,.full .slide.shout.up h2{opacity:0;-webkit-transition:all .4s ease-out;transition:all .4s ease-out}.full .slide.shout.right:target h2,.full .slide.shout.up:target h2{opacity:1;-webkit-transform:translateX(0)translateY(-50%);-ms-transform:translateX(0)translateY(-50%);transform:translateX(0)translateY(-50%)}.full .slide.shout.right h2{-webkit-transform:translateX(-100%)translateY(-50%);-ms-transform:translateX(-100%)translateY(-50%);transform:translateX(-100%)translateY(-50%)}.full .slide.shout.up h2{-webkit-transform:translateX(0)translateY(100%);-ms-transform:translateX(0)translateY(100%);transform:translateX(0)translateY(100%)}.full .progress{position:absolute;right:0;bottom:0;left:0;z-index:1}.full .progress div{position:absolute;left:0;bottom:0;width:0;height:8px;background:#52A2DF;-webkit-transition:width .2s linear;transition:width .2s linear}}@page{margin:0;size:1024px 640px} -------------------------------------------------------------------------------- /slides/shower/themes/ribbon/License.md: -------------------------------------------------------------------------------- 1 | # The MIT License 2 | 3 | Copyright © 2010–2014 Vadim Makeev, http://pepelsbey.net/ 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | 11 | --- 12 | 13 | # Лицензия MIT 14 | 15 | Copyright © 2010–2014 Вадим Макеев, http://pepelsbey.net/ 16 | 17 | Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, добавление, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, также как и лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий: 18 | 19 | Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения. 20 | 21 | ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ГАРАНТИЯМИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ ПРАВ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО ИСКАМ О ВОЗМЕЩЕНИИ УЩЕРБА, УБЫТКОВ ИЛИ ДРУГИХ ТРЕБОВАНИЙ ПО ДЕЙСТВУЮЩИМ КОНТРАКТАМ, ДЕЛИКТАМ ИЛИ ИНОМУ, ВОЗНИКШИМ ИЗ, ИМЕЮЩИМ ПРИЧИНОЙ ИЛИ СВЯЗАННЫМ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫМИ ДЕЙСТВИЯМИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ. -------------------------------------------------------------------------------- /slides/shower/themes/ribbon/Readme.md: -------------------------------------------------------------------------------- 1 | # Ribbon theme for Shower 2 | 3 | Follow [@shower_me](https://twitter.com/shower_me) for support and updates 4 | 5 | To see Ribbon theme for Shower in action: 6 | 7 | - Open [shwr.me/shower/themes/ribbon](http://shwr.me/shower/themes/ribbon/) 8 | - Click any slide to enter presentation mode 9 | - Use arrow keys or presenter remote to navigate 10 | - Press `Esc` to exit presentation mode 11 | 12 | Part of [Shower presentation template](https://github.com/shower/shower/). See [Wiki](https://github.com/shower/shower/wiki) for more information how to use Shower. 13 | 14 | --- 15 | Licensed under [MIT License](http://en.wikipedia.org/wiki/MIT_License), see [license page](https://github.com/shower/shower/wiki/MIT-License) for details. -------------------------------------------------------------------------------- /slides/shower/themes/ribbon/fonts/PTMono.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/slides/shower/themes/ribbon/fonts/PTMono.woff -------------------------------------------------------------------------------- /slides/shower/themes/ribbon/fonts/PTSans.Bold.Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/slides/shower/themes/ribbon/fonts/PTSans.Bold.Italic.woff -------------------------------------------------------------------------------- /slides/shower/themes/ribbon/fonts/PTSans.Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/slides/shower/themes/ribbon/fonts/PTSans.Bold.woff -------------------------------------------------------------------------------- /slides/shower/themes/ribbon/fonts/PTSans.Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/slides/shower/themes/ribbon/fonts/PTSans.Italic.woff -------------------------------------------------------------------------------- /slides/shower/themes/ribbon/fonts/PTSans.Narrow.Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/slides/shower/themes/ribbon/fonts/PTSans.Narrow.Bold.woff -------------------------------------------------------------------------------- /slides/shower/themes/ribbon/fonts/PTSans.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/slides/shower/themes/ribbon/fonts/PTSans.woff -------------------------------------------------------------------------------- /slides/shower/themes/ribbon/images/grid-16x10.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /slides/shower/themes/ribbon/images/grid-4x3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /slides/shower/themes/ribbon/images/linen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/slides/shower/themes/ribbon/images/linen.png -------------------------------------------------------------------------------- /slides/shower/themes/ribbon/images/linen@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/slides/shower/themes/ribbon/images/linen@2x.png -------------------------------------------------------------------------------- /slides/shower/themes/ribbon/images/ribbon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /slides/shower/themes/ribbon/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Ribbon theme for Shower 5 | 6 | 7 | 8 | 9 | 10 | 11 | 15 |
16 |

Presentation Title

17 |

Yours Truly, Famous Inc.

18 |
19 |
20 |

Header

21 |

Typewriter etsy messenger bag fingerstache, aesthetic vinyl semiotics twee DIY forage chillwave. Thundercats ennui messenger bag, squid carles chillwave shoreditch pickled cliche letterpress. DIY beard locavore occupy salvia, whatever single-origin <coffee> fanny pack 3 wolf moon typewriter gastropub1 kale H20 chips. Ennui keffiyeh thundercats jean shorts biodiesel. Terry richardson, swag blog locavore umami vegan helvetica. Fingerstache kale chips.

22 |
23 |

Typewriter etsy messenger bag fingerstache, aesthetic vinyl semiotics twee DIY forage chillwave. Thundercats ennui messenger bag, squid carles chillwave shoreditch pickled cliche letterpress. DIY beard locavore occupy salvia, whatever single-origin <coffee> fanny pack 3 wolf moon typewriter gastropub1 kale H20 chips. Ennui keffiyeh thundercats jean shorts biodiesel. Terry richardson, swag blog locavore umami vegan helvetica. Fingerstache kale chips.

24 |
25 |
26 |
27 |

Header

28 |

Thundercats ennui messenger bag, squid carles chillwave shoreditch pickled cliche letterpress. DIY beard locavore occupy salvia, whatever single-origin coffee fanny pack 3 wolf moon typewriter gastropub kale chips. Ennui keffiyeh thundercats jean shorts biodiesel. Terry richardson, swag blog locavore umami vegan helvetica. Fingerstache kale chips.

29 |

Typewriter etsy messenger bag fingerstache.

30 |
31 |

Typewriter etsy messenger bag fingerstache, aesthetic vinyl semiotics twee DIY forage chillwave. Thundercats ennui messenger bag, squid carles chillwave shoreditch pickled cliche letterpress.

32 |

DIY beard locavore occupy salvia, whatever single-origin coffee fanny pack 3 wolf moon typewriter gastropub kale chips. Ennui keffiyeh thundercats jean shorts biodiesel.

33 |
34 |
35 |
36 |

Lists in English typography

37 |
    38 |
  • Ennui keffiyeh thundercats
    • 39 |
  • Jean shorts biodiesel
    • 40 |
  • Terry richardson, swag blog 41 |
      42 |
    1. Locavore umami vegan helvetica
      2. 43 |
    2. Fingerstache kale chips
      3. 44 |
    3. Keytar sriracha gluten-free
      4. 45 |
    46 |
    • 47 |
  • Before they sold out master
    • 48 |
49 |
50 |
51 |

Lists in Russian typography

52 |
    53 |
  • Ennui keffiyeh thundercats
    • 54 |
  • Jean shorts biodiesel
    • 55 |
  • Terry richardson, swag blog 56 |
      57 |
    1. Locavore umami vegan helvetica
      2. 58 |
    2. Fingerstache kale chips
      3. 59 |
    3. Keytar sriracha gluten-free
      4. 60 |
    61 |
    • 62 |
  • Before they sold out master
    • 63 |
64 |
65 |
66 |

Lists in English typography

67 |
    68 |
  1. Locavore umami vegan helvetica
    2. 69 |
  2. Fingerstache kale chips
    3. 70 |
  3. Keytar sriracha gluten-free
    4. 71 |
72 |
    73 |
  • Ennui keffiyeh thundercats
    • 74 |
  • Jean shorts biodiesel
    • 75 |
  • Terry richardson, swag blog
    • 76 |
77 |
78 |
79 |

Quote

80 |
81 |
82 |

Typewriter etsy messenger bag fingerstache, aesthetic vinyl semiotics twee DIY forage chillwave. Thundercats ennui messenger bag, squid carles chillwave shoreditch pickled cliche letterpress.

83 |
84 |
Author Name
85 |
86 |

DIY beard locavore occupy salvia, whatever single-origin coffee fanny pack 3 wolf moon typewriter gastropub kale chips.

87 |
88 |
89 |

Table

90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 |
LocavoreUmamiHelveticaVegan
FingerstacheKaleChipsKeytar
SrirachaGluten-freeEnnuiKeffiyeh
ThundercatsJeanShortsBiodiesel
TerryRichardsonSwagBlog
122 |

Typewriter etsy messenger bag fingerstache.

123 |
124 |
125 |

Numbered code listing

126 | 
127 | 			<html lang="en">
128 | 			<head> <!--Comment-->
129 | 				<title>Shower</title>
130 | 				<meta charset="UTF-8">
131 | 				<link rel="stylesheet" href="s/screen.css">
132 | 				<script src="j/jquery.js"></script>
133 | 			</head>
134 |
135 |
136 |
137 |

Plain code listing

138 | 
<html lang="en">
139 | <head> <!--Comment-->
140 | 	<title>Shower</title>
141 | 	<meta charset="UTF-8">
142 | 	<link rel="stylesheet" href="s/screen.css">
143 | 	<script src="j/jquery.js"></script>
144 | </head>
145 |
146 |
147 |

148 | You Can
149 | Shout This Way 150 |

151 |
152 |

Typewriter etsy messenger bag fingerstache.

153 |
154 |
155 |
156 |

Linked Shout

157 |
158 |
159 |

Growing Shout

160 |
161 |
162 |

Shrinking Shout

163 |
164 |
165 | 166 |
167 |
168 | 169 |
170 |
171 | 172 |
173 |

Typewriter etsy messenger bag fingerstache.

174 |
175 |
176 |
177 | 178 |
179 |
180 | 181 |
182 |
183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 |
193 |
194 |

Timer

195 |

Three seconds to go.

196 |
197 |
198 |

List navigation

199 |
    200 |
  1. Ennui keffiyeh thundercats
    2. 201 | 202 | 203 | 204 | 205 |
206 |

Before they sold out master

207 |
208 |

Fork me on Github

209 | 213 |
214 | 215 | 216 | 217 | 218 | -------------------------------------------------------------------------------- /slides/shower/themes/ribbon/pictures/exact.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/slides/shower/themes/ribbon/pictures/exact.png -------------------------------------------------------------------------------- /slides/shower/themes/ribbon/pictures/square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/slides/shower/themes/ribbon/pictures/square.png -------------------------------------------------------------------------------- /slides/shower/themes/ribbon/pictures/tall.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/slides/shower/themes/ribbon/pictures/tall.png -------------------------------------------------------------------------------- /slides/shower/themes/ribbon/pictures/wide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginning-programming-content-kit/dae1fbbc51e5b485d55c8df901abe29243f4cb3c/slides/shower/themes/ribbon/pictures/wide.png -------------------------------------------------------------------------------- /slides/shower/themes/ribbon/styles/screen.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Ribbon theme for Shower HTML presentation engine 3 | * shower-ribbon v1.0.10, https://github.com/shower/ribbon 4 | * Copyright © 2010–2014 Vadim Makeev, http://pepelsbey.net 5 | * Licensed under MIT license: github.com/shower/shower/wiki/MIT-License 6 | */ 7 | @font-face{font-family:'PT Sans';src:url(../fonts/PTSans.woff) format('woff')}@font-face{font-weight:700;font-family:'PT Sans';src:url(../fonts/PTSans.Bold.woff) format('woff')}@font-face{font-style:italic;font-family:'PT Sans';src:url(../fonts/PTSans.Italic.woff) format('woff')}@font-face{font-style:italic;font-weight:700;font-family:'PT Sans';src:url(../fonts/PTSans.Bold.Italic.woff) format('woff')}@font-face{font-family:'PT Sans Narrow';font-weight:700;src:url(../fonts/PTSans.Narrow.Bold.woff) format('woff')}@font-face{font-family:'PT Mono';src:url(../fonts/PTMono.woff) format('woff')}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}body{counter-reset:slide;font:25px/2 'PT Sans',sans-serif}@media print{body{text-rendering:geometricPrecision}}a{color:#4B86C2;background:-webkit-linear-gradient(bottom,currentColor,currentColor .09em,transparent .09em,transparent)repeat-x;background:linear-gradient(to top,currentColor,currentColor .09em,transparent .09em,transparent)repeat-x;text-decoration:none}.caption{display:none;margin:0 0 50px;color:#3C3D40;text-shadow:0 1px 1px #8D8E90}.caption h1{font:700 50px/1 'PT Sans Narrow',sans-serif}.caption a{text-shadow:0 -1px 1px #1F3F60;background:0 0}.caption a:hover{color:#5e93c8}.badge{position:absolute;top:0;right:0;display:none;overflow:hidden;visibility:hidden;width:11em;height:11em;line-height:2.5;font-size:15px}.badge a{position:absolute;bottom:50%;right:-50%;left:-50%;visibility:visible;background:#4B86C2;box-shadow:0 0 1em rgba(0,0,0,.3);color:#FFF;text-decoration:none;text-align:center;-webkit-transform-origin:50% 100%;-ms-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transform:rotate(45deg)translateY(-1em);-ms-transform:rotate(45deg)translateY(-1em);transform:rotate(45deg)translateY(-1em)}.badge a:hover{background:#568ec6}.live-region{display:none}.slide{position:relative;width:1024px;height:640px;background:#FFF;color:#000;-webkit-print-color-adjust:exact;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none}@media print{.slide{page-break-before:always}}.slide:after{position:absolute;top:0;right:119px;padding:20px 0 0;width:50px;height:80px;background:url(../images/ribbon.svg) no-repeat;color:#FFF;counter-increment:slide;content:counter(slide);text-align:center;font-size:20px}.slide>div{position:absolute;top:0;left:0;overflow:hidden;padding:105px 120px 0;width:784px;height:535px}.slide h2{margin:0 0 37px;color:#666;font:700 50px/1 'PT Sans Narrow',sans-serif}.slide p{margin:0 0 50px}.slide p.note{color:#999}.slide b,.slide strong{font-weight:700}.slide i,.slide em{font-style:italic}.slide code,.slide kbd,.slide mark,.slide samp{padding:3px 8px;border-radius:8px;color:#000}.slide kbd,.slide code,.slide samp{background:rgba(0,0,0,.07);color:#000;line-height:1;font-family:'PT Mono',monospace}.slide mark{background:#FAFAA2}.slide sub,.slide sup{position:relative;line-height:0;font-size:75%}.slide sub{bottom:-.25em}.slide sup{top:-.5em}.slide blockquote{font-style:italic}.slide blockquote:before{position:absolute;margin:-16px 0 0 -80px;color:#CCC;font:200px/1 'PT Sans',sans-serif;content:'\201C'}.slide blockquote+figcaption{margin:-50px 0 50px;font-style:italic;font-weight:700}.slide ol,.slide ul{margin:0 0 50px;counter-reset:list}.slide ol li,.slide ul li{text-indent:-2em}.slide ol li:before,.slide ul li:before{display:inline-block;width:2em;color:#BBB;text-align:right}.slide ol ol,.slide ol ul,.slide ul ol,.slide ul ul{margin:0 0 0 2em}.slide ul>li:before{content:'\2022\00A0\00A0'}.slide ul>li:lang(ru):before{content:'\2014\00A0\00A0'}.slide ol>li:before{counter-increment:list;content:counter(list)'.\00A0'}.slide pre{margin:0 0 49px;padding:1px 0 0;counter-reset:code;white-space:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4}.slide pre code{display:block;padding:0;background:0 0;white-space:pre;line-height:2}.slide pre code:before{position:absolute;margin-left:-50px;color:#BBB;counter-increment:code;content:counter(code,decimal-leading-zero)'.'}.slide pre code:only-child:before{content:''}.slide pre mark.important{background:#C00;color:#FFF}.slide pre mark.comment{padding:0;background:0 0;color:#999}.slide table{margin:0 0 50px;width:100%;border-collapse:collapse;border-spacing:0}.slide table th,.slide table td{background:-webkit-linear-gradient(bottom,#BBB,#BBB .055em,transparent .055em,transparent)repeat-x;background:linear-gradient(to top,#BBB,#BBB .055em,transparent .055em,transparent)repeat-x}.slide table th{text-align:left;font-weight:700}.slide table.striped tr:nth-child(even){background:#EEE}.slide.cover,.slide.shout{z-index:1}.slide.cover:after,.slide.shout:after{visibility:hidden}.slide.cover{background:#000}.slide.cover img,.slide.cover svg,.slide.cover video,.slide.cover object,.slide.cover canvas,.slide.cover iframe{position:absolute;top:0;left:0;z-index:-1}.slide.cover.w img,.slide.cover.w svg,.slide.cover.w video,.slide.cover.w object,.slide.cover.w canvas,.slide.cover.w iframe{top:50%;width:100%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.slide.cover.h img,.slide.cover.h svg,.slide.cover.h video,.slide.cover.h object,.slide.cover.h canvas,.slide.cover.h iframe{left:50%;height:100%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.slide.cover.w.h img,.slide.cover.w.h svg,.slide.cover.w.h video,.slide.cover.w.h object,.slide.cover.w.h canvas,.slide.cover.w.h iframe{top:0;left:0;-webkit-transform:none;-ms-transform:none;transform:none}.slide.shout h2{position:absolute;top:50%;left:0;width:100%;text-align:center;line-height:1;font-size:150px;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.slide.shout h2 a{background:-webkit-linear-gradient(bottom,currentColor,currentColor .11em,transparent .11em,transparent)repeat-x;background:linear-gradient(to top,currentColor,currentColor .11em,transparent .11em,transparent)repeat-x}.slide .place{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.slide .place.t.l,.slide .place.t.r,.slide .place.b.r,.slide .place.b.l{-webkit-transform:none;-ms-transform:none;transform:none}.slide .place.t,.slide .place.b{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0)}.slide .place.l,.slide .place.r{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%)}.slide .place.t,.slide .place.t.l,.slide .place.t.r{top:0}.slide .place.r{right:0;left:auto}.slide .place.b,.slide .place.b.r,.slide .place.b.l{top:auto;bottom:0}.slide .place.l{left:0}.slide footer{position:absolute;left:0;right:0;bottom:-640px;z-index:1;display:none;padding:20px 120px 4px;background:#FAFAA2;box-shadow:0 0 0 2px #f0efac inset;-webkit-transition:bottom .3s;transition:bottom .3s}.slide footer p{margin:0 0 16px}.slide footer mark{background:rgba(255,255,255,.7)}.slide:hover footer{bottom:0}@media screen{.list{position:absolute;clip:rect(0,auto,auto,0);padding:80px 0 40px 100px;background:#585A5E url(../images/linen.png)}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.list{background-image:url(../images/linen@2x.png);background-size:256px}}.list .caption,.list .badge{display:block}.list .slide{float:left;margin:0 -412px -220px 0;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5)}@media (max-width:1324px){.list .slide{margin:0 -688px -400px 0;-webkit-transform:scale(.25);-ms-transform:scale(.25);transform:scale(.25)}}.list .slide:before{position:absolute;top:0;left:0;z-index:-1;width:512px;height:320px;box-shadow:0 0 30px rgba(0,0,0,.005),0 20px 50px rgba(42,43,45,.6);border-radius:2px;content:'';-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(2);-ms-transform:scale(2);transform:scale(2)}@media (max-width:1324px){.list .slide:before{width:256px;height:160px;-webkit-transform:scale(4);-ms-transform:scale(4);transform:scale(4)}}.list .slide:after{top:auto;right:auto;bottom:-80px;left:120px;padding:0;width:auto;height:auto;background:0 0;color:#3C3D40;text-shadow:0 1px 1px #8D8E90;font-weight:700;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(2);-ms-transform:scale(2);transform:scale(2)}@media (max-width:1324px){.list .slide:after{bottom:-104px;-webkit-transform:scale(4);-ms-transform:scale(4);transform:scale(4)}}.list .slide:hover:before{box-shadow:0 0 0 10px rgba(42,43,45,.3),0 20px 50px rgba(42,43,45,.6)}.list .slide:target:before{box-shadow:0 0 0 1px #376da3,0 0 0 10px #4B86C2,0 20px 50px rgba(42,43,45,.6)}@media (max-width:1324px){.list .slide:target:before{box-shadow:0 0 0 1px #376da3,0 0 0 10px #4B86C2,0 20px 50px rgba(42,43,45,.6)}}.list .slide:target:after{text-shadow:0 1px 1px rgba(42,43,45,.6);color:#4B86C2}.list .slide>div:before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;content:''}.list .slide.cover:after,.list .slide.shout:after{visibility:visible}.list .slide footer{display:block}.full{position:absolute;top:50%;left:50%;overflow:hidden;margin:-320px 0 0 -512px;width:1024px;height:640px;background:#000}.full.debug:after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background:url(../images/grid-16x10.svg) no-repeat;content:''}.full .live-region{position:absolute;clip:rect(0 0 0 0);overflow:hidden;margin:-1px;padding:0;width:1px;height:1px;border:none;display:block}.full .slide{position:absolute;top:0;left:0;margin-left:150%}.full .slide .next{visibility:hidden}.full .slide .next.active{visibility:visible}.full .slide:target{margin:0}.full .slide.shout.grow h2,.full .slide.shout.shrink h2{opacity:0;-webkit-transition:all .4s ease-out;transition:all .4s ease-out}.full .slide.shout.grow:target h2,.full .slide.shout.shrink:target h2{opacity:1;-webkit-transform:scale(1)translateY(-50%);-ms-transform:scale(1)translateY(-50%);transform:scale(1)translateY(-50%)}.full .slide.shout.grow h2{-webkit-transform:scale(.1)translateY(-50%);-ms-transform:scale(.1)translateY(-50%);transform:scale(.1)translateY(-50%)}.full .slide.shout.shrink h2{-webkit-transform:scale(10)translateY(-50%);-ms-transform:scale(10)translateY(-50%);transform:scale(10)translateY(-50%)}.full .progress{position:absolute;right:0;bottom:0;left:0;overflow:hidden;height:10px;z-index:1}.full .progress div{position:absolute;left:-20px;top:-10px;width:0;height:0;border:10px solid transparent;border-bottom-color:#4B86C2;-webkit-transition:width .2s linear;transition:width .2s linear}.full .progress div[style*='100%']{left:0}}@page{margin:0;size:1024px 640px} --------------------------------------------------------------------------------