Skip to content

Commit d4485c4

Browse files
vickyz223vickyz223
authored
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
1 parent 626ad10 commit d4485c4

File tree

6 files changed

+345
-4
lines changed

6 files changed

+345
-4
lines changed

‎_includes/head.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<title>{% if page.title %}{{ page.title}} | {{site.title}}{% else %}{{ site.title | escape }}{% endif %}</title>
66
<link rel="icon" href="{{site.baseurl}}/img/teachLA_logo_light.png" />
77
<link rel="stylesheet" href="{{ "/css/main.css" | relative_url }}" />
8-
<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">
8+
<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">
99
<script defer src="https://use.fontawesome.com/releases/v5.14.0/js/solid.js" integrity="sha384-4RG3cEPIlCBy6VNzxM9ZoEwZW+65ed5JDOfaJAnQqwV6ha/jZDJTXjFmvjFM4bk4" crossorigin="anonymous"></script>
1010
<script defer src="https://use.fontawesome.com/releases/v5.14.0/js/brands.js" integrity="sha384-V7gsTxvUZaeC6NAsCa24o3WvPOXwSsUM8/SBgy+fxlzWL3xEGXHsAv2E3UO5zKcZ" crossorigin="anonymous"></script>
1111
<script defer src="https://use.fontawesome.com/releases/v5.14.0/js/fontawesome.js" integrity="sha384-DNo9bmYZCHLtp0n0l0XA2UsoRHX1nx38aRP+p9yoP5A8kVTfeWG3aySMOq5FD/v3" crossorigin="anonymous"></script>

‎_sass/_ailessons.scss‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
label {
2+
font-size: 20px;
3+
font-weight: 200;
4+
}
5+
6+
.image-title {
7+
display: flex;
8+
align-items: end;
9+
gap: 1.5rem;
10+
img {
11+
height: 10rem;
12+
}
13+
div {
14+
display: flex;
15+
flex-direction: column;
16+
17+
height: 100%;
18+
h1 {
19+
margin: 0;
20+
}
21+
}
22+
23+
@media (max-width: 600px) {
24+
flex-direction: column;
25+
align-items: start;
26+
}
27+
}
28+
29+
.lesson-contact {
30+
display: grid;
31+
grid-gap: 1rem;
32+
width: 100%;
33+
34+
h3 {
35+
font-size: 24px;
36+
font-weight: 600px;
37+
margin-bottom: 0;
38+
text-decoration: $teachla-green underline;
39+
text-decoration-thickness: 0.3rem;
40+
text-underline-offset: 7px;
41+
}
42+
43+
p {
44+
margin-top: 10px;
45+
}
46+
47+
@media (min-width: 768px) {
48+
/* For tablets and above */
49+
grid-template-columns: repeat(3, 1fr);
50+
grid-template-rows: 1fr;
51+
}
52+
53+
@media (max-width: 767px) {
54+
/* For tablets and below */
55+
grid-template-columns: 1fr;
56+
grid-template-rows: repeat(3, 1fr);
57+
}
58+
}
59+
60+
.rounded-green-border {
61+
border: 1px solid $teachla-green;
62+
border-radius: 2rem;
63+
padding: 1rem;
64+
}
65+
66+
.spacedlist {
67+
li {
68+
margin: 10px 0;
69+
}
70+
}
71+
72+
.two-by-two {
73+
display: grid;
74+
grid-template-columns: repeat(2, minmax(0, 1fr));
75+
grid-template-rows: repeat(2, minmax(0, 1fr));
76+
grid-gap: 20px;
77+
78+
@media (min-width: 768px) {
79+
grid-template-columns: repeat(2, 1fr);
80+
grid-template-rows: repeat(2, 1fr);
81+
}
82+
83+
div {
84+
h3 {
85+
color: $teachla-green;
86+
}
87+
}
88+
}
89+
90+
.lesson-w-chip {
91+
width: 100%;
92+
padding: 1.5rem;
93+
height: 100%;
94+
95+
display: flex;
96+
flex-direction: column;
97+
gap: 2rem;
98+
99+
-webkit-box-shadow: 0px 0px 10px 5px rgba(158, 158, 158, 0.3);
100+
-moz-box-shadow: 0px 0px 10px 5px rgba(158, 158, 158, 0.3);
101+
box-shadow: 0px 0px 10px 5px rgba(158, 158, 158, 0.3);
102+
border-radius: 0.5rem;
103+
104+
h3 {
105+
padding: 0;
106+
margin: 0;
107+
}
108+
109+
p {
110+
padding: 0;
111+
margin: 0;
112+
}
113+
}
114+
115+
.green-chips {
116+
display: flex;
117+
gap: 0.5rem;
118+
flex-wrap: wrap;
119+
div {
120+
background-color: #016d3a;
121+
color: white;
122+
border-radius: 25px;
123+
padding: 5px 15px 5px 15px;
124+
width: fit-content;
125+
126+
font-size: 14px;
127+
}
128+
}
129+
130+
.lesson-triple-col {
131+
display: grid;
132+
grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
133+
grid-gap: 40px; /* Adjust the gap as needed */
134+
max-width: fit-content;
135+
136+
@media (min-width: 1000px) {
137+
/* For tablets and above */
138+
grid-template-columns: repeat(3, 1fr);
139+
}
140+
141+
@media (max-width: 1000px) {
142+
/* For tablets and below */
143+
grid-template-columns: repeat(2, 1fr);
144+
}
145+
146+
@media (max-width: 600px) {
147+
/* For mobile and below */
148+
grid-template-columns: repeat(1, 1fr);
149+
}
150+
}
151+
152+
.center {
153+
width: 100%;
154+
display: flex;
155+
justify-content: center;
156+
}
157+
158+
.page {
159+
margin-top: 5rem;
160+
margin: 3rem;
161+
162+
display: flex;
163+
justify-content: center;
164+
165+
@media (max-width: 767px) {
166+
margin: 1rem;
167+
margin-top: 3rem;
168+
gap: 1rem;
169+
}
170+
}
171+
172+
.content {
173+
max-width: 900px;
174+
display: flex;
175+
flex-direction: column;
176+
gap: 4rem;
177+
}
178+
179+
.reset {
180+
padding: 0;
181+
margin: 0;
182+
}

