Adds HTML/CSS for AI & ML class page (#465)

* Minor changes to basic.scss to match figma style guide * Adds skeleton HTML/CSS for ai-ml lesson page * Adds some CSS fixes * Implements feedback * Fixes margins and adds link in website * jekyll connection
uclaacm · Nov 14, 2023 · d4485c4 · d4485c4
1 parent 626ad10
commit d4485c4
Show file tree

Hide file tree

Showing 6 changed files with 345 additions and 4 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -5,7 +5,7 @@
   <title>{% if page.title %}{{ page.title}} | {{site.title}}{% else %}{{ site.title | escape }}{% endif %}</title>
   <link rel="icon" href="{{site.baseurl}}/img/teachLA_logo_light.png" />
   <link rel="stylesheet" href="{{ "/css/main.css" | relative_url }}" />
-  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:wght@400;600;700&family=Source+Code+Pro:wght@400;500;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:wght@200;400;500;600;700&family=Source+Code+Pro:wght@400;500;700&display=swap" rel="stylesheet">
   <script defer src="https://use.fontawesome.com/releases/v5.14.0/js/solid.js" integrity="sha384-4RG3cEPIlCBy6VNzxM9ZoEwZW+65ed5JDOfaJAnQqwV6ha/jZDJTXjFmvjFM4bk4" crossorigin="anonymous"></script>
   <script defer src="https://use.fontawesome.com/releases/v5.14.0/js/brands.js" integrity="sha384-V7gsTxvUZaeC6NAsCa24o3WvPOXwSsUM8/SBgy+fxlzWL3xEGXHsAv2E3UO5zKcZ" crossorigin="anonymous"></script>
   <script defer src="https://use.fontawesome.com/releases/v5.14.0/js/fontawesome.js" integrity="sha384-DNo9bmYZCHLtp0n0l0XA2UsoRHX1nx38aRP+p9yoP5A8kVTfeWG3aySMOq5FD/v3" crossorigin="anonymous"></script>

diff --git a/_sass/_ailessons.scss b/_sass/_ailessons.scss
@@ -0,0 +1,182 @@
+label {
+  font-size: 20px;
+  font-weight: 200;
+}
+
+.image-title {
+  display: flex;
+  align-items: end;
+  gap: 1.5rem;
+  img {
+    height: 10rem;
+  }
+  div {
+    display: flex;
+    flex-direction: column;
+
+    height: 100%;
+    h1 {
+      margin: 0;
+    }
+  }
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+    align-items: start;
+  }
+}
+
+.lesson-contact {
+  display: grid;
+  grid-gap: 1rem;
+  width: 100%;
+
+  h3 {
+    font-size: 24px;
+    font-weight: 600px;
+    margin-bottom: 0;
+    text-decoration: $teachla-green underline;
+    text-decoration-thickness: 0.3rem;
+    text-underline-offset: 7px;
+  }
+
+  p {
+    margin-top: 10px;
+  }
+
+  @media (min-width: 768px) {
+    /* For tablets and above */
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: 1fr;
+  }
+
+  @media (max-width: 767px) {
+    /* For tablets and below */
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(3, 1fr);
+  }
+}
+
+.rounded-green-border {
+  border: 1px solid $teachla-green;
+  border-radius: 2rem;
+  padding: 1rem;
+}
+
+.spacedlist {
+  li {
+    margin: 10px 0;
+  }
+}
+
+.two-by-two {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+  grid-gap: 20px;
+
+  @media (min-width: 768px) {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+  }
+
+  div {
+    h3 {
+      color: $teachla-green;
+    }
+  }
+}
+
+.lesson-w-chip {
+  width: 100%;
+  padding: 1.5rem;
+  height: 100%; 
+
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+
+  -webkit-box-shadow: 0px 0px 10px 5px rgba(158, 158, 158, 0.3);
+  -moz-box-shadow: 0px 0px 10px 5px rgba(158, 158, 158, 0.3);
+  box-shadow: 0px 0px 10px 5px rgba(158, 158, 158, 0.3);
+  border-radius: 0.5rem;
+
+  h3 {
+    padding: 0;
+    margin: 0;
+  }
+
+  p {
+    padding: 0;
+    margin: 0;
+  }
+}
+
+.green-chips {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    div {
+      background-color: #016d3a;
+      color: white;
+      border-radius: 25px;
+      padding: 5px 15px 5px 15px;
+      width: fit-content;
+
+      font-size: 14px;
+    }
+}
+
+.lesson-triple-col {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
+  grid-gap: 40px; /* Adjust the gap as needed */
+  max-width: fit-content;
+
+  @media (min-width: 1000px) {
+    /* For tablets and above */
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  @media (max-width: 1000px) {
+    /* For tablets and below */
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (max-width: 600px) {
+    /* For mobile and below */
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
+.center {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.page {
+  margin-top: 5rem;
+  margin: 3rem;
+
+  display: flex;
+  justify-content: center;
+
+  @media (max-width: 767px) {
+    margin: 1rem;
+    margin-top: 3rem; 
+    gap: 1rem; 
+  }
+}
+
+.content {
+  max-width: 900px;
+  display: flex;
+  flex-direction: column;
+  gap: 4rem; 
+}
+
+.reset {
+  padding: 0;
+  margin: 0;
+}
diff --git a/_sass/_basic.scss b/_sass/_basic.scss
@@ -30,12 +30,33 @@
     }
 }
 
-h1,h2,h3,h4,h5,h6 {
+h1,h2,h3,h4,h5,h6 { 
     font-family: $font-header;
 }
 
+h1 {
+    font-weight: 600; 
+    font-size: 64px;
+}
+
+h2 {
+    font-weight: 600; 
+    font-size: 32px; 
+}
+
+h3 {
+    font-weight: 500; 
+    font-size: 18px; 
+}
+
 p {
-    line-height: 1.25;
+    line-height: 1.5;
+    font-weight: 400; 
+}
+
+label {
+    font-size: 12px; 
+    font-weight: 400; 
 }
 
 ul > li {

diff --git a/ai_ml_lesson.html b/ai_ml_lesson.html
@@ -0,0 +1,137 @@
+---
+layout: default
+title: "Placeholder Lesson"
+permalink: "/classes/ml"
+---
+
+<div class="page">
+  <div class="content">
+
+    <div class="image-title">
+  <img
+    class="responsive-img"
+    src="{{site.baseurl}}/img/undraw/dev-and-teacher.svg"
+    alt="teacher standing in front of backboard and developer coding on laptop"
+  />
+  <div>
+    <label>introduction to</label>
+    <h1>AI & ML</h1>
+  </div>
+</div>
+
+<div>
+  <p>
+    We present a year-long, modern machine learning class led by UCLA students!
+    Students will discover and explore the computational and mathematical tools
+    behind artificial intelligence and machine learning! In a single year, they
+    will advance from understanding simple AI models that predict weather to
+    analyzing the complex AI systems that power self-driving cars.
+
+ </br></br>
+    Throughout the year, students will have numerous opportunities to learn and code with
+    Python. Python is one of the most popular programming languages in use
+    today, with wide-ranging applications in data processing, web development,
+    and machine learning. Last year, our students used Python to train AI models
+    that predict stock market prices, guess the popularity of a song on Spotify,
+    and detect handwritten digits. 
+  </br></br>
+    Learning machine learning does not occur in a
+    vacuum! We encourage our students to think critically about the applications
+    and ethics of AI. In the past, we’ve brainstormed which types of AI are
+    best-suited to tackle facial recognition and estimate house prices.
+    Furthermore, we’ve held in-depth discussions on the ethics of AI-powered
+    self-driving cars and what it actually means for AI to be racist.
+  </p>
+</div>
+
+<div class="lesson-contact">
+  <div>
+    <h3>School Location</h3>
+    <p>enter school location</p>
+  </div>
+  <div>
+    <h3>Have questions?</h3>
+    <p>Contact out curriculum lead!</p>
+  </div>
+  <div>
+    <h3>Ava Asmani</h3>
+    <p>[email protected]</p>
+  </div>
+</div>
+
+<div>
+  <h2>Learning goals</h2>
+  <div class="rounded-green-border">
+    <ul class="spacedlist">
+      <li>Understand what AI and ML are, and their differences</li>
+      <li>Learn about deep learning and its applications</li>
+      <li>Differentiate between classification and regression</li>
+      <li>
+        Use Python and related libraries in Google Colab to manipulate data
+      </li>
+      <li>Learn and apply linear regression to real-world datasets</li>
+      <li>Understand the intuition behind gradient descent</li>
+      <li>Learn and apply logistic regression to real-world datasets</li>
+      <li>
+        Understand probability, Bayes' Theorem, and binary cross-entropy loss at
+        a conceptual level
+      </li>
+      <li>Walk through the building blocks of a neural network</li>
+      <li>
+        Understand the challenges behind optimization and the applications of
+        regularization
+      </li>
+      <li>Conceptually grasp and implement convolutional neural networks</li>
+      <li>Explore the ethics behind applications of AI and ML</li>
+    </ul>
+  </div>
+</div>
+
+<div>
+  <h2>Lessons</h2>
+  <div class="center">
+    <div class="lesson-triple-col">
+      {% for lesson in site.aiml %}
+      <div class="lesson-w-chip">
+        <h3>{{lesson.title}}</h3>
+        {% if lesson.excerpt %}
+          {{lesson.excerpt}}
+        {% endif %}
+        <div class="green-chips">
+          {% if lesson.slides_link %}
+          <div href="{{lesson.slides_link}}">slides</div>
+          {% endif %}
+          {% if lesson.homework_link %}
+          <div href="{{lesson.homework_link}}">worksheet</div>
+          {% endif %}
+          {% if lesson.colab_link %}
+          <div href="{{lesson.colab_link}}">colab</div>
+          {% endif %}
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+</div>
+
+<div>
+  <div>
+    <h1 class="reset">More resources</h1>
+    <p>These are our favorite AI/ML resources - they're all awesome!</p>
+  </div>
+  <div class="two-by-two">
+    {% for subcategory in site.data.curriculum_resources.aiml %}
+    <div>
+      <h3>{{subcategory.title}}</h3>
+      <ul>
+        {% for item in subcategory.items %}
+        <li>{{item.name}}</li>
+        {% endfor %}
+      </ul>
+    </div>
+      {% endfor %}
+    </div>
+  </div>
+</div>
+  </div>
+</div>
diff --git a/classes/aiml.html b/classes/aiml.html
@@ -1,7 +1,7 @@
 ---
 layout: default
 title: "Introduction to AI & ML"
-permalink: /classes/ml
+permalink: /old/classes/ml
 fw: true
 ---
 <div class="page-container">

diff --git a/css/main.scss b/css/main.scss
@@ -26,3 +26,4 @@
 @import "py1";
 @import "aiml";
 @import "rnative";
+@import "ailessons.scss"