csci422.github.io/index.html at main · CSCI422/csci422.github.io · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSCI422</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"/>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
  </head>
  <body>
    <!-- TODO shapes and scribbles on the sides of the website -->

    <div class="hero px-4 text-center">
      <h1 style="font-size: 70px;">UI/UX @ Mines</h1>
      <h1>User Interfaces and User Experience</h1>
    </div>

    <div class="secondary-light padding">
      <div class="container-content">
        <h2 class="pb-4">Schedule</h2>
        <iframe style="width: 100%; height: 500px;" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQC81MC1UIEzAoRsEakZ-E2mBzvfDVP5qgd8lbDrKAfqVFR02Nz-MHNpmh4Zbm8v3lre_5GAGc4bSoB/pubhtml?gid=0&amp;single=true&amp;widget=true&amp;headers=false"></iframe>
      </div>
    </div>

    <div class="padding">
      <div class="container-content">
        <h2>Course Information</h2>

        <p>
          This course talks about the design of digital interfaces, with key concepts such as <strong>responsiveness, accessibility,</strong> and <strong>user-centered design</strong>.
          Students will learn how to <strong>create design mockups in Figma</strong>, <strong>test designs</strong> with users, apply effective UI and UX focused feedback, communicate effectively with stakeholders and users, and more. Students will be taught the basics of HTML, CSS, and JavaScript, but extensive prior programming experience is not expected or required.
        </p>
        <div class="row pt-4 pb-4">
          <div class="col-sm">
            <div>
              <p><strong>Dr. Rob Thompson</strong> is the lead instructor
              for this course and teaches a sister course, Human-Computer Interaction
              (HCI) every spring. Rob also often teaches CSCI128 and CSCI306.</p>
            </div>
          </div>
          <div class="col-sm">
            <div>
              <p><strong>Ethan Richards</strong> is a masters student in Computer Science
              and was the original designer and now TA-lecturer for the course. </p>
            </div>
          </div>
        </div>
        <p>View the course syllabus <a href="https://docs.google.com/document/d/1G8SGbrStoDeYaM8iFLethSoh-ccqiHgjP598MPjkG2Y/edit?usp=sharing">here</a>.</p>
      </div>
    </div>

    <div class="secondary-light padding">
      <div class="container-content">
        <h2>Resources</h2>
        <div class="row">
          <div class="col-sm">
            <p>Figma</p>
            <p><a href="https://www.figma.com/education/">Figma Education account</a></p>
            <p><a href="https://www.youtube.com/watch?v=HZuk6Wkx_Eg">Figma Web Tutorial</a></p>
            <p><a href="https://www.youtube.com/watch?v=FTFaQWZBqQ8">Figma Mobile Tutorial</a></p>
            <p><a href="https://www.youtube.com/watch?v=1pW_sk-2y40">Figma In 7 Minutes</a></p>
          </div>
          <div class="col-sm">
            <p>Programming</p>
            <p><a href="https://github.com/signup">GitHub account</a></p>
            <p><a href="https://developer.mozilla.org/en-US/">MDN (all things web)</a></p>
            <p><a href="https://www.w3schools.com/Html/">W3Schools HTML</a></p>
            <p><a href="https://www.w3schools.com/css/">W3Schools CSS</a></p>
          </div>
        </div>
      </div>
    </div>

    <div class="padding text-center footer">
        <p>CS@Mines &bull; 2025</p>
        <p>Made by <a href="https://github.com/ezrichards">ezrichards</a> &bull; <a href="https://github.com/CSCI422/csci422.github.io">GitHub</a></p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>