Skip to content

Commit 3bff20d

Browse files
fonspfonsp
committed
lots of stuff
1 parent 1cfb957 commit 3bff20d

File tree

2 files changed

+138
-36
lines changed

2 files changed

+138
-36
lines changed

‎website/homepage/index.css

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ body {
1717
background: url("bg.svg");
1818
background-color: hsl(231deg 14% 57%);
1919
background-size: cover;
20+
overflow-wrap: break-word;
2021
}
2122
main h1 {
2223
font-family: "Vollkorn", serif;
@@ -62,6 +63,7 @@ div.banner h1 {
6263
font-family: "Alegreya", sans-serif;
6364
background: #000000ad;
6465
padding: 0.2em 0.5em;
66+
margin: 0px 10px;
6567
border-radius: 0.4em;
6668
transition: transform 200ms ease-in-out;
6769
color: #ffffffc7;
@@ -128,6 +130,11 @@ main > div.wide {
128130
main > div:last-of-type {
129131
margin-block-end: 0px;
130132
}
133+
main > div > *:last-child,
134+
main > div > .contain > *:last-child {
135+
margin-block-end: 0px;
136+
margin-bottom: 0em;
137+
}
131138
main thingy {
132139
background: #ff00005e;
133140
width: 300vw;
@@ -163,6 +170,7 @@ blockquote {
163170

164171
blockquote.banner {
165172
margin-top: -46px;
173+
font-style: unset;
166174
}
167175

168176
.pillars {
@@ -181,6 +189,22 @@ blockquote.banner {
181189
margin: 0px 10px;
182190
}
183191

192+
.scrolly {
193+
/* max-height: 20em; */
194+
/* overflow-y: auto; */
195+
}
196+
.pillars > div ul {
197+
padding-left: 0.6rem;
198+
}
199+
.pillars > div li {
200+
list-style: "- ";
201+
margin-bottom: 0.3rem;
202+
margin-right: 0.5rem;
203+
}
204+
.pillars > div li::marker {
205+
color: rgba(255, 255, 255, 0.4);
206+
}
207+
184208
.subjects {
185209
display: grid;
186210
grid-template-columns: repeat(3, auto);
@@ -189,18 +213,18 @@ blockquote.banner {
189213
/* flex-wrap: wrap; */
190214
}
191215

192-
@media (max-width: 1000px) {
216+
@media (max-width: 1100px) {
193217
.subjects {
194218
grid-template-columns: repeat(2, auto);
195219
}
196220
}
197-
@media (max-width: 400px) {
221+
@media (max-width: 600px) {
198222
.subjects {
199223
grid-template-columns: repeat(1, auto);
200224
}
201225
}
202226

203-
@media (min-width: 800px) {
227+
@media (min-width: 1000px) {
204228
.subjectscontainer {
205229
display: flex;
206230
flex-direction: row;
@@ -221,7 +245,7 @@ blockquote.banner {
221245
display: block;
222246
border: 7px solid #c19d1c1f;
223247
min-height: 200px;
224-
min-width: 188px;
248+
min-width: min(90vw, 188px);
225249
padding: 1em;
226250
border-radius: 1em;
227251
transition: transform 100ms ease-in-out;

‎website/homepage/index.html

Lines changed: 110 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -17,40 +17,122 @@
1717
<body>
1818
<div id="title" class="banner">
1919

20-
<h1>Introduction to <br><strong>Computational Thinking</strong></h1>
20+
<h1>Julia: <strong>A Fresh Approach to Computing</strong></h1>
2121
</div>
2222
<!-- <img src="https://computationalthinking.mit.edu/Spring21/assets/MIT_logo.svg" class="logo"> -->
2323

2424
<blockquote class="banner">
25-
<p>This is an introductory course on Computational Thinking. We use the Julia programming language to approach real-world problems in varied areas applying data analysis and computational and mathematical modeling. In this class you will learn computer science, software, algorithms, applications, and mathematics as an integrated whole.</p>
25+
<p>This class uses revolutionary programmable interactivity to combine material from three fields creating an engaging, efficient learning solution to prepare students to be sophisticated and intuitive thinkers, programmers, and solution providers for the modern interconnected online world.</p>
26+
27+
<p>Upon completion, students are well trained to be scientific “trilinguals”, seeing and experimenting with mathematics interactively as math is meant to be seen, and ready to participate and contribute to open source development of large projects and ecosystems.</p>
2628
</blockquote>
2729

2830
<main>
2931
<div>
3032
<h1>Three fields, one course</h1>
3133

32-
<div class="pillars">
34+
<div class="scrolly">
35+
<div class="pillars">
3336

34-
<div>
35-
<h3>Computer Science</h3>
36-
</div>
37-
<div>
38-
<h3>Mathematics</h3>
39-
</div>
40-
<div>
41-
<h3>Applications</h3>
37+
<div>
38+
<h3>Computer Science</h3>
39+
<ul>
40+
<li>visualization</li>
41+
<li>structure, abstraction</li>
42+
<li>type systems</li>
43+
<li>multiple dispatch</li>
44+
<li>dynamic dispatch</li>
45+
<li>two-language problem</li>
46+
<li>expression problem</li>
47+
<li>functional programming</li>
48+
<li>arrays</li>
49+
<li>matrices</li>
50+
<li>dataframes</li>
51+
<li>git, github</li>
52+
<li>version control</li>
53+
<li>collaboration</li>
54+
<li>devops</li>
55+
<li>language design</li>
56+
<li>constraint solvers</li>
57+
<li>mathematical programming solvers</li>
58+
<li>heuristics</li>
59+
<li>DSLs</li>
60+
</ul>
61+
62+
</div>
63+
<div>
64+
<h3>Mathematics</h3>
65+
<ul>
66+
<li>matrices</li>
67+
<li>stencils</li>
68+
<li>univariate/multivariate functions</li>
69+
<li>vector calculus</li>
70+
<li>matrix calculus</li>
71+
<li>sequence convergence</li>
72+
<li>principal component analysis</li>
73+
<li>dimensionality reduction</li>
74+
<li>matrix rank</li>
75+
<li>projections, rotations</li>
76+
<li>eigenvalues</li>
77+
<li>singular value decomposition</li>
78+
<li>outliers, noise</li>
79+
<li>data bulk, data center</li>
80+
<li>statistics</li>
81+
<li>correlation</li>
82+
<li>random sampling</li>
83+
<li>probability density function</li>
84+
<li>monte carlo methods</li>
85+
<li>random walks</li>
86+
<li>continuous limit</li>
87+
<li>ordinary differential equations</li>
88+
<li>curve fitting</li>
89+
<li>partial differential equations</li>
90+
<li>finite differences</li>
91+
<li>discretization</li>
92+
<li>bifurcations</li>
93+
<li>hysteresis</li>
94+
<li>optimization</li>
95+
<li>gradient descent</li>
96+
<li>global optimization</li>
97+
<li>constrained optimization</li>
98+
<li>nonlinear optimization</li>
99+
<li>inverse modeling</li>
100+
</ul>
101+
102+
</div>
103+
<div>
104+
<h3>Applications</h3>
105+
106+
<ul>
107+
<li>path finding</li>
108+
<li>image data</li>
109+
<li>image filtering</li>
110+
<li>seam carving</li>
111+
<li>data analysis</li>
112+
<li>model fitting</li>
113+
<li>random data</li>
114+
<li>epidemic modelling</li>
115+
<li>agent based modelling</li>
116+
<li>optimisation</li>
117+
<li>weather forecasting</li>
118+
<li>ocean/atmosphere models</li>
119+
<li>climate science</li>
120+
<li>climate economics</li>
121+
</ul>
122+
123+
</div>
42124
</div>
43125
</div>
44126
</div>
45127

46-
<div class="subjectscontainer">
128+
<div class="subjectscontainer wide">
47129

48130
<h1>Highlights</h1>
49131
<div class="contain">
50132
<section>
51133
<div class="content">
52134
<h2>Real-world problems</h2>
53-
<p>In this course we are going to tackle real problems using real code. You learn mathematics through problems blabladblkfj kjlaf sd dsfjk skdfj kjsdfk sdf.</p>
135+
<p>We will take applications such as climate change and show how you can participate in the big open source community looking to find solutions to challenging problems with exposure to github and parallel computing.</p>
54136
</div>
55137
<div class="preview">
56138
I SHOULD BE A GIF
@@ -61,7 +143,7 @@ <h2>Real-world problems</h2>
61143
<section>
62144
<div class="content">
63145
<h2>Corgi in the washing machine</h2>
64-
<p>In this course we are going to tackle real problems using real code. You learn mathematics through problems blabladblkfj kjlaf sd dsfjk skdfj kjsdfk sdf.</p>
146+
<p>You will learn mathematical ideas by immersion into the mathematical process, performing experiments, seeing the connections, and seeing just how much fun math can be.</p>
65147
</div>
66148
<div class="preview">
67149
I SHOULD BE A GIF
@@ -70,8 +152,18 @@ <h2>Corgi in the washing machine</h2>
70152
</section>
71153
<section>
72154
<div class="content">
73-
<h2>Real-world problems</h2>
74-
<p>In this course we are going to tackle real problems using real code. You learn mathematics through problems blabladblkfj kjlaf sd dsfjk skdfj kjsdfk sdf.</p>
155+
<h2>Revolutionary interactivity</h2>
156+
<p>Our course material is built using real code, and instead of a book, we have a series of interactive <em>notebooks</em>. <strong>On our website, you can play with sliders, buttons and images to interact with our simulations.</strong> You can even go further, and modify and run any code on our website!</p>
157+
</div>
158+
<div class="preview">
159+
I SHOULD BE A GIF
160+
<img src="https://user-images.githubusercontent.com/6933510/134906707-ee1b8bed-cf2d-42cc-a2e9-a81adb56c211.png">
161+
</div>
162+
</section>
163+
<section>
164+
<div class="content">
165+
<h2>Learning Julia</h2>
166+
<p>In literature it’s not enough to just know the technicalities of grammar. In music it’s not enough to learn the scales. The goal is to communicate experiences and emotions. For a computer scientist, it’s not enough to write a working program, the program should be <strong>written with beautiful high level abstractions that speak to your audience</strong>. This class will show you how.</p>
75167
</div>
76168
<div class="preview">
77169
I SHOULD BE A GIF
@@ -90,10 +182,10 @@ <h1>Why is this course different?</h1>
90182
A student is left to figure out the edges, meaning the intellectual connections between the topics on their own as they mature.
91183
Some classes have you learn a math topic and you can then for homework implement an algorithm or application. The goal
92184
for this class, is to accelerate the process by which a student can participate in the exciting world of software development
93-
be it the big open source universe or privately, by seeing how math with cs abstractions can allow for applications that can
185+
be it the big open source universe or privately, by seeing how math with CS abstractions can allow for applications that can
94186
be part of a big huge ecosystem rather than a one-off homework.
95187
<br>
96-
… and have more fun in the process.
188+
… and have more fun in the process!
97189
</p>
98190
</div>
99191

@@ -190,20 +282,6 @@ <h3>Solving inverse problems</h3> <img src="https://user-images.githubuserconten
190282
<div>
191283
<h1>Details</h1>
192284

193-
<ul>
194-
<li>
195-
<p>Image analysis</p>
196-
</li>
197-
<li>
198-
<p>Machine learning</p>
199-
</li>
200-
<li>
201-
<p>Dynamics on networks</p>
202-
</li>
203-
<li>
204-
<p>Climate modeling</p>
205-
</li>
206-
</ul>
207285
<blockquote>
208286
<p>See also the course repository <a href="https://github.com/mitmath/18S191">github.com/mitmath/18S191</a>.</p>
209287
</blockquote>

0 commit comments

Comments
 (0)