-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathJob_Application_Assignment.html
More file actions
1658 lines (1496 loc) · 76 KB
/
Job_Application_Assignment.html
File metadata and controls
1658 lines (1496 loc) · 76 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
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Job Application Builder — Genesee Learning Lab</title>
<link rel="icon" href="assets/job-application-favicon.svg" type="image/svg+xml" />
<link rel="shortcut icon" href="assets/job-application-favicon.svg" type="image/svg+xml" />
<link rel="stylesheet" href="styles.css" />
<style>
:root {
--bg: #0b0c0f;
--card: #12141a;
--muted: #c4ccda;
--text: #e8ecf2;
--primary: #4f8cff;
--primary-weak: #2a5bd7;
--accent: #22b07d;
--danger: #ff6b6b;
--border: #1e2230;
--shadow: 0 6px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
}
[data-theme="light"] {
--bg: #f5f5f5;
--card: #ffffff;
--muted: #4a4a4a;
--text: #1a1a1a;
--primary: #0052cc;
--primary-weak: #003fa3;
--accent: #28a745;
--danger: #dc3545;
--border: #d0d0d0;
--shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}
[data-theme="high-contrast"] {
--bg: #000000;
--card: #000000;
--muted: #f2f2f2;
--text: #ffffff;
--primary: #00ffff;
--primary-weak: #00ccff;
--accent: #00cc00;
--danger: #ff0000;
--border: #ffffff;
--shadow: 0 2px 4px rgba(255, 255, 255, 0.3);
}
html,
body {
height: 100%;
}
body {
margin: 0;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
background: radial-gradient(1200px 800px at 90% -10%, #1a2235 0%, var(--bg) 35%), radial-gradient(1000px 600px at -10% 110%, #16202e 0%, transparent 40%) var(--bg);
color: var(--text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background-color 0.2s, color 0.2s;
}
[data-theme="light"] body {
background: #f5f5f5;
}
[data-theme="high-contrast"] body {
background: #000000;
}
.wrap {
max-width: 960px;
margin: 32px auto;
padding: 0 16px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.title {
display: flex;
flex-direction: column;
gap: 4px;
}
.title h1 {
font-size: 22px;
margin: 0;
letter-spacing: 0.2px;
}
.title p {
margin: 0;
font-size: 13px;
color: var(--muted);
}
.controls {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: flex-start;
justify-content: flex-end;
flex: 1;
}
select,
button {
background: var(--card);
color: var(--text);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 12px;
font-size: 14px;
min-height: 44px;
}
button {
cursor: pointer;
}
button:focus-visible,
select:focus-visible,
a:focus-visible,
input:focus-visible {
outline: 3px solid var(--primary);
outline-offset: 2px;
}
button.primary {
background: linear-gradient(180deg, var(--primary) 0%, var(--primary-weak) 100%);
border: none;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.card {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.0));
border: 1px solid var(--border);
border-radius: 16px;
padding: 20px;
box-shadow: var(--shadow);
margin-bottom: 14px;
}
.section-title {
margin: 8px 0 6px;
font-size: 18px;
}
p,
li {
line-height: 1.55;
}
.muted {
color: var(--muted);
}
.badge {
padding: 3px 8px;
border-radius: 999px;
background: #1a2332;
border: 1px solid #213147;
color: #a8c1ff;
display: inline-block;
font-size: 12px;
}
[data-theme="high-contrast"] .badge {
background: #000000;
border-color: #ffffff;
color: #ffffff;
}
.progress {
height: 8px;
background: #0f1117;
border-radius: 999px;
border: 1px solid var(--border);
overflow: hidden;
margin: 16px 0 10px;
}
.progress>div {
height: 100%;
width: 0;
background: linear-gradient(90deg, #5fa8ff, #22b07d);
}
.top-nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.top-nav .left {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.edge-nav-btn {
position: fixed;
top: 50%;
transform: translateY(-50%);
z-index: 1000;
min-width: 96px;
min-height: 44px;
box-shadow: var(--shadow);
}
input[type="checkbox"],
input[type="radio"] {
width: 18px;
height: 18px;
}
#projectPrevBtn {
left: 12px;
}
#projectNextBtn {
right: 12px;
}
.project-page {
display: none;
}
.project-page.active {
display: block;
}
.project-page[hidden] {
display: none;
}
iframe {
width: 100%;
aspect-ratio: 16 / 9;
border: 1px solid var(--border);
border-radius: 10px;
margin-top: 8px;
background: #000;
}
.video-embed {
margin-top: 8px;
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
background: #000;
}
.video-poster {
position: relative;
width: 100%;
padding: 0;
border: 0;
border-radius: 0;
background: #000;
cursor: pointer;
display: block;
}
.video-poster img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.video-play {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 70px;
height: 50px;
border-radius: 12px;
background: rgba(0, 0, 0, 0.72);
color: #fff;
display: grid;
place-items: center;
font-size: 26px;
line-height: 1;
border: 1px solid rgba(255, 255, 255, 0.25);
transition: transform 0.2s ease, background-color 0.2s ease;
}
.video-watch {
position: absolute;
left: 50%;
bottom: 12px;
transform: translateX(-50%);
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.24);
background: rgba(0, 0, 0, 0.68);
color: #fff;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2px;
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
}
.video-poster:hover .video-watch,
.video-poster:focus-visible .video-watch {
opacity: 1;
}
.video-poster:hover .video-play,
.video-poster:focus-visible .video-play {
transform: translate(-50%, -50%) scale(1.05);
background: rgba(0, 0, 0, 0.84);
}
@media (hover: none),
(pointer: coarse) {
.video-watch {
opacity: 1;
font-size: 13px;
padding: 8px 12px;
font-weight: 700;
}
}
.quiz-q {
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px;
margin-bottom: 10px;
}
.quiz-q legend {
font-weight: 600;
padding: 0 4px;
}
.video-check {
margin-top: 10px;
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px;
background: rgba(255, 255, 255, 0.02);
}
.video-check h3 {
margin: 0 0 8px;
font-size: 15px;
}
.video-check .quick-feedback {
margin-top: 8px;
padding: 8px 10px;
border-left: 4px solid var(--primary);
border-radius: 6px;
background: rgba(79, 140, 255, 0.12);
display: none;
}
.video-check .quick-feedback.pass {
border-left-color: var(--accent);
background: rgba(34, 176, 125, 0.12);
}
.video-check .quick-feedback.fail {
border-left-color: var(--danger);
background: rgba(255, 107, 107, 0.12);
}
.checklist {
list-style: none;
padding: 0;
margin: 10px 0 0;
}
.checklist li {
margin: 8px 0;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: rgba(255, 255, 255, 0.02);
display: flex;
gap: 10px;
align-items: flex-start;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.checklist li:hover,
.checklist li:focus-within {
background: rgba(79, 140, 255, 0.10);
border-color: var(--primary);
}
.checklist input[type="checkbox"] {
margin-top: 1px;
transform: none;
}
.checklist label {
cursor: pointer;
flex: 1;
}
.example-block {
margin-top: 12px;
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px;
background: rgba(255, 255, 255, 0.02);
}
.pill {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
padding: 2px 7px;
border: 1px solid var(--border);
border-radius: 999px;
background: rgba(255, 255, 255, 0.03);
font-size: 12px;
}
.rubric-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
}
.rubric-item {
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px;
background: rgba(255, 255, 255, 0.02);
}
.page-image-wrap {
margin-top: 10px;
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
background: rgba(255, 255, 255, 0.02);
}
.page-image {
display: block;
width: 100%;
height: auto;
}
.page-image-caption {
margin-top: 6px;
font-size: 12px;
color: var(--muted);
}
@media (max-width: 640px) {
.page-image {
max-height: 220px;
object-fit: cover;
object-position: center;
}
.edge-nav-btn {
min-width: 78px;
padding: 8px 10px;
}
#projectPrevBtn {
left: 8px;
}
#projectNextBtn {
right: 8px;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
a {
color: var(--primary);
text-decoration: none;
}
[data-theme="high-contrast"] a {
text-decoration: underline;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<a class="skip-link" href="#mainContent">Skip to main content</a>
<!-- NAVIGATION -->
<nav class="site-nav" aria-label="Main navigation">
<div class="nav-inner">
<a href="index.html" class="nav-brand" aria-label="Genesee Learning Lab — Home">
<span class="nav-brand-icon" aria-hidden="true">GL</span>
Genesee Learning Lab
</a>
<button class="nav-toggle" aria-expanded="false" aria-controls="primary-nav-list" aria-label="Open navigation menu">☰</button>
<ul id="primary-nav-list" class="nav-links" role="list">
<li><a href="index.html">Home</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="programs.html">Programs</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<div class="page-breadcrumb" aria-label="Breadcrumb">
<div class="page-breadcrumb__inner">
<a href="projects.html">← Student Tools</a>
</div>
</div>
<div class="wrap">
<header>
<div class="title">
<h1>Job Application Builder</h1>
</div>
<div class="controls">
<label for="themeSelector" class="sr-only">Choose theme</label>
<select id="themeSelector" title="Theme">
<option value="dark">Dark</option>
<option value="light">Light</option>
<option value="high-contrast">High Contrast</option>
</select>
<button id="resetProgress">Reset Progress</button>
</div>
</header>
<main id="mainContent" tabindex="-1">
<div class="card">
<div class="top-nav">
<div class="left">
<span class="badge" id="projectStepCounter" aria-live="polite">Part 1 of 5</span>
<span class="muted">Use the side Back/Next buttons or keyboard arrows (← →).</span>
</div>
</div>
<div class="progress">
<div id="projectProgressBar" role="progressbar" aria-label="Project completion progress"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
</div>
<p id="projectProgressText" class="muted" aria-live="polite">Progress: 0/5 pages completed</p>
</div>
<button id="projectPrevBtn" class="edge-nav-btn" aria-label="Previous page" aria-controls="mainContent">◀
Back</button>
<button id="projectNextBtn" class="edge-nav-btn primary" aria-label="Next page"
aria-controls="mainContent">Next ▶</button>
<section class="project-page active" data-project-page="1" aria-label="Starter Page">
<div class="card">
<div class="badge">Part 1: Starter</div>
<h2 class="section-title">Project Scenario and Expectations</h2>
<p>You are preparing a real-world job application packet for a position you are genuinely interested
in.
</p>
<h3>Step 1: Choose and Save a Job Posting</h3>
<ul>
<li>Find one entry-level first job posting you want to target.</li>
<li>Copy/save the posting link and identify key skills, qualifications, and keywords.</li>
<li>Record at least 5 exact keywords from the posting to reuse in your resume and cover letter
when accurate.</li>
<li>Use that posting to tailor your resume and cover letter in the next sections.</li>
</ul>
<p class="muted"><strong>Time guide:</strong> Watch all 3 videos + complete quick checks (25–35
min), job posting selection + keyword extraction (10–15 min), resume draft (20–25 min), ATS
revision (10–15 min), cover letter draft (15–20 min), final
proofreading/export/submission checks (8–12 min).</p>
<div class="example-block">
<h3 style="margin-top:0;">Before You Click Next</h3>
<ul>
<li>Record the exact <strong>job title</strong>.</li>
<li>Record the <strong>company name</strong>.</li>
<li>Save the <strong>job posting link</strong> so you can reference it while writing.</li>
</ul>
<p class="muted" style="margin-bottom:0;"><strong>Keyword example:</strong> If the posting says
“customer communication,” include that exact phrase where it truthfully matches your
experience.
</p>
</div>
<h3>Project Expectations</h3>
<ul>
<li>Create one polished 2-page packet: resume (page 1) and cover letter (page 2).</li>
<li>Tailor both documents to your selected posting.</li>
<li>Submit both `.docx` and `.pdf` versions of your final packet.</li>
</ul>
<h3 style="margin-top:12px;">What to Submit</h3>
<ul>
<li>One final Word file: <span
class="pill">Lastname_Firstname_JobApplicationAssignment.docx</span>
</li>
<li>One final PDF file: <span
class="pill">Lastname_Firstname_JobApplicationAssignment.pdf</span>
</li>
<li>Both files must contain your full 2-page packet (resume + cover letter).</li>
</ul>
<p class="muted">Estimated time: 90–120 minutes total.</p>
<h3>Suggested Websites to Find a First Job Posting</h3>
<ul>
<li><a href="https://www.indeed.com" target="_blank" rel="noopener">Indeed</a></li>
<li><a href="https://www.linkedin.com/jobs" target="_blank" rel="noopener">LinkedIn Jobs</a>
</li>
<li><a href="https://www.glassdoor.com/Job" target="_blank" rel="noopener">Glassdoor</a></li>
<li><a href="https://www.ziprecruiter.com/jobs-search" target="_blank"
rel="noopener">ZipRecruiter</a></li>
<li><a href="https://www.google.com/search?q=entry-level+first+jobs+near+me" target="_blank"
rel="noopener">Google Job Search</a></li>
</ul>
</div>
<div class="card">
<h3>Starter Checklist</h3>
<ul class="checklist student-checklist">
<li><input type="checkbox" data-key="job_post_selected" /> <label>I selected a real job posting
to
target.</label></li>
<li><input type="checkbox" data-key="job_post_keywords" /> <label>I identified key
skills/keywords
from that posting.</label></li>
<li><input type="checkbox" class="page-complete-checkbox" data-key="page_complete_1" /> <label>I
completed this page.</label></li>
</ul>
<div class="page-image-wrap">
<img class="page-image" src="assets/career-starter-hero.svg"
alt="Professional career planning workspace illustration for the project starter page." />
</div>
<p class="page-image-caption">Project kickoff: use one real posting as your reference for every
section.
</p>
</div>
</section>
<section class="project-page" data-project-page="2" aria-label="Resume Page">
<div class="card">
<div class="badge">Part 2: Resume</div>
<h2 class="section-title">Resume Learning + Application</h2>
<p class="muted">Build a clear, one-page resume tailored to your selected job posting.</p>
</div>
<div class="card">
<h3>Resume Video</h3>
<div class="video-embed" data-video-id="NRTs4HsICI8" data-video-title="Resume Tips Video">
<button type="button" class="video-poster" aria-label="Play Resume Tips Video">
<img src="https://img.youtube.com/vi/NRTs4HsICI8/maxresdefault.jpg"
alt="Resume Tips Video preview" loading="lazy" />
<span class="video-play" aria-hidden="true">▶</span>
<span class="video-watch" aria-hidden="true">Watch video</span>
</button>
</div>
<p><a href="https://youtu.be/NRTs4HsICI8?si=euoYnZ9CRxK3GwKi" target="_blank" rel="noopener">Open
video
in YouTube</a></p>
<div class="video-check" aria-label="Resume video quick check">
<h3>Quick Check: Resume Tips</h3>
<form id="resumeQuickCheck">
<fieldset class="quiz-q resume-step">
<legend>1) About how long did the video say many recruiters spend on an initial resume
scan?
</legend>
<label><input type="radio" name="rq1" value="a" /> Around 10 seconds.</label><br />
<label><input type="radio" name="rq1" value="b" /> Around 2 minutes.</label>
</fieldset>
<fieldset class="quiz-q resume-step">
<legend>2) Which formatting choice matches the video guidance?</legend>
<label><input type="radio" name="rq2" value="a" /> Add photos and colorful graphics to
stand
out.</label><br />
<label><input type="radio" name="rq2" value="b" /> Keep it clean: standard fonts,
consistent
headings, no graphics/photos.</label>
</fieldset>
<fieldset class="quiz-q resume-step">
<legend>3) If you have little or no paid experience, what should you include?</legend>
<label><input type="radio" name="rq3" value="a" /> Only paid jobs.</label><br />
<label><input type="radio" name="rq3" value="b" /> Volunteer work, projects,
extracurriculars, and part-time/freelance work.</label>
</fieldset>
<fieldset class="quiz-q resume-step">
<legend>4) How should you tailor skills from a job description?</legend>
<label><input type="radio" name="rq4" value="a" /> Use the same language from the
posting
when it accurately matches your skills.</label><br />
<label><input type="radio" name="rq4" value="b" /> Keep one generic resume with no
wording
changes.</label>
</fieldset>
<div class="controls" style="margin-top:8px;justify-content:flex-start;">
<button type="button" id="resumePrev">Previous</button>
<button type="button" id="resumeNext">Next</button>
<button type="button" id="gradeResumeQuick" class="primary">Check Answers</button>
<span class="muted" id="resumeCounter"></span>
</div>
</form>
<div id="resumeQuickFeedback" class="quick-feedback"></div>
</div>
</div>
<div class="card">
<h3>Resume Application Requirements</h3>
<ul>
<li>Name and contact information (email, phone, city/state).</li>
<li>Education section with school, program/grade level, and relevant coursework.</li>
<li>Skills section tailored to the target posting.</li>
<li>Experience section (paid work, volunteer work, projects, activities, or leadership).</li>
<li>If this is your first job, emphasize school/community experience and transferable skills.
</li>
</ul>
<h3>AI + Resume Building (Background)</h3>
<p class="muted">AI tools can help brainstorm stronger wording, improve action verbs, and match
keywords from a job posting. AI should support your writing process, not replace your personal
experience.</p>
<ul>
<li>Use AI to revise and organize what you already did.</li>
<li>Do not let AI invent jobs, dates, skills, or accomplishments.</li>
<li>Keep your final resume honest, specific, and in your own voice.</li>
</ul>
<h3>Optional Extension Resources</h3>
<p class="muted">Explore one or more of these resources for extra help with AI-assisted resume
writing:</p>
<ul>
<li><a href="https://capd.mit.edu/resources/ai-uses-for-resume-writing/" target="_blank"
rel="noopener">MIT CAPD: AI Uses for Resume Writing</a></li>
<li><a href="https://www.linkedin.com/pulse/should-ai-write-your-resume-lynda-spiegel-pj2je/"
target="_blank" rel="noopener">LinkedIn: Should AI Write Your Resume?</a></li>
<li><a href="https://www.aboutamazon.com/news/workplace/artificial-intelligence-resume-builder-amazon-job-interviews"
target="_blank" rel="noopener">Amazon: AI Resume Builder and Job Interviews</a></li>
<li><a href="https://mitsloan.mit.edu/ideas-made-to-matter/job-seekers-ai-boosted-resumes-more-likely-to-be-hired"
target="_blank" rel="noopener">MIT Sloan: AI-Boosted Resumes and Hiring Outcomes</a>
</li>
</ul>
<h3>Resume Example (Fictional)</h3>
<p><a href="wordprojectfiles/Lastname_Firstname_Resume_Template.docx" download>Download Resume
Template with Example Content (.docx)</a></p>
<p class="muted">Using Google Docs? <a
href="https://support.google.com/drive/answer/2424368?hl=en&co=GENIE.Platform%3DDesktop&sjid=17720879093965659103-NC&oco=0"
target="_blank" rel="noopener">Upload a Word document to Google Docs</a></p>
<p class="muted">Replace all sample text with your own information before submitting.</p>
<div class="example-block">
<p><strong>Maya Johnson</strong> | maya.johnson@email.com | (555) 018-2034 | Charlotte, NC</p>
<p><strong>Target Role:</strong> Customer Service Associate (Part-Time)</p>
<p><strong>Professional Summary:</strong> Service-focused high school senior seeking a Customer
Service Associate first job opportunity. Strong in customer communication, problem solving,
and teamwork with experience supporting students and families through school and community
volunteer roles.
</p>
<p><strong>Core Skills:</strong> Customer Service, Communication, Team Collaboration, Cash
Handling Basics, Point-of-Sale Familiarity, Time Management, Organization, Problem Solving
</p>
<p><strong>Education:</strong> Westbrook High School, Charlotte, NC — Expected Graduation 2027
</p>
<p><strong>Relevant Coursework:</strong> Business Technology, Computer Applications,
Professional
Communication</p>
<p><strong>Experience:</strong></p>
<ul>
<li><strong>Student Front Office Volunteer</strong> | Westbrook High School | 2025–Present
<ul>
<li>Greeted students, families, and visitors and helped direct questions to the
correct office staff during busy periods.</li>
<li>Answered phones, recorded messages, and supported check-in tasks while keeping
records accurate and organized.</li>
<li>Provided friendly, clear communication and stayed calm while helping multiple
people in a fast-paced environment.</li>
</ul>
</li>
<li><strong>School Event Team Member</strong> | Westbrook HS Activities Office | 2024–2025
<ul>
<li>Coordinated check-in for a 120-student event and reduced wait times by
organizing
alphabetical lines and digital attendance verification.</li>
<li>Collaborated with 6 team members to manage setup, attendee support, and
post-event
follow-up communications.</li>
</ul>
</li>
<li><strong>Community Volunteer Tutor</strong> | Charlotte Youth Center | 2024–Present
<ul>
<li>Supported middle-school students with weekly homework and basic computer-skills
practice in one-on-one and small-group sessions.</li>
<li>Tracked attendance and progress notes to provide clear updates to program staff.
</li>
</ul>
</li>
</ul>
<p><strong>Certifications:</strong></p>
<ul>
<li>Google IT Support Professional Certificate (in progress) — 2026</li>
<li>Microsoft Office Specialist: Word Associate (Office 2019) — 2025</li>
<li>CPR/First Aid Certification (American Red Cross) — 2025</li>
</ul>
</div>
</div>
<div class="card">
<h3>Resume Checklist</h3>
<ul class="checklist student-checklist">
<li><input type="checkbox" data-key="watch_resume" /> <label>I watched the Resume Tips
video.</label></li>
<li><input type="checkbox" data-key="apply_resume" /> <label>I applied at least 2 resume tips in
my
resume page.</label></li>
<li><input type="checkbox" data-key="ai_extension_resource" /> <label>I reviewed at least one
optional AI resume resource.</label></li>
<li><input type="checkbox" class="page-complete-checkbox" data-key="page_complete_2" /> <label>I
completed this page.</label></li>
</ul>
</div>
</section>
<section class="project-page" data-project-page="3" aria-label="ATS Page">
<div class="card">
<div class="badge">Part 3: ATS</div>
<h2 class="section-title">ATS Learning + Application</h2>
<p class="muted">Use ATS-friendly structure and language to improve readability and match quality.
</p>
</div>
<div class="card">
<h3>ATS Video</h3>
<div class="video-embed" data-video-id="DksA_vF84JA" data-video-title="ATS Tips Video">
<button type="button" class="video-poster" aria-label="Play ATS Tips Video">
<img src="https://img.youtube.com/vi/DksA_vF84JA/maxresdefault.jpg"
alt="ATS Tips Video preview" loading="lazy" />
<span class="video-play" aria-hidden="true">▶</span>
<span class="video-watch" aria-hidden="true">Watch video</span>
</button>
</div>
<p><a href="https://youtu.be/DksA_vF84JA?si=sclhCHE9EIZbfsQH" target="_blank" rel="noopener">Open
video
in YouTube</a></p>
<div class="video-check" aria-label="ATS video quick check">
<h3>Quick Check: ATS Basics</h3>
<form id="atsQuickCheck">
<fieldset class="quiz-q ats-step">
<legend>1) In the hiring flow, where does ATS primarily operate?</legend>
<label><input type="radio" name="aq1" value="a" /> Between applying and recruiter
screening,
by scanning and ranking resumes.</label><br />
<label><input type="radio" name="aq1" value="b" /> Only after interviews are
completed.</label>
</fieldset>
<fieldset class="quiz-q ats-step">
<legend>2) Which formatting choice is most ATS-friendly?</legend>
<label><input type="radio" name="aq2" value="a" /> Heavy formatting with tables,
columns,
icons, and images.</label><br />
<label><input type="radio" name="aq2" value="b" /> Simple text-forward layout with
clearly
labeled sections (Experience, Skills, Education).</label>
</fieldset>
<fieldset class="quiz-q ats-step">
<legend>3) According to the video, which file types are generally safe for ATS
submission?
</legend>
<label><input type="radio" name="aq3" value="a" /> Word document or PDF.</label><br />
<label><input type="radio" name="aq3" value="b" /> InDesign or Photoshop native
files.</label>
</fieldset>
<fieldset class="quiz-q ats-step">
<legend>4) How should you use job-description keywords?</legend>
<label><input type="radio" name="aq4" value="a" /> Add matching keywords only when true,
and
show them in skills plus experience context.</label><br />
<label><input type="radio" name="aq4" value="b" /> Add every keyword even if you do not
have
the skill.</label>
</fieldset>
<div class="controls" style="margin-top:8px;justify-content:flex-start;">
<button type="button" id="atsPrev">Previous</button>
<button type="button" id="atsNext">Next</button>
<button type="button" id="gradeAtsQuick" class="primary">Check Answers</button>
<span class="muted" id="atsCounter"></span>
</div>
</form>
<div id="atsQuickFeedback" class="quick-feedback"></div>
</div>
</div>
<div class="card">
<h3>ATS Application Requirements</h3>
<ul>
<li>Use clear section headings and a simple, text-forward layout.</li>
<li>Avoid graphics, icons, columns, and image-based text.</li>
<li>Apply truthful job-description keywords in both skills and experience sections.</li>
<li>Save in a standard format for submission (.docx and .pdf).</li>
</ul>
</div>
<div class="card">
<h3>ATS Checklist</h3>
<ul class="checklist student-checklist">
<li><input type="checkbox" data-key="watch_ats" /> <label>I watched the ATS video.</label></li>
<li><input type="checkbox" data-key="apply_ats" /> <label>I applied at least 2 ATS-friendly
choices
in my resume page.</label></li>
<li><input type="checkbox" class="page-complete-checkbox" data-key="page_complete_3" /> <label>I
completed this page.</label></li>
</ul>
</div>
</section>
<section class="project-page" data-project-page="4" aria-label="Cover Letter Page">
<div class="card">
<div class="badge">Part 4: Cover Letter</div>
<h2 class="section-title">Cover Letter Learning + Application</h2>
<p class="muted">Write a focused cover letter that connects your background to this specific role.
</p>
</div>
<div class="card">
<h3>Cover Letter Video</h3>
<div class="video-embed" data-video-id="EcFOr9Jo0OA" data-video-title="Cover Letter Tips Video">
<button type="button" class="video-poster" aria-label="Play Cover Letter Tips Video">
<img src="https://img.youtube.com/vi/EcFOr9Jo0OA/maxresdefault.jpg"
alt="Cover Letter Tips Video preview" loading="lazy" />
<span class="video-play" aria-hidden="true">▶</span>
<span class="video-watch" aria-hidden="true">Watch video</span>
</button>
</div>
<p><a href="https://youtu.be/EcFOr9Jo0OA?si=L5FiRAjiwQylcmFe" target="_blank" rel="noopener">Open
video
in YouTube</a></p>
<div class="video-check" aria-label="Cover letter video quick check">
<h3>Quick Check: Cover Letter Strategy</h3>
<form id="coverQuickCheck">
<fieldset class="quiz-q cover-step">
<legend>1) According to the video, what is a strong cover letter mainly supposed to do?
</legend>
<label><input type="radio" name="cq1" value="a" /> Repeat your resume line by
line.</label><br />
<label><input type="radio" name="cq1" value="b" /> Connect your experience to the role
and
make a focused case for why you are a strong fit.</label>
</fieldset>
<fieldset class="quiz-q cover-step">
<legend>2) If a job says “cover letter optional,” what did the video suggest?</legend>
<label><input type="radio" name="cq2" value="a" /> Always submit one, even if generic
and
rushed.</label><br />
<label><input type="radio" name="cq2" value="b" /> Submit one only if it is tailored and
polished; a weak generic letter can hurt more than help.</label>
</fieldset>
<fieldset class="quiz-q cover-step">
<legend>3) Which greeting approach is most aligned with the video guidance?</legend>
<label><input type="radio" name="cq3" value="a" /> Use "To Whom It May Concern" for
every
application.</label><br />
<label><input type="radio" name="cq3" value="b" /> Use a specific name when possible,
otherwise use "Dear Hiring Manager."</label>
</fieldset>
<fieldset class="quiz-q cover-step">
<legend>4) Which strategy best shows true tailoring for a specific role?</legend>
<label><input type="radio" name="cq4" value="a" /> Use one universal letter and just