-
Notifications
You must be signed in to change notification settings - Fork 0
/
html_css_implementation_guide.html
1092 lines (994 loc) · 72.3 KB
/
html_css_implementation_guide.html
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.0">
<title>Interactive Project Implementation Guide</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Montserrat:wght@300;400&display=swap" rel="stylesheet">
<style>
/* General Styling */
body {
font-family: 'Lato', sans-serif;
font-weight: 300;
background-color: #F7F7F7;
color: #333333;
}
h1 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
color: #002D56;
font-family: 'Montserrat', sans-serif;
}
.accordion-button {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
background-color: transparent;
color: #333;
padding: 10px;
border: none;
border-radius: 0;
box-shadow: none;
text-align: left;
}
.accordion-button:focus {
box-shadow: none;
}
.accordion-button:not(.collapsed) {
background-color: #F1F1F1;
color: #002D56;
}
.accordion-button:hover {
background-color: #E0E0E0;
color: #002D56;
}
.accordion-body {
padding: 15px;
background-color: #fff;
border: none;
margin-bottom: 1rem;
color: #333333;
font-family: 'Lato', sans-serif;
}
/* Progress Bar */
.progress {
height: 25px;
background-color: #E0E0E0;
border-radius: 10px;
}
.progress-bar {
font-weight: bold;
background-color: #002D56;
}
/* Checkbox Styling */
.form-check-input {
width: 18px;
height: 18px;
margin-right: 10px;
accent-color: #0091DB;
border: 2px solid #0091DB;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
background-color: white;
}
.form-check-input:checked {
background-color: #f48c06;
border-color: #f48c06;
box-shadow: none;
}
.table th, .table td {
width: 33%; /* This will divide the table columns equally */
word-wrap: break-word; /* Ensures that long content breaks to the next line */
}
.container {
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
/* Pomodoro Timer */
.pomodoro-container {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-top: -40px;
}
#pomodoro-timer {
font-size: 1.5rem;
font-weight: bold;
margin: 10px 0;
}
#startPomodoro {
background-color: #f48c06;
border-color: #f48c06;
color: white;
}
#startPomodoro:hover {
background-color: #e07c00;
border-color: #e07c00;
}
/* Styling for the Reset Button (default Bootstrap) */
#resetPomodoro {
background-color: #6c757d; /* Default secondary button color */
border-color: #6c757d;
}
</style>
</head>
<body>
<div class="container mt-5">
<h1>Learning Outcomes, Assessment Criteria and Expected Performance</h1>
<div class="accordion" id="learningOutcomesAccordion">
<!-- LO1 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingLOOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLOOne" aria-expanded="true" aria-controls="collapseLOOne">
LO1: Learners will be able to design and implement a one-page interactive front-end web application using HTML and CSS based on user experience design principles, accessibility, and responsiveness.
</button>
</h2>
<div id="collapseLOOne" class="accordion-collapse collapse show" aria-labelledby="headingLOOne" data-bs-parent="#learningOutcomesAccordion">
<div class="accordion-body">
<h5>Criterion: 1.1 Front-End Design</h5>
<table class="table">
<thead>
<tr>
<th>Criterion</th>
<th>Description</th>
<th>Expected Performance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Front-End Design</td>
<td>Design a cohesive one-page layout with a main navigation menu and structured content. Ensure the design adheres to accessibility guidelines, including appropriate colour contrast and alt text for non-text elements. Utilise CSS or CSS frameworks, such as Bootstrap, to create a responsive design.</td>
<td>
<ul>
<li>A cohesive one-page layout with a main navigation menu and structured content.</li>
<li>Semantic use of HTML.</li>
<li>Adherence to accessibility guidelines (colour contrast, alt text).</li>
<li>No Web Content Accessibility Guideline (WCAG) errors.</li>
<li>The layout adapts to different screen sizes using CSS media queries, Flexbox, Grid and/or Bootstrap without any major errors/loss of functionality.</li>
</ul>
</td>
</tr>
</tbody>
</table>
<h5>Criterion: 1.2 User Experience</h5>
<table class="table">
<thead>
<tr>
<th>Criterion</th>
<th>Description</th>
<th>Expected Performance</th>
</tr>
</thead>
<tbody>
<tr>
<td>User Experience</td>
<td>Organise information using UX principles, ensuring headers convey structure and information is easy to find. Ensure the user can initiate and control actions such as playing media (if included), with immediate feedback.</td>
<td>
<ul>
<li>Information organised using UX principles (clear headers, prioritised information).</li>
<li>User-initiated actions (if chosen) with immediate feedback (e.g., media control).</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- LO2 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingLOTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLOTwo" aria-expanded="false" aria-controls="collapseLOTwo">
LO2: Learners will be able to test and validate the one-page web application through the development, implementation, and deployment stages.
</button>
</h2>
<div id="collapseLOTwo" class="accordion-collapse collapse" aria-labelledby="headingLOTwo" data-bs-parent="#learningOutcomesAccordion">
<div class="accordion-body">
<h5>Criterion: 2.1 Code Validation</h5>
<table class="table">
<thead>
<tr>
<th>Criterion</th>
<th>Description</th>
<th>Expected Performance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Code Validation</td>
<td>Ensure custom HTML and CSS pass W3C and Jigsaw validators with no issues.</td>
<td>
<ul>
<li>HTML and CSS validation: Use the W3C HTML Validator to check for errors in the HTML code. The validator should return no errors. Minor warnings (e.g., missing lang attribute) are acceptable but should be noted for future improvement.</li>
<li>CSS validation: Use the Jigsaw CSS Validator to check for any errors in the CSS code. Ensure that the CSS passes validation with no significant issues. Minor warnings (such as vendor prefixes) are acceptable.</li>
<li>Documentation of validation results: Include the validation results in the README file. If errors were identified and fixed during the validation process, briefly document the process of resolving those issues.</li>
<li>Focus on meaningful structure: Ensure the code is semantically meaningful, with correct usage of tags (<header>, <main>, <footer>) that help improve both validation and accessibility.</li>
</ul>
</td>
</tr>
</tbody>
</table>
<h5>Criterion: 2.2 Responsive Design</h5>
<table class="table">
<thead>
<tr>
<th>Criterion</th>
<th>Description</th>
<th>Expected Performance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Responsive Design</td>
<td>Use CSS media queries or Bootstrap to ensure the layout is responsive and maintains integrity across different screen sizes. Apply semantic markup for HTML to enhance readability and structure. Ensure the single page features intuitive navigation.</td>
<td>
<ul>
<li>Responsive layout using CSS media queries or Bootstrap: Use CSS media queries to adjust the layout for different screen sizes. For example, switch from a multi-column layout on desktop to a single-column layout on mobile.</li>
<li>Consistent layout across screen sizes: Ensure that images and text scale properly without overlapping or breaking the layout. Whether using CSS or Bootstrap, ensure the layout is fluid and adapts to screen sizes, using percentage-based widths or responsive classes.</li>
<li>Clear and semantic HTML structure: Use semantic elements such as <header>, <nav>, <section>, <footer>, and <article> to structure content logically. This improves readability and enhances accessibility for screen readers.</li>
<li>Intuitive, functional navigation: Use media queries to transform a horizontal navigation bar into a vertical menu for mobile devices, or use Bootstrap’s navbar component for a responsive navigation menu that collapses into a hamburger menu on smaller screens.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- LO3 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingLOThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLOThree" aria-expanded="false" aria-controls="collapseLOThree">
LO3: Learners will be able to deploy the one-page web application to a cloud platform.
</button>
</h2>
<div id="collapseLOThree" class="accordion-collapse collapse" aria-labelledby="headingLOThree" data-bs-parent="#learningOutcomesAccordion">
<div class="accordion-body">
<h5>Criterion: 3.1 Cloud Deployment</h5>
<table class="table">
<thead>
<tr>
<th>Criterion</th>
<th>Description</th>
<th>Expected Performance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cloud Deployment</td>
<td>Successfully deploy the final version to GitHub Pages, ensuring it matches the development version. Use Git and GitHub for version control, with a clear commit history and clean, commented code. Remove commented-out code before final deployment. Ensure all internal links and interactive elements function correctly.</td>
<td>
<ul>
<li>Successful deployment to GitHub Pages: Deploy the single-page application to GitHub Pages. Ensure the live version matches the development version with no discrepancies (e.g., broken links, missing images, layout issues).</li>
<li>Effective use of Git and GitHub for version control: Use Git to track changes with meaningful commits reflecting key development stages. Use GitHub for collaboration and version control.</li>
<li>Clear, commented code and removal of commented-out sections: Apply comments where the code may be unclear and remove any commented-out code before deployment.</li>
<li>Internal links and interactive elements function correctly: Ensure all internal links and interactive elements work correctly in the live version.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- LO4 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingLOFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLOFour" aria-expanded="false" aria-controls="collapseLOFour">
LO4: Learners will be able to maximise future maintainability through documentation, code structure, and organisation.
</button>
</h2>
<div id="collapseLOFour" class="accordion-collapse collapse" aria-labelledby="headingLOFour" data-bs-parent="#learningOutcomesAccordion">
<div class="accordion-body">
<h5>Criterion: 4.1 Documentation</h5>
<table class="table">
<thead>
<tr>
<th>Criterion</th>
<th>Description</th>
<th>Expected Performance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Documentation</td>
<td>Write a concise README.md file explaining the application’s purpose, user value, and deployment procedure. Include screenshots of the single-page application with brief descriptions and user value explanations. Attribute any code from external sources clearly.</td>
<td>
<ul>
<li>Concise README.md file (brief and concise) with clear structure based on headings like Introduction, User Experience, Features, Technologies Used, Testing, Deployment, Credits and Attribution, Reflection on AI Tools, Screenshots, and Descriptions.</li>
<li>Proper attribution of external code sources.</li>
<li>Reflection on AI tools used for ideation and development.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- LO5 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingLOFive">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLOFive" aria-expanded="false" aria-controls="collapseLOFive">
LO5: Learners will be able to leverage AI tools to orchestrate the development.
</button>
</h2>
<div id="collapseLOFive" class="accordion-collapse collapse" aria-labelledby="headingLOFive" data-bs-parent="#learningOutcomesAccordion">
<div class="accordion-body">
<h5>Criterion: 5.1 Use AI tools to assist in writing HTML, CSS, and JavaScript code</h5>
<table class="table">
<thead>
<tr>
<th>Criterion</th>
<th>Description</th>
<th>Expected Performance</th>
</tr>
</thead>
<tbody>
<tr>
<td>AI-Assisted Coding</td>
<td>Use AI tools to assist in writing HTML, CSS, and JavaScript code. Ensure AI-generated code aligns with project requirements through timely manual intervention. Document in the README file evidence of how AI tools contributed to the development process.</td>
<td>
<ul>
<li>Effective AI use in coding: Use significant AI prompts to generate parts of the project. For example, prompt "Generate a fully responsive navigation bar with dropdown menus and a mobile toggle."</li>
<li>Briefly document AI usage in the README: Learners should document one significant AI prompt and its impact on the project.</li>
<li>Manual intervention: Describe one significant example of a specific manual intervention where the AI-generated code was refined.</li>
</ul>
</td>
</tr>
</tbody>
</table>
<h5>Criterion: 5.2 Use AI tools to assist in debugging HTML and CSS</h5>
<table class="table">
<thead>
<tr>
<th>Criterion</th>
<th>Description</th>
<th>Expected Performance</th>
</tr>
</thead>
<tbody>
<tr>
<td>AI-Assisted Debugging</td>
<td>Use AI tools to assist in identifying and fixing errors in HTML and CSS code. AI tools should accurately identify issues and suggest relevant fixes with minimal manual intervention.</td>
<td>
<ul>
<li>Extensive use of AI for debugging: Use AI tools to debug issues like misaligned elements.</li>
<li>AI suggesting accurate fixes: Ensure the AI suggestions (e.g., flexbox alignment corrections) improve the design.</li>
<li>Minimal manual intervention: Document how AI assisted in debugging and what manual tweaks were applied.</li>
</ul>
</td>
</tr>
</tbody>
</table>
<h5>Criterion: 5.3 Use AI tools to optimise HTML and CSS for better performance and user experience</h5>
<table class="table">
<thead>
<tr>
<th>Criterion</th>
<th>Description</th>
<th>Expected Performance</th>
</tr>
</thead>
<tbody>
<tr>
<td>AI-Assisted Optimisation</td>
<td>Use AI tools to assist in optimising HTML and CSS for performance and user experience.</td>
<td>
<ul>
<li>Efficient AI use for optimization: Use AI to streamline CSS for performance and responsive design.</li>
<li>Minimal manual adjustments: Review AI-suggested optimizations for visual consistency.</li>
<li>Enhanced user experience: Implement AI suggestions that improve load times, responsive design, and user interaction.</li>
</ul>
</td>
</tr>
</tbody>
</table>
<h5>Criterion: 5.4 Document AI’s role in the development process and how it improved or streamlined the workflow</h5>
<table class="table">
<thead>
<tr>
<th>Criterion</th>
<th>Description</th>
<th>Expected Performance</th>
</tr>
</thead>
<tbody>
<tr>
<td>AI Workflow Integration</td>
<td>Document how AI tools (e.g., GitHub Copilot) were used to improve or streamline the development process. Provide specific examples of how AI tools assisted in key stages of the project.</td>
<td>
<ul>
<li>Concise documentation of AI usage: Outline the role of AI tools in the README.md under "AI Tool Usage."</li>
<li>Minimal examples, focused on workflow improvement: Document examples where AI tools streamlined the workflow, such as optimizing CSS or generating initial layouts.</li>
<li>README Integration: Mention AI tools' contributions, focusing on areas like code generation, bug fixing, or layout optimization.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="container mt-5">
<h1>Project Implementation Guide</h1>
<!-- Pomodoro Timer -->
<div class="pomodoro-container">
<h4>Pomodoro Timer</h4>
<div id="pomodoro-timer">
<span id="minutes">25</span>:<span id="seconds">00</span>
</div>
<div id="pomodoro-controls">
<button id="startPomodoro" class="btn btn-primary mt-2">Start</button>
<button id="resetPomodoro" class="btn btn-secondary mt-2">Reset</button>
</div>
</div>
<!-- Progress Bar -->
<h3>Progress</h3>
<div class="progress mb-4">
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="progressBar">0%</div>
</div>
<div class="accordion" id="wellBeingAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingWellBeing">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWellBeing" aria-expanded="true" aria-controls="collapseWellBeing">
Health and Well-Being Guidance
</button>
</h2>
<div id="collapseWellBeing" class="accordion-collapse collapse show" aria-labelledby="headingWellBeing" data-bs-parent="#wellBeingAccordion">
<div class="accordion-body">
<p>It's essential to balance productivity with health and well-being. Here’s how you can maintain a healthy approach during this intensive project period:</p>
<ul>
<li><strong>Manage Your Time Wisely</strong>
<ul>
<li>Create a Realistic Schedule: Break down the hours into focused work sessions (e.g., 2-hour blocks) with short breaks in between. Prioritise must-have tasks first.</li>
<li>Use Focused Work Techniques: Apply the Pomodoro Technique (25 minutes of focused work followed by a 5-minute break) to maximise productivity within the limited time.</li>
</ul>
</li>
<li><strong>Take Regular, Short Breaks</strong>
<ul>
<li>Incorporate Micro-Breaks: After every 25-30 minutes of work, take a 2-5 minute break. Use this time to stretch, move around, or simply rest your eyes.</li>
<li>Avoid Overworking: Even in a short project, it’s important not to skip breaks. They help maintain concentration and prevent burnout.</li>
</ul>
</li>
<li><strong>Maintain a Functional Workspace</strong>
<ul>
<li>Optimise Ergonomics: Ensure your chair and desk setup support good posture. This reduces the risk of discomfort during long work sessions.</li>
<li>Ensure Adequate Lighting: Work in a well-lit space to reduce eye strain, especially if working on a screen for extended periods.</li>
</ul>
</li>
<li><strong>Stay Hydrated and Nourished</strong>
<ul>
<li>Keep Water Nearby: Stay hydrated by keeping a water bottle at your desk. This helps maintain focus and energy.</li>
<li>Healthy Snacks: Choose light, healthy snacks (like fruits or nuts) to keep your energy levels stable throughout the project.</li>
</ul>
</li>
<li><strong>Balance Work and Rest</strong>
<ul>
<li>Set Clear Boundaries: Even within the allocated project period, establish a balance between focused work and rest. Use your breaks effectively to relax and reset.</li>
<li>Mini Relaxation: After a few hours of work, take a slightly longer break (10-15 minutes) to step away from the project and clear your mind.</li>
</ul>
</li>
<li><strong>Get Enough Rest Before the Project</strong>
<ul>
<li>Sleep Well Before Starting: Ensure you are well-rested before beginning the project. Good sleep beforehand will improve your concentration and efficiency.</li>
<li>Avoid Late-Night Sessions: Try to schedule your project work during times when you are most alert, rather than working late into the night.</li>
</ul>
</li>
<li><strong>Reflect and Adjust</strong>
<ul>
<li>Monitor Your Progress: Regularly check in on your progress and adjust your pace if necessary. If you’re feeling fatigued, take a short break to recharge.</li>
<li>Stay Flexible: Be prepared to adapt your plan if certain tasks take longer than expected. Prioritise the most critical tasks to ensure they are completed.</li>
</ul>
</li>
<li><strong>Stay Positive and Focused</strong>
<ul>
<li>Maintain a Positive Mindset: Stay motivated by focusing on what you’re accomplishing. Keep your goals in mind and celebrate small wins along the way.</li>
<li>Avoid Perfectionism: With limited time, aim for good progress rather than perfection. Completing tasks efficiently is more important than getting every detail perfect.</li>
</ul>
</li>
</ul>
<p>By incorporating these strategies into your project time, you can work efficiently while maintaining your health and well-being. Remember, taking care of yourself is crucial to ensuring a successful and productive project outcome.</p>
</div>
</div>
</div>
</div>
<div class="accordion" id="accordionExample">
<!-- Phase 1 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Phase 1: Ideation & Initial Setup (3 hours)
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne">
<div class="accordion-body">
<p><h5>Objective:</h5> Brainstorm and refine project ideas, define user stories that capture essential features and functionality, and document these stories in the README. Use GitHub Copilot to assist in drafting content and defining user stories and their acceptance criteria efficiently.</p>
<!-- Task 1 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingTask1">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTask1" aria-expanded="false" aria-controls="collapseTask1">
Task 1: Ideation and User Story Definition (1 hour)
</button>
</h2>
<div id="collapseTask1" class="accordion-collapse collapse" aria-labelledby="headingTask1">
<div class="accordion-body">
<p><h5>Objective:</h5> Brainstorm and refine project ideas, define user stories, and document them in the README. Use AI tools like GitHub Copilot to assist in drafting content and defining user stories.</p>
<h5>Associated Pass Criteria</h5>
<ul>
<li>LO1.1: Front-End Design: Create a cohesive one-page layout using HTML and CSS or Bootstrap, ensuring semantic HTML and adherence to accessibility guidelines (e.g. color contrast, alt-text for images).</li>
<li>LO4.1: Documentation: Write a concise README.md explaining the application’s purpose, user value, and deployment procedure. Include brief user stories and acceptance criteria.</li>
</ul>
<h5>Expected Performance (Do's)</h5>
<ul>
<li><input type="checkbox" class="form-check-input" id="task1Do1"> A concise README.md documenting the project’s purpose, user value, and user stories.</li>
<li><input type="checkbox" class="form-check-input" id="task1Do2"> Prioritize user stories into Must, Should, and Could categories.</li>
<li><input type="checkbox" class="form-check-input" id="task1Do3"> Use GitHub Copilot to generate content efficiently and ensure relevance to the project’s scope.</li>
</ul>
<h5>Documentation Task</h5>
<ul>
<li><input type="checkbox" class="form-check-input" id="doc1"> Brief README entry with project definition, user stories, and acceptance criteria.</li>
<li><input type="checkbox" class="form-check-input" id="doc2"> Brief AI Reflection (1-2 sentences): "GitHub Copilot provided useful suggestions for user stories, though some required adjustment to meet project goals."</li>
</ul>
<h5>Areas for Improvement (Don'ts)</h5>
<ul>
<li>Skipping user story documentation can lead to unclear planning.</li>
<li>Over-relying on AI without reviewing or refining the output may cause misalignment with project goals.</li>
</ul>
</div>
</div>
</div>
<!-- Task 2 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingTask2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTask2" aria-expanded="false" aria-controls="collapseTask2">
Task 2: Initial Planning and Wireframing (1 hour)
</button>
</h2>
<div id="collapseTask2" class="accordion-collapse collapse" aria-labelledby="headingTask2">
<div class="accordion-body">
<p><h5>Objective:</h5> Outline the website's structure and design through wireframes, including color schemes, fonts, and content placement.</p>
<h5>Associated Pass Criteria</h5>
<ul>
<li>LO1.2: User Experience: Organize information using UX principles with proper headers and content prioritization. Ensure consistency in imagery, color contrast, and font usage.</li>
</ul>
<h5>Expected Performance (Do's)</h5>
<ul>
<li><input type="checkbox" class="form-check-input" id="task2Do1"> Create wireframes that reflect a well-structured layout.</li>
<li><input type="checkbox" class="form-check-input" id="task2Do2"> Ensure adherence to accessibility standards (color contrast, alt-text for images).</li>
<li><input type="checkbox" class="form-check-input" id="task2Do3"> Use AI tools like DALL-E to generate initial design elements, if applicable.</li>
</ul>
<h5>Documentation Task</h5>
<ul>
<li><input type="checkbox" class="form-check-input" id="doc3"> Record design decisions in the README: wireframes, color schemes, fonts.</li>
<li><input type="checkbox" class="form-check-input" id="doc4"> Brief AI Reflection: "DALL-E helped generate image ideas, but manual adjustments were needed to fit the design theme."</li>
</ul>
<h5>Areas for Improvement (Don'ts)</h5>
<ul>
<li>Starting development without a clear design plan can lead to inconsistencies.</li>
<li>Neglecting accessibility guidelines during the design process can hurt usability.</li>
</ul>
</div>
</div>
</div>
<!-- Task 3 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingTask3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTask3" aria-expanded="false" aria-controls="collapseTask3">
Task 3: Environment Setup and Version Control (1 hour)
</button>
</h2>
<div id="collapseTask3" class="accordion-collapse collapse" aria-labelledby="headingTask3">
<div class="accordion-body">
<p><h5>Objective:</h5> Set up the project’s development environment, create a GitHub repository, and link external resources like Bootstrap.</p>
<h5>Associated Pass Criteria</h5>
<ul>
<li>LO3.1: Cloud Deployment: Use Git and GitHub for effective version control and ensure a clear commit history. Deploy to GitHub Pages, ensuring the live version matches the development version.</li>
</ul>
<h5>Expected Performance (Do's)</h5>
<ul>
<li><input type="checkbox" class="form-check-input" id="task3Do1"> Set up a well-organized project structure with linked Bootstrap resources.</li>
<li><input type="checkbox" class="form-check-input" id="task3Do2"> Regular and meaningful commits to GitHub should be made throughout.</li>
</ul>
<h5>Documentation Task</h5>
<ul>
<li><input type="checkbox" class="form-check-input" id="doc5"> Brief documentation of the setup process (GitHub repository creation, Bootstrap linked).</li>
</ul>
<h5>Areas for Improvement (Don'ts)</h5>
<ul>
<li>Avoid vague or infrequent commit messages, as this can obscure the development process.</li>
</ul>
</div>
</div>
</div>
<!-- What Should Be in Place -->
<div class="mt-4">
<h5>What Should Be in Place By The End Of This Phase?</h5>
<ul>
<li>A clear understanding of the project’s purpose and target audience, briefly documented in the README.</li>
<li>Wireframes and design decisions, recorded concisely in bullet points.</li>
<li>A fully set-up development environment with version control.</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Phase 2 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Phase 2: Must User Stories Implementation & Testing (5.5 hours)
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo">
<div class="accordion-body">
<p><h5>Objective:</h5> Implement the essential features of the website as outlined in the Must user stories. Use HTML, CSS, and Bootstrap, and ensure the site is responsive and accessible. Use AI tools like GitHub Copilot to assist with code generation and debugging.</p>
<!-- Task 4 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingTask4">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTask4" aria-expanded="false" aria-controls="collapseTask4">
Task 4: Must User Stories Implementation (3.5 hours)
</button>
</h2>
<div id="collapseTask4" class="accordion-collapse collapse" aria-labelledby="headingTask4">
<div class="accordion-body">
<p><h5>Objective:</h5> Develop the core features based on the Must user stories, ensuring a cohesive, accessible, and responsive website.</p>
<h5>Associated Pass Criteria</h5>
<ul>
<li>LO1.1: Front-End Design: Create a responsive and accessible layout using Bootstrap or custom CSS, with proper navigation and semantic HTML.</li>
<li>LO2.1: Code Validation: Validate HTML and CSS using W3C and Jigsaw validators, ensuring no significant issues.</li>
<li>LO5.1: Use AI tools to assist in writing HTML and CSS: Use GitHub Copilot to assist in generating HTML, CSS, and Bootstrap code efficiently.</li>
</ul>
<h5>Expected Performance (Do's)</h5>
<ul>
<li><input type="checkbox" class="form-check-input" id="task4Do1"> Implement a cohesive layout using Bootstrap or custom CSS, ensuring a responsive and accessible site.</li>
<li><input type="checkbox" class="form-check-input" id="task4Do2"> Use semantic HTML tags such as <header>, <nav>, <section>, and <footer>, adhering to accessibility standards.</li>
<li><input type="checkbox" class="form-check-input" id="task4Do3"> Validate HTML and CSS through W3C and Jigsaw validators with no major errors.</li>
</ul>
<h5>Documentation Task</h5>
<ul>
<li><input type="checkbox" class="form-check-input" id="doc6"> Keep the README entry brief, noting the implemented Must user stories and features in bullet points.</li>
<li><input type="checkbox" class="form-check-input" id="doc7"> AI Reflection (1-2 sentences): "GitHub Copilot helped generate the HTML structure and Bootstrap classes quickly, though some adjustments were needed to ensure responsiveness."</li>
</ul>
<h5>Areas for Improvement (Don'ts)</h5>
<ul>
<li>Failing to ensure accessibility and responsiveness can negatively impact the user experience.</li>
<li>Over-relying on AI-generated code without reviewing it can result in errors or misaligned design choices.</li>
</ul>
</div>
</div>
</div>
<!-- Task 5 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingTask5">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTask5" aria-expanded="false" aria-controls="collapseTask5">
Task 5: Visual Progress & Testing (1 hour)
</button>
</h2>
<div id="collapseTask5" class="accordion-collapse collapse" aria-labelledby="headingTask5">
<div class="accordion-body">
<p><h5>Objective:</h5> Test the website for responsiveness across different devices and screen sizes, ensuring that all components work properly. Leverage AI tools for debugging.</p>
<h5>Associated Pass Criteria</h5>
<ul>
<li>LO2.2: Responsive Design and Navigation: Ensure that the website’s layout adapts correctly using CSS media queries or Bootstrap’s grid system.</li>
<li>LO5.2: Use AI tools to assist in debugging HTML and CSS: Use GitHub Copilot or other AI tools to help debug HTML and CSS issues.</li>
</ul>
<h5>Expected Performance (Do's)</h5>
<ul>
<li><input type="checkbox" class="form-check-input" id="task5Do1"> Test the website using developer tools (e.g., Chrome DevTools) to ensure the design is responsive and consistent across devices.</li>
<li><input type="checkbox" class="form-check-input" id="task5Do2"> Use Bootstrap’s grid system or custom CSS media queries to adjust the layout for various screen sizes.</li>
<li><input type="checkbox" class="form-check-input" id="task5Do3"> Fix any issues identified during testing using GitHub Copilot or other AI tools.</li>
</ul>
<h5>Documentation Task</h5>
<ul>
<li><input type="checkbox" class="form-check-input" id="doc8"> Document testing results briefly in the README (1-2 sentences), focusing on any major adjustments made to improve responsiveness.</li>
<li><input type="checkbox" class="form-check-input" id="doc9"> AI Reflection: "GitHub Copilot helped identify and fix layout issues, particularly with mobile responsiveness."</li>
</ul>
<h5>Areas for Improvement (Don'ts)</h5>
<ul>
<li>Failing to test across multiple devices can result in a poor user experience on mobile or tablets.</li>
<li>Skipping accessibility checks can make the website difficult for certain users to navigate.</li>
</ul>
</div>
</div>
</div>
<!-- Task 6 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingTask6">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTask6" aria-expanded="false" aria-controls="collapseTask6">
Task 6: Adjustments & Refinement (1 hour)
</button>
</h2>
<div id="collapseTask6" class="accordion-collapse collapse" aria-labelledby="headingTask6">
<div class="accordion-body">
<p><h5>Objective:</h5> Refine the website, ensuring consistency in design, performance, and responsiveness. Use AI tools to optimize the HTML and CSS.</p>
<h5>Associated Pass Criteria</h5>
<ul>
<li>LO1.5: Design Consistency: Ensure the design is consistent across all sections of the website, with unified styling and functionality.</li>
<li>LO5.3: Use AI tools to optimize HTML and CSS: Use AI tools to suggest and implement optimizations, ensuring better performance and user experience.</li>
</ul>
<h5>Expected Performance (Do's)</h5>
<ul>
<li><input type="checkbox" class="form-check-input" id="task6Do1"> Ensure that all pages are consistent in layout, style, and responsiveness, with no discrepancies in design.</li>
<li><input type="checkbox" class="form-check-input" id="task6Do2"> Use GitHub Copilot or other AI tools to optimize the code, reducing redundancy and improving performance.</li>
<li><input type="checkbox" class="form-check-input" id="task6Do3"> Test any optimizations to confirm they enhance performance and user experience.</li>
</ul>
<h5>Documentation Task</h5>
<ul>
<li><input type="checkbox" class="form-check-input" id="doc10"> Keep the documentation brief, noting any changes made during the refinement stage (1-2 sentences).</li>
<li><input type="checkbox" class="form-check-input" id="doc11"> AI Reflection: "GitHub Copilot suggested improvements for optimizing media queries, which enhanced the website’s load time."</li>
</ul>
<h5>Areas for Improvement (Don'ts)</h5>
<ul>
<li>Neglecting consistency checks could lead to a disjointed user experience.</li>
<li>Skipping optimization steps may result in slower performance or larger file sizes, affecting load times.</li>
</ul>
</div>
</div>
</div>
<!-- What Should Be in Place -->
<div class="mt-4">
<h5>What Should Be in Place By The End Of This Phase?</h5>
<ul>
<li>Core Must features implemented and functioning correctly.</li>
<li>A responsive and accessible website tested across multiple devices.</li>
<li>Optimized code for better performance and user experience, with AI-driven improvements.</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Phase 3 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Phase 3: Should User Stories Implementation & Advanced Features (3.5 hours)
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree">
<div class="accordion-body">
<p><h5>Objective:</h5> Implement additional features and enhancements based on the Should user stories. This phase focuses on refining the design, improving user engagement, and ensuring that all features work seamlessly. AI tools are used to assist in refining HTML, CSS, and Bootstrap code.</p>
<!-- Task 7 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingTask7">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTask7" aria-expanded="false" aria-controls="collapseTask7">
Task 7: Should User Stories Implementation (2.5 hours)
</button>
</h2>
<div id="collapseTask7" class="accordion-collapse collapse" aria-labelledby="headingTask7">
<div class="accordion-body">
<p><h5>Objective:</h5> Implement features based on the Should user stories to enhance the user experience and functionality beyond core requirements.</p>
<h5>Associated Pass Criteria</h5>
<ul>
<li>LO1.1: Front-End Design: Design and implement advanced features using Bootstrap or custom CSS, ensuring responsive and accessible design.</li>
<li>LO1.2: User Experience: Ensure additional content and features are organized using UX principles for an intuitive user experience.</li>
</ul>
<h5>Expected Performance (Do's)</h5>
<ul>
<li><input type="checkbox" class="form-check-input" id="task7Do1"> Implement advanced features such as a responsive image gallery, interactive sections, or animations using Bootstrap components or custom CSS.</li>
<li><input type="checkbox" class="form-check-input" id="task7Do2"> Maintain consistent color schemes, font styles, and image usage while ensuring accessibility.</li>
</ul>
<h5>Documentation Task</h5>
<ul>
<li><input type="checkbox" class="form-check-input" id="doc12"> In bullet points, describe the Should user story features implemented and how they enhance the user experience.</li>
<li><input type="checkbox" class="form-check-input" id="doc13"> AI Reflection: "GitHub Copilot helped generate CSS for animations, though manual adjustments were needed to ensure smooth transitions."</li>
</ul>
<h5>Areas for Improvement (Don'ts)</h5>
<ul>
<li>Avoid overcomplicating the Should features, which could lead to inconsistent or cluttered designs.</li>
<li>Neglecting to test advanced features can result in bugs or poor performance.</li>
</ul>
</div>
</div>
</div>
<!-- Task 8 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingTask8">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTask8" aria-expanded="false" aria-controls="collapseTask8">
Task 8: Final Documentation (1 hour)
</button>
</h2>
<div id="collapseTask8" class="accordion-collapse collapse" aria-labelledby="headingTask8">
<div class="accordion-body">
<p><h5>Objective:</h5> Finalize the README.md by ensuring all sections are complete and properly documented. Keep documentation concise, but include screenshots and descriptions of the website’s features and deployment steps.</p>
<h5>Associated Pass Criteria</h5>
<ul>
<li>LO4.1: Documentation: Write a concise README.md file explaining the application’s purpose, user value, and deployment procedure.</li>
<li>LO4.2: Code Organization and Readability: Ensure that the HTML, CSS, and any other code are well-organized and commented, supporting future maintainability.</li>
</ul>
<h5>Expected Performance (Do's)</h5>
<ul>
<li><input type="checkbox" class="form-check-input" id="task8Do1"> Complete the README.md, ensuring it includes sections such as Introduction, User Stories, Features, Screenshots, Technologies Used, and Deployment Instructions.</li>
<li><input type="checkbox" class="form-check-input" id="task8Do2"> Provide concise screenshots of key features, explaining how they improve the user experience.</li>
</ul>
<h5>AI Reflection Task</h5>
<ul>
<li><input type="checkbox" class="form-check-input" id="doc14"> Include a section in the README reflecting on AI tool usage in a few sentences: "GitHub Copilot helped optimize the CSS for advanced features like the image gallery. Some tweaks were necessary to match the design requirements."</li>
</ul>
<h5>Areas for Improvement (Don'ts)</h5>
<ul>
<li>Incomplete or unclear documentation can lead to confusion for future developers or assessors.</li>
<li>Failing to attribute external code sources can lead to academic integrity issues.</li>
</ul>
</div>
</div>
</div>
<!-- What Should Be in Place -->
<div class="mt-4">
<h5>What Should Be in Place By The End Of This Phase?</h5>
<ul>
<li>Should features implemented and functioning correctly, enhancing user experience and engagement.</li>
<li>A complete, concise README.md file documenting the application’s purpose, user stories, features, and AI tool usage.</li>
<li>Screenshots and brief explanations of key features.</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Phase 4 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Phase 4: Final Testing, Debugging & Deployment (2 hours)
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour">
<div class="accordion-body">
<p><h5>Objective:</h5> Conduct final testing and debugging to ensure the website is fully functional before deployment. Deploy the project to GitHub Pages and document the deployment process in the README. Use AI tools for debugging and quality checks.</p>
<!-- Task 9 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingTask9">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTask9" aria-expanded="false" aria-controls="collapseTask9">
Task 9: Final Testing & Debugging (1 hour)
</button>
</h2>
<div id="collapseTask9" class="accordion-collapse collapse" aria-labelledby="headingTask9">
<div class="accordion-body">
<p><h5>Objective:</h5> Conduct thorough testing of the website to identify any remaining issues. Use AI tools to assist in debugging and ensuring the site is functional and accessible across different devices.</p>
<h5>Associated Pass Criteria</h5>
<ul>
<li>LO2.1: Code Validation: Ensure HTML and CSS code passes validation using W3C and Jigsaw validators without significant issues.</li>
<li>LO2.2: Responsive Design and Navigation: Verify that the layout maintains its integrity across devices and screen sizes, with intuitive navigation.</li>
</ul>
<h5>Expected Performance (Do's)</h5>
<ul>
<li><input type="checkbox" class="form-check-input" id="task9Do1"> Perform comprehensive testing using developer tools (e.g., Chrome DevTools) to ensure functionality across various devices.</li>
<li><input type="checkbox" class="form-check-input" id="task9Do2"> Validate HTML and CSS using W3C and Jigsaw validators, ensuring no major issues.</li>
<li><input type="checkbox" class="form-check-input" id="task9Do3"> Use GitHub Copilot to identify and fix any layout or code issues efficiently.</li>
</ul>
<h5>Documentation Task</h5>
<ul>
<li><input type="checkbox" class="form-check-input" id="doc15"> Document testing results briefly in the README (1-2 sentences), noting any major issues that were identified and fixed.</li>
<li><input type="checkbox" class="form-check-input" id="doc16"> AI Reflection: "GitHub Copilot helped identify layout inconsistencies across screen sizes, which were fixed before final deployment."</li>
</ul>
<h5>Areas for Improvement (Don'ts)</h5>
<ul>
<li>Skipping validation may result in significant errors affecting site functionality.</li>
<li>Failing to test the site on multiple devices can lead to layout issues on mobile or tablets.</li>
</ul>
</div>
</div>
</div>
<!-- Task 10 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingTask10">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTask10" aria-expanded="false" aria-controls="collapseTask10">
Task 10: Deployment (1 hour)
</button>
</h2>
<div id="collapseTask10" class="accordion-collapse collapse" aria-labelledby="headingTask10">
<div class="accordion-body">
<p><h5>Objective:</h5> Deploy the website to GitHub Pages, ensuring the live version matches the development version. Document the deployment process in the README and reflect on AI tools' role in this stage.</p>
<h5>Associated Pass Criteria</h5>
<ul>
<li>LO3.1: Cloud Deployment: Deploy the website successfully to GitHub Pages with no discrepancies between the development and live versions.</li>
<li>LO5.4: Document AI’s role in the development process: Reflect on how AI tools (e.g., GitHub Copilot) helped streamline deployment and provided useful suggestions for code cleanup.</li>
</ul>
<h5>Expected Performance (Do's)</h5>
<ul>
<li><input type="checkbox" class="form-check-input" id="task10Do1"> Deploy the website to GitHub Pages successfully, ensuring the live version matches the development version.</li>
<li><input type="checkbox" class="form-check-input" id="task10Do2"> Verify that all features, navigation, and interactive elements work correctly post-deployment.</li>
<li><input type="checkbox" class="form-check-input" id="task10Do3"> Remove any commented-out code and unused files before final deployment.</li>
<li><input type="checkbox" class="form-check-input" id="task10Do4"> Provide brief documentation of the deployment process in the README, ensuring clear instructions on how to deploy and use the site.</li>
</ul>
<h5>AI Reflection Task</h5>
<ul>
<li><input type="checkbox" class="form-check-input" id="doc17"> Briefly reflect on how AI tools assisted in the deployment process. Example: "GitHub Copilot provided useful suggestions for cleaning up the code before deployment, which improved the overall project quality."</li>
</ul>
<h5>Areas for Improvement (Don'ts)</h5>
<ul>
<li>Failing to check internal links and interactive elements post-deployment could lead to a broken user experience.</li>
<li>Deploying with unused code or incomplete elements will affect the overall quality of the project.</li>
</ul>
</div>
</div>
</div>
<!-- What Should Be in Place -->
<div class="mt-4">
<h5>What Should Be in Place By The End Of This Phase?</h5>
<ul>
<li>The website successfully deployed to GitHub Pages, fully functional and responsive across devices.</li>
<li>Clean and optimized code with no commented-out or unused sections.</li>
<li>A README.md file that briefly documents the deployment process and includes reflections on the use of AI tools.</li>
</ul>
</div>