Repository navigation
Expand file tree
/
Copy pathProgram.html
More file actions
364 lines (353 loc) · 43.7 KB
/
Copy pathProgram.html
File metadata and controls
364 lines (353 loc) · 43.7 KB
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JX2K3EKGF2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-JX2K3EKGF2');
</script>
<title>Program | Master of Population Data Science | UCLA</title>
<meta name="description" content="Courses, path, and FAQs for UCLA’s Master of Population Data Science: 15 courses over 20 months (or 16 months accelerated), in social science and data science, with a mentored capstone.">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<meta property="og:type" content="website">
<meta property="og:site_name" content="UCLA Master of Population Data Science">
<meta property="og:title" content="The Program | Master of Population Data Science | UCLA">
<meta property="og:description" content="Courses, path, and FAQs for UCLA’s Master of Population Data Science: 15 courses over 20 months (or 16 months accelerated), in social science and data science, with a mentored capstone.">
<meta property="og:url" content="https://mpds.ss.ucla.edu/Program.html">
<meta property="og:image" content="https://mpds.ss.ucla.edu/images/seminar-room-1600.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Draft v4 (18 Oct 2026), built on Draft v3, which came from Draft v2 exported from the "MPDS Website Designs" canvas, 18 Oct 2026. Placeholders in [brackets] still need real content. -->
<style>
:root{color-scheme: light}
body{margin:0;background:#FFFFFF;color:#1B2A35}
a{color:#005587}a:hover{color:#003B5C}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #FFB81C;outline-offset:2px}
.navlist a{white-space:nowrap}
@media (max-width: 900px){
.hdr{position:relative!important;height:auto!important;flex-wrap:wrap;gap:8px;padding:12px max(16px, env(safe-area-inset-left, 0px))!important;background:#003B5C!important}
.navlist{flex-wrap:wrap}
.hero{grid-template-columns:1fr!important;height:auto!important;min-height:0!important}
.hero>div:first-child{height:260px}
.hero>div:last-child{padding:40px 16px!important}
.hero h1{font-size:40px!important;white-space:normal!important}
.hero [style*="display: flex; gap: 24px"]{flex-wrap:wrap}
.g{grid-template-columns:1fr!important;gap:24px!important}
.g>li{border-left:0!important}
.feat{display:block!important}
.feat>:first-child{min-height:280px!important;position:relative}
.feat>:first-child img{width:100%!important}
.feat>:last-child{margin-top:-48px;padding:32px 24px!important}
.capc>img{height:300px!important}.capc-text{padding:0 max(16px, env(safe-area-inset-left, 0px))}
[style*="max-width: 1240px"]{padding-left:16px!important;padding-right:16px!important}
[style*="justify-content: space-between"]{flex-wrap:wrap}
[style*="gap: 28px"]{flex-wrap:wrap;flex:1 1 auto!important}
[style*="padding: 40px; border-top"]{padding:28px 20px!important}
}
/* FAQ accordion */
.faq{list-style:none;margin:40px 0 0;padding:0;max-width:960px}
.faq li{border-top:1px solid rgba(255,255,255,0.25)}
.faq li:last-child{border-bottom:1px solid rgba(255,255,255,0.25)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:22px 0;font-size:22px;line-height:1.3;font-weight:500;color:#FFFFFF}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:0 0 auto;width:28px;text-align:center;font-size:30px;line-height:28px;font-weight:300;color:#FFB81C}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:#FFFFFF;text-decoration:underline;text-decoration-color:#FFB81C;text-decoration-thickness:2px;text-underline-offset:5px}
.faq .a{padding:0 52px 26px 0;font-size:18px;line-height:1.65;color:#FFFFFF}
.faq .a p{margin:0}.faq .a p+p{margin-top:12px}
.faq .a a{color:#FFFFFF;text-decoration:underline;text-decoration-color:#FFB81C;text-decoration-thickness:2px;text-underline-offset:4px}
@media (max-width: 900px){.faq summary{font-size:19px}.faq .a{padding-right:0}}
/* header logo: fixed size; menu drops below it when the row runs out of room */
.hdr>a:first-child{flex:0 0 513px;width:513px;min-width:513px;max-width:none}
.hdr>a:first-child img{width:513px!important;height:42px!important;min-width:513px;max-width:none!important;flex:none;object-fit:contain}
.hero{height:auto!important}
@media (max-width: 1260px){
.hdr{position:relative!important;height:auto!important;flex-wrap:wrap;gap:8px;padding:12px max(16px, env(safe-area-inset-left, 0px))!important;background:#003B5C!important}
.navlist{flex-wrap:wrap}
}
@media (max-width: 560px){
.hdr>a:first-child{flex:0 1 auto;width:100%;min-width:0;max-width:513px}
.hdr>a:first-child img{width:100%!important;height:auto!important;min-width:0;max-width:513px!important;aspect-ratio:451.36/36.99}
}
/* header: once the page scrolls on wide screens it stays at the top as a solid bar, so page text never shows through it */
.js-hdr .hdr{position:fixed!important}
.js-hdr .hdr.scrolled{background:#003B5C!important;box-shadow:0 2px 12px rgba(0,0,0,0.25)}
[id]{scroll-margin-top:96px}
/* narrower screens: header stays transparent over the photo, like the wide version */
@media (max-width: 1260px){
.hdr{position:absolute!important;background:transparent!important;padding:16px 32px!important}
.hero>div:last-child{padding-top:160px!important}
[style*="height: 170px; z-index: 2"]{height:220px!important;background:linear-gradient(to bottom, rgba(0,38,60,0.9) 0%, rgba(0,38,60,0.65) 55%, rgba(0,38,60,0) 100%)!important}
[id]{scroll-margin-top:136px}
}
@media (max-width: 900px){
.hdr{flex-wrap:nowrap!important;align-items:center!important;padding:12px 16px!important;gap:12px!important}
.hdr>a:first-child{flex:1 1 auto!important;width:auto!important;min-width:0!important;max-width:360px!important}
.hdr>a:first-child img{width:100%!important;height:auto!important;min-width:0!important;max-width:360px!important;aspect-ratio:451.36/36.99}
.js-hdr .menu-btn{display:inline-flex!important;flex:0 0 auto}
.js-hdr .hdr nav{display:none;position:absolute;top:100%;left:0;right:0;background:#003B5C;padding:4px 16px 20px;box-shadow:0 12px 24px rgba(0,0,0,0.3)}
.js-hdr .hdr.open{background:#003B5C!important}
.js-hdr .hdr.open nav{display:block}
.js-hdr .navlist{flex-direction:column;align-items:stretch!important}
.js-hdr .navlist a{padding:14px 4px!important;margin-left:0!important;box-shadow:none!important;border-bottom:1px solid rgba(255,255,255,0.15)}
.js-hdr .navlist a[aria-current]{color:#FFB81C!important}
.js-hdr .navlist li:last-child a{margin-top:16px!important;text-align:center;border-bottom:0;padding:14px 20px!important}
.hero>div:first-child{height:340px!important}
.hero>div:last-child{padding-top:40px!important}
[id]{scroll-margin-top:80px}
}
.hdr{transition:background-color .2s ease, box-shadow .2s ease}
/* key dates: keep "January 15, 2027" on one line at laptop widths */
@media (min-width: 901px){[style*="font-size: clamp(34px, 9.5vw, 48px)"]{font-size:clamp(28px, 3vw, 48px)!important}}
/* section spacing: tighter vertical space between sections */
@media (min-width: 901px){
[style*="padding: 120px 40px 0"]{padding-top:72px!important}
[style*="padding: 120px 40px 120px"]{padding-top:72px!important;padding-bottom:80px!important}
[style*="padding: 96px 40px"]{padding-top:64px!important}
[style*="padding: 96px 40px 120px"]{padding-bottom:80px!important}
[style*="padding: 0 40px 120px"]{padding-bottom:80px!important}
[style*="gap: 112px"]{gap:64px!important}
[style*="padding: 80px 40px; display: flex"]{padding-top:56px!important;padding-bottom:56px!important}
}
@media (max-width: 900px){
[style*="padding: 120px 40px"],[style*="padding: 96px 40px"]{padding-top:48px!important}
[style*="padding: 120px 40px 120px"],[style*="padding: 96px 40px 120px"],[style*="padding: 0 40px 120px"]{padding-bottom:56px!important}
[style*="gap: 112px"]{gap:48px!important}
[style*="padding: 80px 40px; display: flex"]{padding-top:40px!important;padding-bottom:40px!important}
}
</style>
</head>
<body>
<div style="position: relative; color: #1B2A35; background: #FFFFFF; font-family: 'Helvetica Neue', Helvetica, Arial, Roboto, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased">
<a href="#main" style="position: absolute; left: 16px; top: -60px; background: #FFB81C; color: #003B5C; padding: 12px 16px; font-weight: 700; z-index: 6">Skip to main content</a>
<header class="hdr" style="position: absolute; top: 0; left: 0; right: 0; z-index: 5; height: 80px; box-sizing: border-box; background: transparent; padding: 0 56px; display: flex; align-items: center; justify-content: space-between">
<a href="index.html" style="display: flex; align-items: center; gap: 12px; color: #FFFFFF; text-decoration: none; min-height: 44px">
<img src="images/mpds-logo-white.svg" width="513" height="42" alt="UCLA College, Social Sciences: Master of Population Data Science, home" style="display: block; height: 42px; width: auto">
</a>
<button type="button" class="menu-btn" aria-expanded="false" aria-controls="mainnav" style="display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(255,255,255,0.7); border-radius: 0; background: rgba(0,59,92,0.35); color: #FFFFFF; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1; cursor: pointer; -webkit-appearance: none; appearance: none"><svg aria-hidden="true" width="18" height="14" viewBox="0 0 18 14"><path d="M0 1h18M0 7h18M0 13h18" stroke="#FFFFFF" stroke-width="2"/></svg>Menu</button>
<nav id="mainnav" aria-label="Main">
<ul class="navlist" style="list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0; font-size: 16px; font-weight: 500">
<li><a href="Program.html" aria-current="page" style="display: block; color: #FFFFFF; text-decoration: none; padding: 12px 12px; line-height: 20px; box-shadow: inset 0 -4px 0 #FFB81C">The Program</a></li>
<li><a href="Faculty.html" style="display: block; color: #FFFFFF; text-decoration: none; padding: 12px 12px; line-height: 20px">Meet the Faculty</a></li>
<li><a href="Admissions.html" style="display: block; color: #FFFFFF; text-decoration: none; padding: 12px 12px; line-height: 20px">Admissions</a></li>
<li><a href="Tuition-and-Aid.html" style="display: block; color: #FFFFFF; text-decoration: none; padding: 12px 12px; line-height: 20px">Tuition & Aid</a></li>
<li><span role="link" aria-disabled="true" title="Applications open soon" style="display: block; margin-left: 8px; color: #003B5C; background: #FFB81C; font-weight: 700; padding: 6px 20px; line-height: 18px; text-align: center; cursor: default">Apply to MPDS<span style="display: block; font-size: 11px; font-weight: 500; line-height: 14px; letter-spacing: 0.04em">Coming soon</span></span></li>
</ul>
</nav>
</header>
<main id="main">
<!-- one continuous dark-blue field with the LIFE-M network, from the top of the page through the FAQs -->
<div style="position: relative; overflow: hidden; background: #003B5C">
<img src="images/lifem-network.jpg" alt="" style="position: absolute; top: -120px; right: -160px; width: 1240px; max-width: none; height: auto; opacity: 0.62; mix-blend-mode: screen; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 30%, transparent 100%)">
<img src="images/lifem-network.jpg" alt="" style="position: absolute; top: 360px; left: -280px; transform: scaleX(-1); width: 1240px; max-width: none; height: auto; opacity: 0.62; mix-blend-mode: screen; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 30%, transparent 100%)">
<img src="images/lifem-network.jpg" alt="" style="position: absolute; top: 840px; right: -160px; width: 1240px; max-width: none; height: auto; opacity: 0.62; mix-blend-mode: screen; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 30%, transparent 100%)">
<img src="images/lifem-network.jpg" alt="" style="position: absolute; top: 1320px; left: -280px; transform: scaleX(-1); width: 1240px; max-width: none; height: auto; opacity: 0.62; mix-blend-mode: screen; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 30%, transparent 100%)">
<img src="images/lifem-network.jpg" alt="" style="position: absolute; top: 1800px; right: -160px; width: 1240px; max-width: none; height: auto; opacity: 0.62; mix-blend-mode: screen; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 30%, transparent 100%)">
<img src="images/lifem-network.jpg" alt="" style="position: absolute; top: 2280px; left: -280px; transform: scaleX(-1); width: 1240px; max-width: none; height: auto; opacity: 0.62; mix-blend-mode: screen; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 30%, transparent 100%)">
<img src="images/lifem-network.jpg" alt="" style="position: absolute; top: 2760px; right: -160px; width: 1240px; max-width: none; height: auto; opacity: 0.62; mix-blend-mode: screen; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 30%, transparent 100%)">
<img src="images/lifem-network.jpg" alt="" style="position: absolute; top: 3240px; left: -280px; transform: scaleX(-1); width: 1240px; max-width: none; height: auto; opacity: 0.62; mix-blend-mode: screen; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 30%, transparent 100%)">
<img src="images/lifem-network.jpg" alt="" style="position: absolute; top: 3720px; right: -160px; width: 1240px; max-width: none; height: auto; opacity: 0.62; mix-blend-mode: screen; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 30%, transparent 100%)">
<img src="images/lifem-network.jpg" alt="" style="position: absolute; top: 4200px; left: -280px; transform: scaleX(-1); width: 1240px; max-width: none; height: auto; opacity: 0.62; mix-blend-mode: screen; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 30%, transparent 100%)">
<img src="images/lifem-network.jpg" alt="" style="position: absolute; top: 4680px; right: -160px; width: 1240px; max-width: none; height: auto; opacity: 0.62; mix-blend-mode: screen; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 30%, transparent 100%)">
<img src="images/lifem-network.jpg" alt="" style="position: absolute; top: 5160px; left: -280px; transform: scaleX(-1); width: 1240px; max-width: none; height: auto; opacity: 0.62; mix-blend-mode: screen; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 30%, transparent 100%)">
<img src="images/lifem-network.jpg" alt="" style="position: absolute; top: 5640px; right: -160px; width: 1240px; max-width: none; height: auto; opacity: 0.62; mix-blend-mode: screen; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 30%, transparent 100%)">
<div aria-hidden="true" style="position: absolute; top: 0; left: 0; right: 0; height: 170px; z-index: 2; background: linear-gradient(to bottom, rgba(0,38,60,0.78) 0%, rgba(0,38,60,0.45) 50%, rgba(0,38,60,0) 100%)"></div>
<!-- HERO: photo fades into the blue field; text on the solid blue -->
<section class="hero" aria-label="Introduction" style="position: relative; z-index: 1; height: 640px; min-height: 640px; display: grid; grid-template-columns: minmax(0, 54fr) minmax(0, 46fr)">
<div style="position: relative; overflow: hidden">
<span aria-hidden="true" style="position: absolute; inset: 0; background: #003B5C; -webkit-mask-image: linear-gradient(to right, #000 72%, transparent 100%), linear-gradient(to bottom, #000 70%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, #000 72%, transparent 100%), linear-gradient(to bottom, #000 70%, transparent 100%); mask-composite: intersect"></span>
<img src="images/seminar-room-1600.jpg" srcset="images/seminar-room-800.webp 800w, images/seminar-room-1600.webp 1600w" sizes="(max-width: 900px) 100vw, 800px" fetchpriority="high" alt="A professor stands at the front of a seminar room, gesturing as students at long tables listen and take notes." style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; -webkit-mask-image: linear-gradient(to right, #000 70%, rgba(0,0,0,0.5) 88%, transparent 100%), linear-gradient(to bottom, #000 62%, rgba(0,0,0,0.4) 85%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, #000 70%, rgba(0,0,0,0.5) 88%, transparent 100%), linear-gradient(to bottom, #000 62%, rgba(0,0,0,0.4) 85%, transparent 100%); mask-composite: intersect">
</div>
<div style="position: relative; color: #FFFFFF; padding: 124px 56px 44px; display: flex; flex-direction: column; justify-content: center">
<p style="margin: 0; display: flex; align-items: center; gap: 16px; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: #FFB81C"><span aria-hidden="true" style="flex: 0 0 auto; width: 56px; height: 3px; background: #FFB81C"></span>The Program</p>
<h1 style="margin: 24px 0 0; font-size: 58px; line-height: 1.08; font-weight: 400; letter-spacing: -0.02em; text-wrap: balance">Data science for a better world</h1>
<p style="margin: 28px 0 0; font-size: 20px; line-height: 1.55; color: #FFFFFF; max-width: 540px">This STEM-designated program builds data science and AI skills and applies them to questions that matter for people, communities, businesses, and policy. Understand how people behave, interact, and navigate the world. Use data and AI to drive decisions and make a positive impact.</p>
<div style="display: flex; gap: 24px; align-items: center; margin-top: 36px">
<a href="#study" style="background: #FFB81C; color: #003B5C; text-decoration: none; font-weight: 700; font-size: 18px; padding: 15px 28px; line-height: 22px">See what you’ll study</a>
<a href="Admissions.html" style="color: #FFFFFF; font-weight: 500; font-size: 18px; text-decoration: underline; text-decoration-color: #FFB81C; text-decoration-thickness: 2px; text-underline-offset: 6px; padding: 11px 0; line-height: 22px">How to apply</a>
</div>
</div>
</section>
<!-- AT A GLANCE: figures on the blue field -->
<section aria-labelledby="glance" style="position: relative; z-index: 1">
<div style="max-width: 1240px; margin: 0 auto; padding: 24px 40px 0">
<h2 id="glance" style="margin: 0; display: flex; align-items: center; gap: 16px; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: #FFB81C">At a glance</h2>
<ul class="g" style="list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,0.25); border-bottom: 1px solid rgba(255,255,255,0.25); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center">
<li style="padding: 22px 20px"><div style="line-height: 1; color: #FFB81C; white-space: nowrap"><span style="font-size: 52px; letter-spacing: -0.03em; font-weight: 400">#1</span></div><div style="margin: 10px auto 0; max-width: 300px; font-size: 17px; line-height: 1.4; color: #FFFFFF">U.S. public university</div><div style="margin-top: 4px; font-size: 14px; color: #FFFFFF">U.S. News & World Report, 2027</div></li>
<li style="padding: 22px 20px; border-left: 1px solid rgba(255,255,255,0.25)"><div style="line-height: 1; color: #FFB81C; white-space: nowrap"><span style="font-size: 52px; letter-spacing: -0.03em; font-weight: 400">15</span> <span style="margin-left: 4px; font-size: 30px; letter-spacing: -0.01em">courses</span></div><div style="margin: 10px auto 0; max-width: 300px; font-size: 17px; line-height: 1.4; color: #FFFFFF">over 6 quarters (20 months), with an accelerated 4-quarter (16-month) option</div></li>
<li style="padding: 22px 20px; border-left: 1px solid rgba(255,255,255,0.25)"><div style="line-height: 1; color: #FFB81C; white-space: nowrap"><span style="font-size: 52px; letter-spacing: -0.03em; font-weight: 400">January 15</span></div><div style="margin: 10px auto 0; max-width: 300px; font-size: 17px; line-height: 1.4; color: #FFFFFF">priority deadline, with decisions by March 1; rolling decisions after</div><div style="margin-top: 4px; font-size: 14px; color: #FFFFFF">Final deadline: June 30</div></li>
</ul>
</div>
</section>
<!-- WHAT YOU'LL STUDY: white cards on the blue field -->
<section id="study" aria-labelledby="study-h" style="position: relative; z-index: 1">
<div style="max-width: 1240px; margin: 0 auto; padding: 120px 40px 0">
<div>
<div>
<div aria-hidden="true" style="width: 56px; height: 3px; background: #FFB81C"></div>
<h2 id="study-h" style="margin: 24px 0 0; font-size: 44px; line-height: 1.1; font-weight: 400; letter-spacing: -0.02em; color: #FFFFFF">What you’ll study</h2>
</div>
</div>
<ol class="g" style="list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px">
<li style="background: #FFFFFF; padding: 36px 32px 32px; border-top: 4px solid #FFB81C; box-shadow: 0 0 0 1px rgba(218,235,254,0.35), 0 0 70px 8px rgba(139,184,232,0.18), 0 30px 60px -24px rgba(0,0,0,0.5)">
<div aria-hidden="true" style="font-size: 40px; line-height: 1; font-weight: 300; letter-spacing: -0.03em; color: #2774AE">01</div>
<h3 style="margin: 16px 0 0; font-size: 24px; line-height: 1.2; font-weight: 500; color: #003B5C">Social Science</h3>
<p style="margin: 6px 0 0; font-size: 16px; font-weight: 500; color: #005587">How to ask the right questions<br>4 units (1 course)</p>
<p style="margin: 12px 0 0; font-size: 17px">Learn how social scientists model human decisions and population change, drawing on demography, economics, geography, political science, public health, and sociology. You’ll learn to frame questions data can answer, measure what matters, and connect findings to decisions in business and policy.</p>
</li>
<li style="background: #FFFFFF; padding: 36px 32px 32px; border-top: 4px solid #FFB81C; box-shadow: 0 0 0 1px rgba(218,235,254,0.35), 0 0 70px 8px rgba(139,184,232,0.18), 0 30px 60px -24px rgba(0,0,0,0.5)">
<div aria-hidden="true" style="font-size: 40px; line-height: 1; font-weight: 300; letter-spacing: -0.03em; color: #2774AE">02</div>
<h3 style="margin: 16px 0 0; font-size: 24px; line-height: 1.2; font-weight: 500; color: #003B5C">Data Science and AI</h3>
<p style="margin: 6px 0 0; font-size: 16px; font-weight: 500; color: #005587">Causal inference and statistics<br>8 units (2 courses)</p>
<p style="margin: 12px 0 0; font-size: 17px">Learn descriptive, quasi-experimental, and experimental methods that describe the world and separate cause from correlation. Build replicable workflows and use AI tools to extend your analysis in hands-on assignments. You’ll learn to interpret output and judge when a claim holds up.</p>
</li>
<li style="background: #FFFFFF; padding: 36px 32px 32px; border-top: 4px solid #FFB81C; box-shadow: 0 0 0 1px rgba(218,235,254,0.35), 0 0 70px 8px rgba(139,184,232,0.18), 0 30px 60px -24px rgba(0,0,0,0.5)">
<div aria-hidden="true" style="font-size: 40px; line-height: 1; font-weight: 300; letter-spacing: -0.03em; color: #2774AE">03</div>
<h3 style="margin: 16px 0 0; font-size: 24px; line-height: 1.2; font-weight: 500; color: #003B5C">Professional Skills</h3>
<p style="margin: 6px 0 0; font-size: 16px; font-weight: 500; color: #005587">Coding, collaboration, and communication<br>8 units (2 courses)</p>
<p style="margin: 12px 0 0; font-size: 17px">Build hands-on skills in programming, machine learning, and AI-assisted coding; managing large-scale datasets; and visualizing statistical results. Practice team collaboration, project management, and professional presentations to non-technical audiences.</p>
</li>
<li style="background: #FFFFFF; padding: 36px 32px 32px; border-top: 4px solid #FFB81C; box-shadow: 0 0 0 1px rgba(218,235,254,0.35), 0 0 70px 8px rgba(139,184,232,0.18), 0 30px 60px -24px rgba(0,0,0,0.5)">
<div aria-hidden="true" style="font-size: 40px; line-height: 1; font-weight: 300; letter-spacing: -0.03em; color: #2774AE">04</div>
<h3 style="margin: 16px 0 0; font-size: 24px; line-height: 1.2; font-weight: 500; color: #003B5C">Data Science in Action</h3>
<p style="margin: 6px 0 0; font-size: 16px; font-weight: 500; color: #005587">Career seminar · 10 units</p>
<p style="margin: 12px 0 0; font-size: 17px">Each week, internationally renowned speakers from academia, industry, government, and the nonprofit sector show how data science and AI are used to solve real problems and shape policy. Meetings with speakers provide career-building tips and networking opportunities.</p>
</li>
<li style="background: #FFFFFF; padding: 36px 32px 32px; border-top: 4px solid #FFB81C; box-shadow: 0 0 0 1px rgba(218,235,254,0.35), 0 0 70px 8px rgba(139,184,232,0.18), 0 30px 60px -24px rgba(0,0,0,0.5)">
<div aria-hidden="true" style="font-size: 40px; line-height: 1; font-weight: 300; letter-spacing: -0.03em; color: #2774AE">05</div>
<h3 style="margin: 16px 0 0; font-size: 24px; line-height: 1.2; font-weight: 500; color: #003B5C">Mentored Capstone Project</h3>
<p style="margin: 6px 0 0; font-size: 16px; font-weight: 500; color: #005587">Apply your skills · 6 units (9 months)</p>
<p style="margin: 12px 0 0; font-size: 17px">Over nine months, tackle a real-world question from research, industry, or public policy. Starting from a problem statement, you’ll build and carry out a work plan with a small team of peers and a faculty mentor, write briefs for stakeholders or policymakers, and finish with an original analysis and presentation.</p>
</li>
<li style="background: #FFFFFF; padding: 36px 32px 32px; border-top: 4px solid #FFB81C; box-shadow: 0 0 0 1px rgba(218,235,254,0.35), 0 0 70px 8px rgba(139,184,232,0.18), 0 30px 60px -24px rgba(0,0,0,0.5)">
<div aria-hidden="true" style="font-size: 40px; line-height: 1; font-weight: 300; letter-spacing: -0.03em; color: #2774AE">06</div>
<h3 style="margin: 16px 0 0; font-size: 24px; line-height: 1.2; font-weight: 500; color: #003B5C">Choose from 40+ UCLA Electives</h3>
<p style="margin: 6px 0 0; font-size: 16px; font-weight: 500; color: #005587">Electives · 12 units (3 courses)</p>
<p style="margin: 12px 0 0; font-size: 17px">Take courses by leading faculty across campus to deepen your expertise and broaden your horizons, including courses in demography, economics, geography, political science, public health, sociology, and statistics and data science.</p>
</li>
</ol>
</div>
</section>
<!-- YOUR PATH: two-year timeline grid (from proposal Figure 1), on the blue field -->
<section aria-labelledby="path" style="position: relative; z-index: 1">
<div style="max-width: 1240px; margin: 0 auto; padding: 120px 40px 120px">
<div aria-hidden="true" style="width: 56px; height: 3px; background: #FFB81C"></div>
<h2 id="path" style="margin: 24px 0 0; font-size: 44px; line-height: 1.1; font-weight: 400; letter-spacing: -0.02em; color: #FFFFFF">Your path through the program</h2>
<p style="margin: 24px 0 0; font-size: 19px; color: #FFFFFF; max-width: 760px">Six quarters over two academic years, with an optional summer internship. An accelerated 4-quarter (16-month) option is available with the program’s approval.</p>
<div style="margin-top: 48px; background: #FFFFFF; padding: 40px; border-top: 4px solid #FFB81C; box-shadow: 0 0 0 1px rgba(218,235,254,0.35), 0 0 70px 8px rgba(139,184,232,0.18), 0 30px 60px -24px rgba(0,0,0,0.5); overflow-x: auto">
<div role="group" aria-label="Two-year course schedule by quarter" style="min-width: 860px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 150px repeat(3, minmax(0, 1fr)); column-gap: 10px; row-gap: 10px">
<div style="grid-column: 1 / 4; grid-row: 1; font-size: 24px; font-weight: 400; letter-spacing: -0.02em; color: #003B5C">Year 1 <span style="font-size: 20px; color: #2774AE; letter-spacing: 0">Foundations</span></div>
<div style="grid-column: 5 / 8; grid-row: 1; font-size: 24px; font-weight: 400; letter-spacing: -0.02em; color: #003B5C">Year 2 <span style="font-size: 20px; color: #2774AE; letter-spacing: 0">Applications</span></div>
<div style="grid-column: 1; grid-row: 2; font-size: 14px; font-weight: 500; color: #4A5A66; padding-bottom: 6px; border-bottom: 1px solid #DAEBFE">Fall</div>
<div style="grid-column: 2; grid-row: 2; font-size: 14px; font-weight: 500; color: #4A5A66; padding-bottom: 6px; border-bottom: 1px solid #DAEBFE">Winter</div>
<div style="grid-column: 3; grid-row: 2; font-size: 14px; font-weight: 500; color: #4A5A66; padding-bottom: 6px; border-bottom: 1px solid #DAEBFE">Spring</div>
<div style="grid-column: 5; grid-row: 2; font-size: 14px; font-weight: 500; color: #4A5A66; padding-bottom: 6px; border-bottom: 1px solid #DAEBFE">Fall</div>
<div style="grid-column: 6; grid-row: 2; font-size: 14px; font-weight: 500; color: #4A5A66; padding-bottom: 6px; border-bottom: 1px solid #DAEBFE">Winter</div>
<div style="grid-column: 7; grid-row: 2; font-size: 14px; font-weight: 500; color: #4A5A66; padding-bottom: 6px; border-bottom: 1px solid #DAEBFE">Spring</div>
<div style="grid-column: 4; grid-row: 2; font-size: 14px; font-weight: 500; color: #4A5A66; padding-bottom: 6px; border-bottom: 1px solid #DAEBFE">Summer</div>
<div style="grid-column: 1; grid-row: 3; background: #003B5C; color: #FFFFFF; padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 52px; box-sizing: border-box"><span style="font-size: 16px; font-weight: 500; line-height: 1.3">Social & population science <span style="font-size: 14px; font-weight: 400; opacity: 0.85"><span style="white-space: nowrap">· 4 units</span></span></span></div>
<div style="grid-column: 1; grid-row: 4; background: #2774AE; color: #FFFFFF; padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 52px; box-sizing: border-box"><span style="font-size: 16px; font-weight: 500; line-height: 1.3">Statistical analysis & data science 1 <span style="font-size: 14px; font-weight: 400; opacity: 0.85"><span style="white-space: nowrap">· 4 units</span></span></span></div>
<div style="grid-column: 2; grid-row: 4; background: #2774AE; color: #FFFFFF; padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 52px; box-sizing: border-box"><span style="font-size: 16px; font-weight: 500; line-height: 1.3">Statistical analysis & data science 2 <span style="font-size: 14px; font-weight: 400; opacity: 0.85"><span style="white-space: nowrap">· 4 units</span></span></span></div>
<div style="grid-column: 2; grid-row: 5; background: #8BB8E8; color: #003B5C; padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 52px; box-sizing: border-box"><span style="font-size: 16px; font-weight: 500; line-height: 1.3">Programming, AI, data management & visualization <span style="font-size: 14px; font-weight: 400; opacity: 0.85"><span style="white-space: nowrap">· 4 units</span></span></span></div>
<div style="grid-column: 3; grid-row: 3 / 5; background: #E6EEF4; border: 2px dashed #003B5C; color: #003B5C; padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 52px; box-sizing: border-box"><span style="font-size: 16px; font-weight: 500; line-height: 1.3">Elective in social or data science <span style="font-size: 14px; font-weight: 400; opacity: 0.85"><span style="white-space: nowrap">· 4 units</span></span></span></div>
<div style="grid-column: 3; grid-row: 6; background: #FFB81C; color: #003B5C; padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 52px; box-sizing: border-box"><span style="font-size: 16px; font-weight: 500; line-height: 1.3">Data Science in Action <span style="font-size: 14px; font-weight: 400; opacity: 0.85"><span style="white-space: nowrap">· 4 units</span></span></span></div>
<div style="grid-column: 4; grid-row: 3 / 8; border: 1px solid #FFB81C; background: #FFF8E8; color: #003B5C; display: flex; align-items: center; justify-content: center; padding: 8px 8px; text-align: center; font-size: 15px; font-weight: 500; line-height: 1.3; white-space: nowrap">Optional internship</div>
<div style="grid-column: 5; grid-row: 3; background: #E6EEF4; border: 2px dashed #003B5C; color: #003B5C; padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 52px; box-sizing: border-box"><span style="font-size: 16px; font-weight: 500; line-height: 1.3">Elective in social science <span style="font-size: 14px; font-weight: 400; opacity: 0.85"><span style="white-space: nowrap">· 4 units</span></span></span></div>
<div style="grid-column: 6; grid-row: 4; background: #E9F2FB; border: 2px dashed #2774AE; color: #005587; padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 52px; box-sizing: border-box"><span style="font-size: 16px; font-weight: 500; line-height: 1.3">Elective in statistics & data science <span style="font-size: 14px; font-weight: 400; opacity: 0.85"><span style="white-space: nowrap">· 4 units</span></span></span></div>
<div style="grid-column: 7; grid-row: 5; background: #8BB8E8; color: #003B5C; padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 52px; box-sizing: border-box"><span style="font-size: 16px; font-weight: 500; line-height: 1.3">Communication, collaboration & presentation <span style="font-size: 14px; font-weight: 400; opacity: 0.85"><span style="white-space: nowrap">· 4 units</span></span></span></div>
<div style="grid-column: 5 / 8; grid-row: 6; background: #FFB81C; color: #003B5C; padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 52px; box-sizing: border-box"><span style="font-size: 16px; font-weight: 500; line-height: 1.3">Data Science in Action<br><span style="font-size: 14px; font-weight: 400; opacity: 0.85"><span style="white-space: nowrap">2 units each quarter</span> · fall through spring</span></span></div>
<div style="grid-column: 5 / 8; grid-row: 7; background: #005587; color: #FFFFFF; padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 52px; box-sizing: border-box"><span style="font-size: 16px; font-weight: 500; line-height: 1.3">Capstone project with a faculty mentor <span style="font-size: 14px; font-weight: 400; opacity: 0.85"><span style="white-space: nowrap">· 2 units each quarter</span> · fall through spring</span></span></div>
</div>
<p style="margin: 24px 0 0; font-size: 15px; font-weight: 400; color: #4A5A66">Shaded boxes with dashed outlines are electives, chosen from more than 40 graduate (incl. PhD) courses in demography, economics, geography, political science, public health, sociology, and statistics and data science. Summer internships require enrollment in a one-unit summer course. International students must obtain Curricular Practical Training (CPT) authorization in accordance with federal regulations.</p>
</div>
</div>
</section>
<!-- FAQ: on the blue field -->
<section aria-labelledby="faq" style="position: relative; z-index: 1">
<div style="max-width: 1240px; margin: 0 auto; padding: 0 40px 120px">
<div aria-hidden="true" style="width: 56px; height: 3px; background: #FFB81C"></div>
<h2 id="faq" style="margin: 24px 0 0; font-size: 44px; line-height: 1.1; font-weight: 400; letter-spacing: -0.02em; color: #FFFFFF">Program FAQs</h2>
<ul class="faq">
<li><details><summary>Are classes in person?</summary><div class="a"><p>Yes. All MPDS courses are taught in person on the UCLA campus. The program does not offer online or hybrid courses.</p></div></details></li>
<li><details><summary>How large will my classes be?</summary><div class="a"><p>The Fall 2027 cohort is expected to have about 25 to 35 students. Required first-year core courses will be about the size of the cohort. Elective sizes are set by the department and instructor offering each course, so electives may be larger or smaller.</p></div></details></li>
<li><details><summary>Can I finish the program early?</summary><div class="a"><p>Yes. With the program’s approval and an approved capstone project, you can take 10 to 12 units a quarter and graduate in 16 months instead of 20. Students on the accelerated track complete the capstone in a team with other accelerated students.</p></div></details></li>
<li><details><summary>Can I do the program part-time?</summary><div class="a"><p>MPDS is designed as a full-time, in-person program, and there is no formal part-time track. With program approval, domestic students may extend their studies to as many as nine quarters by taking fewer courses each term.</p><p>The feasibility of a part-time schedule depends on being able to take the required courses when they are offered. Core courses and the capstone run once a year in a fixed sequence, so postponing a required course may mean waiting a full year to take it. Students who extend their studies should also expect higher total costs, because campus fees and health insurance are charged for each quarter enrolled.</p><p>International students on F-1 visas generally must stay enrolled full-time.</p><p>If you are thinking about a longer schedule, please talk with the MPDS office to see if it is feasible and seek program approval.</p></div></details></li>
<li><details><summary>Is an internship required?</summary><div class="a"><p>No. A summer internship between the first and second years is optional. Program advisors help you arrange one with a research center, government agency, nonprofit, or company.</p></div></details></li>
<li><details><summary>Is MPDS a STEM-designated program?</summary><div class="a"><p>Yes. MPDS is designated a STEM program. This means that international graduates may be eligible for up to 36 months of Optional Practical Training (OPT). See the <a href="https://studyinthestates.dhs.gov/stem-opt-hub" target="_blank" rel="noopener">federal STEM OPT guidance</a>.</p></div></details></li>
</ul>
</div>
</section>
</div>
<!-- CTA: white, as on the home page -->
<section id="sessions" aria-labelledby="cta" style="background: #FFFFFF">
<div style="max-width: 1240px; margin: 0 auto; padding: 80px 40px">
<h2 id="cta" style="margin: 0; font-size: 36px; font-weight: 400; letter-spacing: -0.02em; color: #003B5C">Questions about the program?</h2>
<div style="display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 28px">
<a href="mailto:mpds@ccpr.ucla.edu" style="background: #FFB81C; color: #003B5C; text-decoration: none; font-weight: 700; font-size: 18px; padding: 15px 28px; line-height: 22px; display: inline-block; flex: 1 1 260px; text-align: center; box-sizing: border-box">Contact us</a>
<a href="https://ucla.zoom.us/webinar/register/WN_VzYAD7aOTCOUT4U_g2ZZEQ#/registration" target="_blank" rel="noopener" style="background: #FFB81C; color: #003B5C; text-decoration: none; font-weight: 700; font-size: 18px; padding: 15px 28px; line-height: 22px; display: inline-block; flex: 1 1 260px; text-align: center; box-sizing: border-box">Register for a Zoom info session</a>
<a href="https://airtable.com/app4WuZyRTgAAmT3U/shrJF3J0Qdx0muaHH?prefill_Source=WEB&hide_Source=true" target="_blank" rel="noopener" style="background: #FFB81C; color: #003B5C; text-decoration: none; font-weight: 700; font-size: 18px; padding: 15px 28px; line-height: 22px; display: inline-block; flex: 1 1 260px; text-align: center; box-sizing: border-box">Receive program updates</a>
</div>
</div>
</section>
</main>
<footer style="background: #003B5C; color: #FFFFFF; font-size: 16px">
<div style="max-width: 1240px; margin: 0 auto; padding: 40px; display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap">
<p style="margin: 0; line-height: 1.6">Master of Population Data Science<br>Department of Economics and California Center for Population Research, UCLA<br><a href="mailto:mpds@ccpr.ucla.edu" style="color: #FFFFFF">mpds@ccpr.ucla.edu</a></p>
<ul style="list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; align-items: flex-start">
<li><a href="https://www.ucla.edu/accessibility" style="color: #FFFFFF; display: inline-block; padding: 10px 0">Accessibility</a></li>
<li><a href="https://www.ucla.edu/terms-of-use" style="color: #FFFFFF; display: inline-block; padding: 10px 0">Privacy and terms of use</a></li>
<li><a href="https://civilrights.ucla.edu/notice-nondiscrimination" style="color: #FFFFFF; display: inline-block; padding: 10px 0">Nondiscrimination</a></li>
</ul>
</div>
<p style="max-width: 1240px; margin: 0 auto; padding: 0 40px 32px; font-size: 16px; color: #FFFFFF">© 2026 The Regents of the University of California</p>
</footer>
</div>
<script>
/* PDF buttons: inside the claude.ai preview, hand the file over through the viewer's download prompt.
Opened from Box or a normal web server, the plain link is used as usual. */
(function () {
var dl = null;
function init() {
try {
if (window.claude && window.claude.use) {
window.claude.use("downloads").then(function (d) { dl = d; }, function () {});
}
} catch (e) {}
}
init();
window.addEventListener("load", function () { if (!dl) init(); });
document.addEventListener("click", function (e) {
var a = e.target.closest && e.target.closest('a[href$=".pdf"]');
if (!a || !dl) return;
e.preventDefault();
var href = a.getAttribute("href");
fetch(href).then(function (r) {
if (!r.ok) throw new Error("fetch");
return r.blob();
}).then(function (b) {
return dl.save({ filename: href.split("/").pop(), data: b });
}).catch(function (err) {
if (!err || !err.code) window.open(a.href, "_blank", "noopener");
});
});
})();
</script>
<script>
(function(){var d=document.documentElement;d.className+=' js-hdr';
var h=document.querySelector('.hdr');if(!h)return;
function y(e){var t=e&&e.target&&e.target.scrollTop||0;return Math.max(window.pageYOffset||0,(document.scrollingElement||d).scrollTop||0,t)}
function u(e){if(y(e)>10)h.classList.add('scrolled');else h.classList.remove('scrolled')}
window.addEventListener('scroll',u,{passive:true,capture:true});u();
var b=h.querySelector('.menu-btn');if(!b)return;
function s(o){h.classList.toggle('open',o);b.setAttribute('aria-expanded',o?'true':'false')}
b.addEventListener('click',function(){s(!h.classList.contains('open'))});
h.querySelectorAll('nav a').forEach(function(a){a.addEventListener('click',function(){s(false)})});
document.addEventListener('keydown',function(e){if(e.key==='Escape'&&h.classList.contains('open')){s(false);b.focus()}});})();
</script>
</body>
</html>