-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathHTML-CSS-Project-1-Implementati0on-Guide-Dynamic.html
521 lines (489 loc) · 33.1 KB
/
HTML-CSS-Project-1-Implementati0on-Guide-Dynamic.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project Implementation Guide</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* General Styling */
body {
font-family: Arial, sans-serif;
}
h1, h2, h3 {
color: #333;
}
h1 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}
h2 {
font-size: 2rem;
margin-top: 1.5rem;
margin-bottom: 1rem;
}
h3 {
font-size: 1.75rem;
margin-bottom: 1rem;
}
/* Progress Bar */
.progress {
height: 30px;
background-color: #f0f0f0;
border-radius: 10px;
}
.progress-bar {
font-weight: bold;
background-color: #FF4A1E;
}
/* Table Header Styling */
table thead {
background-color: #FF4A1E; /* Matching the progress bar color */
color: white;
}
/* Checkbox Styling */
.form-check-input {
width: 20px;
height: 20px;
margin-right: 10px;
accent-color: #FF4A1E;
border: 2px solid #FF4A1E;
}
.form-check-input:checked {
background-color: #FF4A1E;
border-color: #FF4A1E;
}
/* Task Title Styling */
.accordion-button {
background-color: #007bff !important;
color: white !important;
font-weight: bold !important;
border-radius: 5px !important;
padding: 15px !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
text-align: left !important;
transition: background-color 0.3s ease, color 0.3s ease !important;
cursor: pointer !important;
display: block !important;
width: 100% !important;
border: none !important;
}
.accordion-button:not(.collapsed) {
background-color: #0056b3 !important;
color: white !important;
}
.accordion-button:hover {
background-color: #0056b3 !important;
color: white !important;
text-decoration: none !important;
}
.accordion-button:focus {
box-shadow: none !important;
}
/* Remove default arrow on the accordion button */
.accordion-button::after {
display: none !important;
}
.accordion-button.collapsed {
color: white !important;
background-color: #007bff !important;
}
.accordion-button.collapsed:hover {
background-color: #0056b3 !important;
}
.accordion-body {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="container mt-5">
<h1 class="mb-4">Project Implementation Guide</h1>
<h2>Rationale for Phased Approach</h2>
<p>The phased approach to project implementation is designed to ensure a structured, manageable, and systematic process for developing a website project. By dividing the project into distinct phases, you can focus on specific tasks and objectives, making it easier to track progress, identify issues, and achieve high-quality results. This methodical approach allows for iterative development, regular testing, and refinement, ensuring that the final product meets all specified requirements and standards.</p>
<h2>Allocated Project Time: 14 hours</h2>
<h2>Health and Well-Being Guidance</h2>
<p>Given the allocated project time of 14 hours, 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>
<ol>
<li><strong>Manage Your Time Wisely</strong>
<ul>
<li>Create a Realistic Schedule: Break down the 14 hours into focused work sessions (e.g., 2-hour blocks) with short breaks in between. Prioritize 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 maximize 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>Optimize 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 14-hour 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. Prioritize 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>
</ol>
<p>By incorporating these strategies into your 14-hour project, 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>
<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>
<table class="table table-bordered">
<thead>
<tr>
<th>Phase</th>
<th>Tasks</th>
<th>Associated Pass Criteria</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3"><strong>Phase 1: Ideation & Initial Setup (3 hours)</strong></td>
<td>
<button class="btn btn-link p-0" type="button" data-bs-toggle="collapse" data-bs-target="#task1Details" aria-expanded="false">
Task 1: Ideation and User Story Definition (1 hour)
</button>
<div id="task1Details" class="collapse">
<p><strong>Objective:</strong> Brainstorm and refine project ideas, define user stories that capture the essential features and functionality, and document these stories in the README. GitHub Copilot will be used to assist in drafting content and defining user stories more efficiently.</p>
<p><strong>Expected Performance (Do's):</strong></p>
<ul>
<li><input type="checkbox" class="form-check-input" id="task1Do1"> A README.md file briefly documenting the application’s purpose, user value, and deployment steps.</li>
<li><input type="checkbox" class="form-check-input" id="task1Do2"> Include user stories and their acceptance criteria in the README.</li>
<li><input type="checkbox" class="form-check-input" id="task1Do3"> Prioritize the user stories into Must, Should, and Could.</li>
<li><input type="checkbox" class="form-check-input" id="task1Do4"> Utilize GitHub Copilot to effectively generate content for project goals, and prioritized user stories and their acceptance criteria.</li>
<li><input type="checkbox" class="form-check-input" id="task1Do5"> Ensure that the AI-generated ideation content is reviewed and refined to meet the project requirements.</li>
</ul>
<p><strong>Documentation Task:</strong></p>
<ul>
<li>Update the README: Add the project definition, prioritized user stories, and acceptance criteria to the README.</li>
<li>Reflect on AI Usage: Document the role of GitHub Copilot in assisting with ideation content creation.</li>
</ul>
<p><strong>Areas for Improvement (Don'ts):</strong></p>
<ul>
<li>Skip the documentation of user stories; clear planning is crucial for success.</li>
<li>Over-rely on AI-generated content without critical review.</li>
<li>Forget to include a brief overview of the project and its intended audience in the README.</li>
</ul>
</div>
</td>
<td>LO4.1, LO5.1</td>
</tr>
<tr>
<td>
<button class="btn btn-link p-0" type="button" data-bs-toggle="collapse" data-bs-target="#task2Details" aria-expanded="false">
Task 2: Initial Planning and Wireframing (1 hour)
</button>
<div id="task2Details" class="collapse">
<p><strong>Objective:</strong> Outline the website's structure and design through wireframes. This includes sketching key sections, choosing color schemes and fonts, and planning content placement. DALL-E or similar will be used to generate any image concepts that align with the project's theme and user stories.</p>
<p><strong>Expected Performance (Do's):</strong></p>
<ul>
<li><input type="checkbox" class="form-check-input" id="task2Do1"> Create wireframes that reflect a cohesive structure and clear information hierarchy.</li>
<li><input type="checkbox" class="form-check-input" id="task2Do2"> Ensure design choices adhere to accessibility standards, including appropriate color contrast, image consistency, and alt-text considerations for non-text elements.</li>
<li><input type="checkbox" class="form-check-input" id="task2Do3"> Leverage DALL-E to generate any image concepts that enhance the visual design and align with the overall project theme.</li>
</ul>
<p><strong>Documentation Task:</strong></p>
<ul>
<li>Document Design Decisions: Record your design decisions, including wireframes, color schemes, fonts, layout, and the use of DALL-E-generated images in the README.</li>
<li>Reflect on AI Usage: Include a very brief reflection on the effectiveness of using AI, noting both successes and any challenges encountered.</li>
</ul>
<p><strong>Areas for Improvement (Don'ts):</strong></p>
<ul>
<li>Start coding without a well-documented design plan.</li>
<li>Neglect accessibility standards when selecting colors, images, and fonts.</li>
<li>Over-rely on AI-generated images without ensuring they fit the project's specific needs.</li>
</ul>
</div>
</td>
<td>LO1.2, LO1.3, LO5.4</td>
</tr>
<tr>
<td>
<button class="btn btn-link p-0" type="button" data-bs-toggle="collapse" data-bs-target="#task3Details" aria-expanded="false">
Task 3: Environment Setup and Version Control (1 hour)
</button>
<div id="task3Details" class="collapse">
<p><strong>Objective:</strong> Set up the development environment, including creating a GitHub repository, organizing project files, and linking necessary resources like CSS, Bootstrap, and Google Fonts. This task will establish the foundation for efficient version control and project organization.</p>
<p><strong>Expected Performance (Do's):</strong></p>
<ul>
<li><input type="checkbox" class="form-check-input" id="task3Do1"> Establish a well-organized project structure, including clear directory organization and the proper linking of external resources.</li>
<li><input type="checkbox" class="form-check-input" id="task3Do2"> Use Git and GitHub effectively for version control, with regular, meaningful commits that reflect incremental progress.</li>
<li><input type="checkbox" class="form-check-input" id="task3Do3"> Test deploy your project with the basic structures in place.</li>
</ul>
<p><strong>Documentation Task:</strong></p>
<ul>
<li>Update the README: Document the setup process, including GitHub repository creation and file organization.</li>
</ul>
<p><strong>Areas for Improvement (Don'ts):</strong></p>
<ul>
<li>Avoid making large, infrequent commits that could obscure the development process.</li>
<li>Disregard standard directory structure practices.</li>
</ul>
</div>
</td>
<td>LO3.1</td>
</tr>
<tr>
<td rowspan="3"><strong>Phase 2: Must User Stories Implementation & Testing (7 hours)</strong></td>
<td>
<button class="btn btn-link p-0" type="button" data-bs-toggle="collapse" data-bs-target="#task4Details" aria-expanded="false">
Task 4: Must User Stories Implementation (4 hours)
</button>
<div id="task4Details" class="collapse">
<p><strong>Objective:</strong> Develop essential features based on prioritized Must user stories. GitHub Copilot will be used to assist in writing the HTML and CSS code, streamlining the process while ensuring the core functionality is robust and aligned with the project’s design goals.</p>
<p><strong>Expected Performance (Do's):</strong></p>
<ul>
<li><input type="checkbox" class="form-check-input" id="task4Do1"> Implement a functional, cohesive layout with a well-structured navigation menu.</li>
<li><input type="checkbox" class="form-check-input" id="task4Do2"> Adhere to accessibility guidelines, including correct color contrast and appropriate alt text for images.</li>
<li><input type="checkbox" class="form-check-input" id="task4Do3"> Validate HTML and CSS using W3C and Jigsaw validators.</li>
<li><input type="checkbox" class="form-check-input" id="task4Do4"> Use GitHub Copilot effectively to draft and refine code snippets.</li>
</ul>
<p><strong>Documentation Task:</strong></p>
<ul>
<li>Update the README: Briefly document the key Must user story features implemented and how GitHub Copilot contributed to the coding process.</li>
<li>Reflect on AI Usage: Include a brief reflection on the successes and challenges of using GitHub Copilot for coding.</li>
</ul>
<p><strong>Areas for Improvement (Don'ts):</strong></p>
<ul>
<li>Avoid implementing navigation or content without ensuring it is logically structured and accessible.</li>
<li>Do not ignore accessibility checks.</li>
<li>Avoid over-reliance on AI-generated code without testing and adjustments.</li>
</ul>
</div>
</td>
<td>LO1.1, LO1.3, LO2.1, LO5.1</td>
</tr>
<tr>
<td>
<button class="btn btn-link p-0" type="button" data-bs-toggle="collapse" data-bs-target="#task5Details" aria-expanded="false">
Task 5: Visual Progress & Testing (1 hour)
</button>
<div id="task5Details" class="collapse">
<p><strong>Objective:</strong> Test the website on different virtual devices (Chrome DevTools) to ensure visual and functional consistency. GitHub Copilot and other AI tools will be used to identify and fix issues during the testing process, ensuring the website is fully responsive and functional across different screen sizes.</p>
<p><strong>Expected Performance (Do's):</strong></p>
<ul>
<li><input type="checkbox" class="form-check-input" id="task5Do1"> Test the website across multiple (virtual) devices to verify consistent functionality and appearance.</li>
<li><input type="checkbox" class="form-check-input" id="task5Do2"> Apply CSS media queries effectively to adapt the layout for various screen sizes.</li>
<li><input type="checkbox" class="form-check-input" id="task5Do3"> Utilize GitHub Copilot to efficiently debug and refine the code.</li>
</ul>
<p><strong>Documentation Task:</strong></p>
<ul>
<li>Update the README: Document the testing results, any major adjustments made, and the role of AI tools in debugging.</li>
<li>Reflect on AI Usage: Include a brief reflection on the effectiveness of AI tools in debugging.</li>
</ul>
<p><strong>Areas for Improvement (Don'ts):</strong></p>
<ul>
<li>Skip testing, which could lead to unnoticed issues that affect user experience.</li>
<li>Ignore feedback or issues identified during testing, leading to a suboptimal final product.</li>
</ul>
</div>
</td>
<td>LO2.2, LO5.2</td>
</tr>
<tr>
<td>
<button class="btn btn-link p-0" type="button" data-bs-toggle="collapse" data-bs-target="#task6Details" aria-expanded="false">
Task 6: Adjustments & Refinement (2 hours)
</button>
<div id="task6Details" class="collapse">
<p><strong>Objective:</strong> Fine-tune the website to ensure consistency across all sections and functionality. AI tools will be used to optimize code and enhance performance where applicable.</p>
<p><strong>Expected Performance (Do's):</strong></p>
<ul>
<li><input type="checkbox" class="form-check-input" id="task6Do1"> Ensure a consistent design and functionality across all sections of the website.</li>
<li><input type="checkbox" class="form-check-input" id="task6Do2"> Optimize the HTML and CSS code to enhance performance and ensure a smooth, responsive user experience.</li>
<li><input type="checkbox" class="form-check-input" id="task6Do3"> Leverage AI tools to identify and implement optimization opportunities.</li>
</ul>
<p><strong>Documentation Task:</strong></p>
<ul>
<li>Reflect on AI Usage: Briefly reflect on how AI tools contributed to code optimization and overall performance improvements.</li>
</ul>
<p><strong>Areas for Improvement (Don'ts):</strong></p>
<ul>
<li>Assume that everything is functioning correctly without thorough testing and refinement.</li>
<li>Overlook opportunities for optimization, leading to potential performance issues.</li>
</ul>
</div>
</td>
<td>LO1.5, LO2.4, LO5.3</td>
</tr>
<tr>
<td rowspan="2"><strong>Phase 3: Should User Stories Implementation & Any Advanced Features (3 hours)</strong></td>
<td>
<button class="btn btn-link p-0" type="button" data-bs-toggle="collapse" data-bs-target="#task7Details" aria-expanded="false">
Task 7: Should User Stories Implementation (2 hours)
</button>
<div id="task7Details" class="collapse">
<p><strong>Objective:</strong> Refine the design based on the Should user stories. AI tools such as GitHub Copilot will assist in implementing complex features and refining the design.</p>
<p><strong>Expected Performance (Do's):</strong></p>
<ul>
<li><input type="checkbox" class="form-check-input" id="task7Do1"> Implement any Should user story features that enhance user engagement.</li>
<li><input type="checkbox" class="form-check-input" id="task7Do2"> Refine the site design using CSS media queries to maintain a responsive and adaptive layout.</li>
<li><input type="checkbox" class="form-check-input" id="task7Do3"> Leverage GitHub Copilot to streamline the coding process for advanced features.</li>
</ul>
<p><strong>Documentation Task:</strong></p>
<ul>
<li>Update the README: Document the implementation of Should user story features and their impact on the user experience.</li>
<li>Reflect on AI Usage: Briefly on the role of AI in assisting with the implementation of Should user story features and design refinements.</li>
</ul>
<p><strong>Areas for Improvement (Don'ts):</strong></p>
<ul>
<li>Overcomplicate Should features, making them difficult to use or inconsistent across devices.</li>
<li>Neglect to test Should features, leading to potential functionality issues post-deployment.</li>
</ul>
</div>
</td>
<td>LO1.2, LO5.1</td>
</tr>
<tr>
<td>
<button class="btn btn-link p-0" type="button" data-bs-toggle="collapse" data-bs-target="#task8Details" aria-expanded="false">
Task 8: Final Documentation (1 hour)
</button>
<div id="task8Details" class="collapse">
<p><strong>Objective:</strong> Finalize the README by reviewing all sections to ensure clarity and completeness. Include proper attribution of any external code (exclude code generated by GitHub Copilot). Ensure that the role of AI tools throughout the project is briefly but clearly documented.</p>
<p><strong>Expected Performance (Do's):</strong></p>
<ul>
<li><input type="checkbox" class="form-check-input" id="task8Do1"> Complete all sections of the README with clear and concise documentation.</li>
<li><input type="checkbox" class="form-check-input" id="task8Do2"> Properly attribute any external code sources (other than GitHub Copilot).</li>
<li><input type="checkbox" class="form-check-input" id="task8Do3"> Provide a brief account of how AI tools were used throughout the development process.</li>
</ul>
<p><strong>Documentation Task:</strong></p>
<ul>
<li>Update the README: Ensure all sections of the README are completed, including any code attributions, and a reflection on the use of AI tools.</li>
</ul>
<p><strong>Areas for Improvement (Don'ts):</strong></p>
<ul>
<li>Leave sections of the README incomplete or unclear.</li>
</ul>
</div>
</td>
<td>LO4.1, LO4.2, LO4.3, LO5.4</td>
</tr>
<tr>
<td rowspan="2"><strong>Phase 4: Final Testing, Debugging & Deployment (1 hour)</strong></td>
<td>
<button class="btn btn-link p-0" type="button" data-bs-toggle="collapse" data-bs-target="#task9Details" aria-expanded="false">
Task 9: Final Testing & Debugging (0.5 hour)
</button>
<div id="task9Details" class="collapse">
<p><strong>Objective:</strong> Conduct a thorough test of the website to identify and fix any remaining issues before deployment.</p>
<p><strong>Expected Performance (Do's):</strong></p>
<ul>
<li><input type="checkbox" class="form-check-input" id="task9Do1"> Perform comprehensive testing to ensure the website functions correctly across all devices and browsers.</li>
<li><input type="checkbox" class="form-check-input" id="task9Do2"> Use AI tools to identify and resolve any final issues.</li>
</ul>
<p><strong>Documentation Task:</strong></p>
<ul>
<li>Update the README: Document the final testing results and any changes made before deployment.</li>
</ul>
<p><strong>Areas for Improvement (Don'ts):</strong></p>
<ul>
<li>Overlook any errors or issues identified during the final testing.</li>
</ul>
</div>
</td>
<td>LO2.1, LO5.2</td>
</tr>
<tr>
<td>
<button class="btn btn-link p-0" type="button" data-bs-toggle="collapse" data-bs-target="#task10Details" aria-expanded="false">
Task 10: Deployment (0.5 hour)
</button>
<div id="task10Details" class="collapse">
<p><strong>Objective:</strong> Deploy the website to GitHub Pages, ensuring all features and links work correctly. Briefly document the deployment process in the README, and reflect on the role of AI in assisting with deployment.</p>
<p><strong>Expected Performance (Do's):</strong></p>
<ul>
<li><input type="checkbox" class="form-check-input" id="task10Do1"> Follow deployment instructions carefully to ensure a smooth and successful process.</li>
<li><input type="checkbox" class="form-check-input" id="task10Do2"> Test the live site to confirm that all features, links, and interactive elements function as expected.</li>
<li><input type="checkbox" class="form-check-input" id="task10Do3"> Briefly and clearly document the deployment process in the README.</li>
<li><input type="checkbox" class="form-check-input" id="task10Do4"> Reflect on any role AI tools played in assisting with the deployment.</li>
</ul>
<p><strong>Documentation Task:</strong></p>
<ul>
<li>Update the README: Document deployment, major testing results, and any AI tool usage in the README.</li>
<li>Reflect on AI Usage: Update a final reflection on how AI tools contributed to the deployment process.</li>
</ul>
<p><strong>Areas for Improvement (Don'ts):</strong></p>
<ul>
<li>Overlook critical deployment steps, which could cause the website to malfunction once live.</li>
<li>Fail to test the live site thoroughly, leading to unanticipated issues after deployment.</li>
</ul>
</div>
</td>
<td>LO3.1, LO4.1, LO5.4</td>
</tr>
</tbody>
</table>
</div>
<script>
// Initialize progress
function updateProgress() {
const totalCheckboxes = document.querySelectorAll('input[type="checkbox"]').length;
const checkedCheckboxes = document.querySelectorAll('input[type="checkbox"]:checked').length;
const progress = Math.round((checkedCheckboxes / totalCheckboxes) * 100);
const progressBar = document.getElementById('progressBar');
progressBar.style.width = progress + '%';
progressBar.setAttribute('aria-valuenow', progress);
progressBar.textContent = progress + '%';
}
// Save checkbox state to localStorage
function saveCheckboxState(id, checked) {
localStorage.setItem(id, checked);
}
// Load checkbox state from localStorage
function loadCheckboxState() {
document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
const checked = localStorage.getItem(checkbox.id) === 'true';
checkbox.checked = checked;
});
updateProgress();
}
// Event listener for checkbox changes
document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
checkbox.addEventListener('change', function () {
saveCheckboxState(this.id, this.checked);
updateProgress();
});
});
// Load the state when the page loads
window.onload = function () {
loadCheckboxState();
};
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>