tools/site/codelabs/how-to-write-a-codelab/index.html at 8a7f8d5c483842a91f207c1ac5b414cd9f335182 · googlecodelabs/tools · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

<!doctype html>

<html>
<head>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <meta name="theme-color" content="#4F7DC9">
  <meta charset="UTF-8">
  <title>How to Write a Codelab</title>
  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Code+Pro:400|Roboto:400,300,400italic,500,700|Roboto+Mono">
  <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://storage.googleapis.com/claat-public/codelab-elements.css">
  <style>
    .success {
      color: #1e8e3e;
    }
    .error {
      color: red;
    }
  </style>
</head>
<body>
  <google-codelab-analytics gaid="UA-49880327-14" ga4id=""></google-codelab-analytics>
  <google-codelab codelab-gaid=""
                  codelab-ga4id=""
                  id="how-to-write-a-codelab"
                  title="How to Write a Codelab"
                  environment="web"
                  feedback-link="https://zarin.io">

      <google-codelab-step label="Overview" duration="1">
        <h2 class="checklist" is-upgraded>What You&#39;ll Learn</h2>
<ul class="checklist">
<li>how to set the amount of time each slide will take to finish</li>
<li>how to include code snippets</li>
<li>how to hyperlink items</li>
<li>how to include images</li>
<li>other stuff</li>
</ul>


      </google-codelab-step>

      <google-codelab-step label="Setting Duration" duration="2">
        <p>To indicate how long each slide will take to go through, set the <code>Duration</code> under each Heading 2 (i.e. <code>##</code>) to an integer. The integers refer to minutes. If you set <code>Duration: 4</code> then a particular slide will take 4 minutes to complete.</p>
<p>The total time will automatically be calculated for you and will be displayed on the codelab once you create it.</p>


      </google-codelab-step>

      <google-codelab-step label="Code Snippets" duration="3">
        <p>To include code snippets you can do a few things.</p>
<ul>
<li>Inline highlighting can be done using the tiny tick mark on your keyboard: &#34;`&#34;</li>
<li>Embedded code</li>
</ul>
<h2 is-upgraded>JavaScript</h2>
<pre><code language="language-javascript" class="language-javascript">{
  key1: &#34;string&#34;,
  key2: integer,
  key3: &#34;string&#34;
}
</code></pre>
<h2 is-upgraded>Java</h2>
<pre><code language="language-java" class="language-java">for (statement 1; statement 2; statement 3) {
  // code block to be executed
}
</code></pre>


      </google-codelab-step>

      <google-codelab-step label="Hyperlinking and Embedded Images" duration="0">
        <h2 is-upgraded>Hyperlinking</h2>
<p><a href="https://www.youtube.com/user/iamhalsey/playlists" target="_blank">Youtube - Halsey Playlists</a></p>
<h2 is-upgraded>Images</h2>
<p class="image-container"><img alt="alt-text-here" src="img/7d7408824e1ed9e.jpg"></p>


      </google-codelab-step>

      <google-codelab-step label="Other Stuff" duration="1">
        <p>Checkout the official documentation here: <a href="https://github.com/googlecodelabs/tools/blob/master/FORMAT-GUIDE.md" target="_blank">Codelab Formatting Guide</a></p>


      </google-codelab-step>

  </google-codelab>

  <script src="https://storage.googleapis.com/claat-public/native-shim.js"></script>
  <script src="https://storage.googleapis.com/claat-public/custom-elements.min.js"></script>
  <script src="https://storage.googleapis.com/claat-public/prettify.js"></script>
  <script src="https://storage.googleapis.com/claat-public/codelab-elements.js"></script>
  <script src="//support.google.com/inapp/api.js"></script>

</body>
</html>