From d4485c4524b78cc69bbb1d444348cdc81ec8cd09 Mon Sep 17 00:00:00 2001 From: vickyz223 <84080001+vickyz223@users.noreply.github.com> Date: Tue, 14 Nov 2023 10:29:56 -0800 Subject: [PATCH] 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 --- _includes/head.html | 2 +- _sass/_ailessons.scss | 182 ++++++++++++++++++++++++++++++++++++++++++ _sass/_basic.scss | 25 +++++- ai_ml_lesson.html | 137 +++++++++++++++++++++++++++++++ classes/aiml.html | 2 +- css/main.scss | 1 + 6 files changed, 345 insertions(+), 4 deletions(-) create mode 100644 _sass/_ailessons.scss create mode 100644 ai_ml_lesson.html diff --git a/_includes/head.html b/_includes/head.html index d0984aaa..19d7efb6 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -5,7 +5,7 @@ {% if page.title %}{{ page.title}} | {{site.title}}{% else %}{{ site.title | escape }}{% endif %} - + diff --git a/_sass/_ailessons.scss b/_sass/_ailessons.scss new file mode 100644 index 00000000..3da43b02 --- /dev/null +++ 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 index 24809016..1c5a4ee8 100644 --- 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 new file mode 100644 index 00000000..0e943079 --- /dev/null +++ b/ai_ml_lesson.html @@ -0,0 +1,137 @@ +--- +layout: default +title: "Placeholder Lesson" +permalink: "/classes/ml" +--- + +
+
+ +
+ teacher standing in front of backboard and developer coding on laptop +
+ +

AI & ML

+
+
+ +
+

+ 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. + +

+ 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. +

+ 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. +

+
+ +
+
+

School Location

+

enter school location

+
+
+

Have questions?

+

Contact out curriculum lead!

+
+
+

Ava Asmani

+

ava.asmani@gmail.com

+
+
+ +
+

Learning goals

+
+
    +
  • Understand what AI and ML are, and their differences
    • +
  • Learn about deep learning and its applications
    • +
  • Differentiate between classification and regression
    • +
  • + Use Python and related libraries in Google Colab to manipulate data +
    • +
  • Learn and apply linear regression to real-world datasets
    • +
  • Understand the intuition behind gradient descent
    • +
  • Learn and apply logistic regression to real-world datasets
    • +
  • + Understand probability, Bayes' Theorem, and binary cross-entropy loss at + a conceptual level +
    • +
  • Walk through the building blocks of a neural network
    • +
  • + Understand the challenges behind optimization and the applications of + regularization +
    • +
  • Conceptually grasp and implement convolutional neural networks
    • +
  • Explore the ethics behind applications of AI and ML
    • +
+
+
+ +
+

Lessons

+
+
+ {% for lesson in site.aiml %} +
+

{{lesson.title}}

+ {% if lesson.excerpt %} + {{lesson.excerpt}} + {% endif %} +
+ {% if lesson.slides_link %} +
slides
+ {% endif %} + {% if lesson.homework_link %} +
worksheet
+ {% endif %} + {% if lesson.colab_link %} +
colab
+ {% endif %} +
+
+ {% endfor %} +
+
+
+ +
+
+

More resources

+

These are our favorite AI/ML resources - they're all awesome!

+
+
+ {% for subcategory in site.data.curriculum_resources.aiml %} +
+

{{subcategory.title}}

+
    + {% for item in subcategory.items %} +
  • {{item.name}}
    • + {% endfor %} +
+
+ {% endfor %} +
+
+
+
+ \ No newline at end of file diff --git a/classes/aiml.html b/classes/aiml.html index 2a5f7923..c79cb80a 100644 --- 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 ---
diff --git a/css/main.scss b/css/main.scss index 9e49a86d..d17958c6 100644 --- a/css/main.scss +++ b/css/main.scss @@ -26,3 +26,4 @@ @import "py1"; @import "aiml"; @import "rnative"; +@import "ailessons.scss"