gdi-html-css/css-grid-basics/intro.html at main · girldevelopit/gdi-html-css · 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta
      name="description"
      content="Girl Develop It framework for easily creating beautiful presentations using HTML in GDI theme. Based on Hakim El Hattab's reveal.js" />
    <meta
      name="author"
      content="Girl Develop It" />
    <meta
      name="apple-mobile-web-app-capable"
      content="yes" />
    <meta
      name="apple-mobile-web-app-status-bar-style"
      content="black-translucent" />

    <!-- Update with GDI Course Name -->
    <title>CSS Grid Basics - Introductions</title>

    <link
      rel="icon"
      type="image/x-icon"
      href="../shared-assets/imgs/favicon.ico" />

    <!-- RevealJS CDN -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/reveal.js@4.1.0/dist/reset.css" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/reveal.js@4.1.0/dist/reveal.css" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/reveal.js@4.1.0/dist/theme/simple.css"
      id="theme" />

    <!-- GDI Custom Theme -->
    <link
      rel="stylesheet"
      href="../shared-assets/css/gdi-theme.css" />

    <!-- Theme used for syntax highlighted code -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/styles/monokai.min.css" />

    <!-- Course Custom Styles if Applicable-->
    <link
      rel="stylesheet"
      href="./css/style.css" />
  </head>
  <body>
    <div class="reveal">
      <!-- Start of Slides container -->
      <!-- Any section element in this container is displayed as a single slide -->
      <!-- Comment out rather than delete slide instructions -->
      <div class="slides">
        <!-- Opening Slide -->
        <section>
          <img
            src="../shared-assets/imgs/gdi-logos/gdi-circle-logo_peach.png"
            alt="GDI Logo"
            width="400px"
            class="noborder" />
          <br />
          <h2 style="font-weight: bolder">Welcome to Girl Develop It</h2>
        </section>

        <!-- Course Title -->
        <section>
          <h2>CSS Grid Basics</h2>
        </section>

        <!-- Instructor Intro -->
        <section>
          <h3>Tinuola Awopetu</h3>
          <h4>Frontend Developer</h4>
        </section>

        <!-- OPTIONAL: TA Intro -->
        <section>
          <h3>Anne Katzeff</h3>
          <h4>Web Designer, Artist, Entrepreneur</h4>
        </section>

        <!-- Student Intros; IceBreakers, etc. -->
        <section>
          <h3>Favorite Pet Breed?</h3>
          <img
            src="./images/cat-and-dog-kevin-turcios-unsplash.jpg"
            width="400px"
            alt="Gray cat with a paw on the face of a brown pit bull" />
          <div>
            <small
              >Image Credit:
              <a
                href="https://unsplash.com/@kevin_turcios"
                target="_blank"
                >Kevin Turcios (Unsplash)</a
              ></small
            >
          </div>
        </section>

        <!-- Before we start... -->
        <section>
          <h3>Before we start...</h3>
          <ul>
            <li>Display your preferred name and/or pronoun</li>
            <li>Participate and experiment (This is CSS!)</li>
            <li>Every question is important</li>
            <li>Have fun!</li>
          </ul>
        </section>

        <!-- Course Goals -->
        <section data-background="./images/daniel-mccullough-unsplash.jpg">
          <div class="data-bground-contrast">
            <h3>Course Goals</h3>
            <ul class="fs-28">
              <li>Get comfortable exploring and using CSS Grid</li>
              <li>Gain a new powerful tool to build unique layouts</li>
              <li>
                Learn to develop more creative or easier approaches to solve layout
                challenges
              </li>
            </ul>
          </div>
        </section>

        <!-- Course Agenda / Course Topics / Course Outline -->
        <section data-background="./images/daniel-mccullough-unsplash.jpg">
          <div class="data-bground-contrast">
            <h3>Course Outline</h3>
            <ul class="fs-28">
              <li>Introduction to CSS Grid</li>
              <li>Learn and work with CSS Grid Syntax</li>
              <li>Understand when to Flex and when to Grid</li>
              <li>Explore Common Layout Solutions with CSS Grid</li>
              <li>Demos and Practice!</li>
              <li>Build a final project</li>
            </ul>
            <div class="mt-32">
              <small
                >Photo credit:
                <a
                  href="https://unsplash.com/@d_mccullough"
                  target="_blank"
                  >Daniel McCullough (Unsplash)</a
                ></small
              >
            </div>
          </div>
        </section>

        <!-- Self Assessment -->
        <section data-background="./images/william-warby-unsplash.jpg">
          <h2 class="data-bground-contrast">Self Assessment</h2>
          <div class="mt-32">
            <small class="photo-label--white"
              >Photo credit:
              <a
                href="https://unsplash.com/@wwarby"
                target="_blank"
                >William Warby (Unsplash)</a
              ></small
            >
          </div>
        </section>

        <!-- Question 1 -->
        <section>
          <h4>What's your experience with CSS Flexbox?</h4>
          <ol>
            <li>Minimal to no experience</li>
            <li>Use it, but don't always understand its behavior</li>
            <li>Comfortable with it, but could learn more</li>
            <li>I'm a Flexbox Ninja! 🥷</li>
          </ol>
        </section>

        <!-- Question 2 -->
        <section>
          <h4>What's your experience with CSS Grid?</h4>
          <ol>
            <li>Heard of it, but have yet to learn about or use it</li>
            <li>Have basic knowledge but it's still fairly new to me</li>
            <li>Use it freqently, but would like more practice</li>
            <li>I'm a CSS Grid Guru! 🔥</li>
          </ol>
        </section>
      </div>
      <!-- End of Slides container -->
      <!---->
      <!---->
      <!-- Update Footer with Course Name -->
      <footer>
        <div class="copyright">
          <img
            src="../shared-assets/imgs/gdi-logos/gdi-logo_peach.png"
            alt="GDI Logo"
            width="40px"
            class="noborder" />
          <p>CSS Grid Basics</p>
          <a
            rel="license"
            href="http://creativecommons.org/licenses/by-nc/3.0/deed.en_US"
            ><img
              alt="Creative Commons License"
              style="border-width: 0"
              src="http://i.creativecommons.org/l/by-nc/3.0/80x15.png"
          /></a>
        </div>
      </footer>
    </div>
    <!-- End of Reveal wrapper -->
    <!---->
    <!---->
    <!-- RevealJS Scripts & Config - Do Not Edit or Delete -->
    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4.1.0/dist/reveal.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4.1.0/plugin/highlight/highlight.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/highlightjs-badge@0.1.9/highlightjs-badge.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.15.5/js/jsplumb.min.js"></script>
    <script src="../shared-assets/js/revealConfig.js"></script>
  </body>
</html>