userCentricResourcePack/index.html at master · auxfuse/userCentricResourcePack · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="apple-touch-icon" sizes="180x180" href="assets/favicons/apple-touch-icon.png" />
  <link rel="icon" type="image/png" sizes="32x32" href="assets/favicons/favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="assets/favicons/favicon-16x16.png" />
  <link rel="icon" type="image/x-icon" href="assets/favicons/favicon.ico" />
  <!-- Associated links for styles & frameworks -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
  <link rel="stylesheet" href="assets/css/style.min.css" type="text/css" />

  <title>User Centric Frontend Development Resource Pack</title>
</head>

<body>
  <div class="loader">Loading...</div>
  <main>
    <header>
      <!-- Nav -->
      <nav class="navbar navbar-expand-lg navbar-dark bg-custom fixed-top" id="navbar">
        <!-- Logo -->
        <a class="navbar-brand" href="index.html">
          <img class="image-fluid" src="assets/images/slackIcon.png" alt="slackIcon" title="Slack Logo" />
        </a>

        <!-- Toggler Icon on Mobile -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
          aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Navigation Links -->
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav ml-auto uppercase">
            <li class="nav-item">
              <a class="nav-link" href="#about">About<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#resources">Resources</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#tools">Tools</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#additional">Additional</a>
            </li>
          </ul>
        </div>
      </nav>
    </header>

    <section class="about" id="about">
      <div class="container">
        <div class="row">
          <div class="col-sm-12 col-lg-3 welcome-image">
            <img class="image-fluid mx-auto d-block" src="assets/images/bootstrapCode.jpg" alt="boostrap snip" />
          </div>
          <div class="col-sm-12 col-lg-9 welcome">
            <p class="welcome-text">
              Welcome to the Code Institute Full Stack Software Development
              Resource Pack! Like many of you, I am relatively new to the world
              of digital innovation, and through my time on Slack have come
              across some very useful Resources, Tools & Additional supports
              that have helped me in my journey to date.<br><br>
              My name is Anthony, former student lead for the User
              Centric Frontend Development module. While I was lead student I decided to create a "webspace"
              dedicated to these supplementary solutions available to me, and
              now to you!
            </p>
          </div>
        </div>
      </div>
    </section>
    <section class="resources" id="resources">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <h1 class="resource-header">
              <i class="fas fa-book"></i>Resources:
            </h1>
            <p class="resource-tooltip">
              Click on any of the below headers to be taken directly to the
              resource.
            </p>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <ul id="resources-list"></ul>
          </div>
        </div>
      </div>
    </section>

    <section class="tools" id="tools">
      <div class="container cards">
        <div class="row">
          <div class="col-12">
            <h1 class="tools-header"><i class="fas fa-tools"></i>Tools:</h1>
            <p class="tools-tooltip">
              Click on any of the below card headers to be taken directly to the
              tool!
            </p>
          </div>
        </div>
        <div class="row card-row" id="tools-list"></div>
      </div>
    </section>

    <section class="additional" id="additional">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <h1 class="additional-header">
              <i class="fas fa-code"></i>Additional:
            </h1>
            <p class="additional-tooltip">
              Supplementary info! Helpful tips, advice & quotes from Slack
              users.
            </p>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <p class="additional-text">
              A topic that comes up frequently in the channels is "What Editor can we use?".
              The Code Institute IDE of choice recently changed from Cloud9 to GitPod, because Cloud9 was bought by
              AWS and they made some changes to it that proved unpopular and often unusable for students.
              Most of the CI videos for the course were made using Cloud9, but will be updated to GitPod over time.
              <br>
              As you can choose to work in any IDE that you wish on this course. I have compiled
              a short list detailing some of the IDE's I've seen people talk about using in the Slack App:
            </p>
          </div>
        </div>
        <div class="row">
          <ul id="additional-list"></ul>
        </div>
      </div>
      <div class="container additional-cards d-none d-sm-none d-md-block">
        <h4 class="quotes-header">
          <i class="fas fa-comment"></i>Quotes from the Community
        </h4>
        <div class="row" id="quotes-list"></div>
      </div>
    </section>

    <footer>
      <span class="footer-text text-center my-auto">Created by <a href="https://github.com/auxfuse" target="_blank">Anthony O' Brien</a>, Student lead for UCFD July/August 2019</span><br />
      <span class="text-center my-auto contributors">Other contributors: <a href="https://github.com/Eventyret" target="_blank">Simen Daehlin</a> & <a href="https://github.com/ajgreaves" target="_blank">Anna Greaves</a> </span><br>
      <span class="copyright text-center my-auto pb-4">For educational purposes Code Institute &copy;</span>
    </footer>
  </main>
  <!-- JQuery for Navbar expansion/collapse & Modal popup -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <script src="assets/js/main.js"></script>
</body>

</html>