‎_sass/_basic.scss‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,33 @@
3030
}
3131
}
3232

33-
h1,h2,h3,h4,h5,h6 {
33+
h1,h2,h3,h4,h5,h6 {
3434
font-family: $font-header;
3535
}
3636

37+
h1 {
38+
font-weight: 600;
39+
font-size: 64px;
40+
}
41+
42+
h2 {
43+
font-weight: 600;
44+
font-size: 32px;
45+
}
46+
47+
h3 {
48+
font-weight: 500;
49+
font-size: 18px;
50+
}
51+
3752
p {
38-
line-height: 1.25;
53+
line-height: 1.5;
54+
font-weight: 400;
55+
}
56+
57+
label {
58+
font-size: 12px;
59+
font-weight: 400;
3960
}
4061

4162
ul > li {

‎ai_ml_lesson.html‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
---
2+
layout: default
3+
title: "Placeholder Lesson"
4+
permalink: "/classes/ml"
5+
---
6+
7+
<div class="page">
8+
<div class="content">
9+
10+
<div class="image-title">
11+
<img
12+
class="responsive-img"
13+
src="{{site.baseurl}}/img/undraw/dev-and-teacher.svg"
14+
alt="teacher standing in front of backboard and developer coding on laptop"
15+
/>
16+
<div>
17+
<label>introduction to</label>
18+
<h1>AI & ML</h1>
19+
</div>
20+
</div>
21+
22+
<div>
23+
<p>
24+
We present a year-long, modern machine learning class led by UCLA students!
25+
Students will discover and explore the computational and mathematical tools
26+
behind artificial intelligence and machine learning! In a single year, they
27+
will advance from understanding simple AI models that predict weather to
28+
analyzing the complex AI systems that power self-driving cars.
29+
30+
</br></br>
31+
Throughout the year, students will have numerous opportunities to learn and code with
32+
Python. Python is one of the most popular programming languages in use
33+
today, with wide-ranging applications in data processing, web development,
34+
and machine learning. Last year, our students used Python to train AI models
35+
that predict stock market prices, guess the popularity of a song on Spotify,
36+
and detect handwritten digits.
37+
</br></br>
38+
Learning machine learning does not occur in a
39+
vacuum! We encourage our students to think critically about the applications
40+
and ethics of AI. In the past, we’ve brainstormed which types of AI are
41+
best-suited to tackle facial recognition and estimate house prices.
42+
Furthermore, we’ve held in-depth discussions on the ethics of AI-powered
43+
self-driving cars and what it actually means for AI to be racist.
44+
</p>
45+
</div>
46+
47+
<div class="lesson-contact">
48+
<div>
49+
<h3>School Location</h3>
50+
<p>enter school location</p>
51+
</div>
52+
<div>
53+
<h3>Have questions?</h3>
54+
<p>Contact out curriculum lead!</p>
55+
</div>
56+
<div>
57+
<h3>Ava Asmani</h3>
58+
<p>[email protected]</p>
59+
</div>
60+
</div>
61+
62+
<div>
63+
<h2>Learning goals</h2>
64+
<div class="rounded-green-border">
65+
<ul class="spacedlist">
66+
<li>Understand what AI and ML are, and their differences</li>
67+
<li>Learn about deep learning and its applications</li>
68+
<li>Differentiate between classification and regression</li>
69+
<li>
70+
Use Python and related libraries in Google Colab to manipulate data
71+
</li>
72+
<li>Learn and apply linear regression to real-world datasets</li>
73+
<li>Understand the intuition behind gradient descent</li>
74+
<li>Learn and apply logistic regression to real-world datasets</li>
75+
<li>
76+
Understand probability, Bayes' Theorem, and binary cross-entropy loss at
77+
a conceptual level
78+
</li>
79+
<li>Walk through the building blocks of a neural network</li>
80+
<li>
81+
Understand the challenges behind optimization and the applications of
82+
regularization
83+
</li>
84+
<li>Conceptually grasp and implement convolutional neural networks</li>
85+
<li>Explore the ethics behind applications of AI and ML</li>
86+
</ul>
87+
</div>
88+
</div>
89+
90+
<div>
91+
<h2>Lessons</h2>
92+
<div class="center">
93+
<div class="lesson-triple-col">
94+
{% for lesson in site.aiml %}
95+
<div class="lesson-w-chip">
96+
<h3>{{lesson.title}}</h3>
97+
{% if lesson.excerpt %}
98+
{{lesson.excerpt}}
99+
{% endif %}
100+
<div class="green-chips">
101+
{% if lesson.slides_link %}
102+
<div href="{{lesson.slides_link}}">slides</div>
103+
{% endif %}
104+
{% if lesson.homework_link %}
105+
<div href="{{lesson.homework_link}}">worksheet</div>
106+
{% endif %}
107+
{% if lesson.colab_link %}
108+
<div href="{{lesson.colab_link}}">colab</div>
109+
{% endif %}
110+
</div>
111+
</div>
112+
{% endfor %}
113+
</div>
114+
</div>
115+
</div>
116+
117+
<div>
118+
<div>
119+
<h1 class="reset">More resources</h1>
120+
<p>These are our favorite AI/ML resources - they're all awesome!</p>
121+
</div>
122+
<div class="two-by-two">
123+
{% for subcategory in site.data.curriculum_resources.aiml %}
124+
<div>
125+
<h3>{{subcategory.title}}</h3>
126+
<ul>
127+
{% for item in subcategory.items %}
128+
<li>{{item.name}}</li>
129+
{% endfor %}
130+
</ul>
131+
</div>
132+
{% endfor %}
133+
</div>
134+
</div>
135+
</div>
136+
</div>
137+
</div>

‎classes/aiml.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: default
33
title: "Introduction to AI & ML"
4-
permalink: /classes/ml
4+
permalink: /old/classes/ml
55
fw: true
66
---
77
<div class="page-container">

‎css/main.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,4 @@
2626
@import "py1";
2727
@import "aiml";
2828
@import "rnative";
29+
@import "ailessons.scss"

0 commit comments

Comments
 (0)