diff --git a/HTML-CSS-Project-1-Implementati0on-Guide-Dynamic.html b/HTML-CSS-Project-1-Implementati0on-Guide-Dynamic.html index a00135b..4b475e0 100644 --- a/HTML-CSS-Project-1-Implementati0on-Guide-Dynamic.html +++ b/HTML-CSS-Project-1-Implementati0on-Guide-Dynamic.html @@ -9,506 +9,295 @@

Project Implementation Guide

- -

Rationale for Phased Approach

-

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.

- -

Allocated Project Time: 14 hours

- -

Health and Well-Being Guidance

-

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:

- -
-
-

- -

-
-
-

What’s the goal of this phase?

-

The goal of this phase is to lay a solid foundation for the project by defining its purpose, audience, and design. This involves brainstorming ideas, creating user stories, and setting up the project environment. Learners will utilize AI tools such as GitHub Copilot for ideation and content generation, and DALL-E for image creation. Minimal documentation will support these tasks, ensuring that AI’s role in the project is recorded.

- -
-
-

- -

-
-
-
Objective:
-

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.

- - - -
Expected Performance (Do's):
-
    -
  • A README.md file briefly documenting the application’s purpose, user value, and deployment steps.
    • -
  • Include user stories and their acceptance criteria in the README.
    • -
  • Prioritize the user stories into Must, Should, and Could.
    • -
  • Utilize GitHub Copilot to effectively generate content for project goals, and prioritized user stories and their acceptance criteria.
    • -
  • Ensure that the AI-generated ideation content is reviewed and refined to meet the project requirements.
    • -
- -
Documentation Task:
-
    -
  • Update the README: Add the project definition, prioritized user stories, and acceptance criteria to the README.
    • -
  • Reflect on AI Usage: Document the role of GitHub Copilot in assisting with ideation content creation.
    • -
- -
Areas for Improvement (Don'ts):
-
    -
  • Skip the documentation of user stories; clear planning is crucial for success.
    • -
  • Over-rely on AI-generated content without critical review.
    • -
  • Forget to include a brief overview of the project and its intended audience in the README.
    • -
-
-
-
-
-

- -

-
-
-
Objective:
-

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.

- - - -
Expected Performance (Do's):
-
    -
  • Create wireframes that reflect a cohesive structure and clear information hierarchy.
    • -
  • Ensure design choices adhere to accessibility standards.
    • -
  • Leverage DALL-E to generate any image concepts that enhance the visual design.
    • -
- -
Documentation Task:
-
    -
  • Document Design Decisions: Record design decisions, including wireframes, color schemes, fonts, layout, and the use of DALL-E-generated images in the README.
    • -
  • Reflect on AI Usage: Include a brief reflection on the effectiveness of using AI.
    • -
- -
Areas for Improvement (Don'ts):
-
    -
  • Start coding without a well-documented design plan.
    • -
  • Neglect accessibility standards when selecting colors, images, and fonts.
    • -
  • Over-rely on AI-generated images without ensuring they fit the project's specific needs.
    • -
-
-
-
-
-

- -

-
-
-
Objective:
-

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.

- - - -
Expected Performance (Do's):
-
    -
  • Establish a well-organized project structure, including clear directory organization and the proper linking of external resources.
    • -
  • Use Git and GitHub effectively for version control, with regular, meaningful commits.
    • -
  • Test deploy your project with the basic structures in place.
    • -
- -
Documentation Task:
-
    -
  • Update the README: Document the setup process, including GitHub repository creation and file organization.
    • -
- -
Areas for Improvement (Don'ts):
-
    -
  • Avoid making large, infrequent commits that could obscure the development process.
    • -
  • Disregard standard directory structure practices.
    • -
-
-
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PhaseTasksAssociated Pass Criteria
Phase 1: Ideation & Initial Setup (3 hours) + +
+

Objective: 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.

+

Expected Performance (Do's):

+
    +
  • A README.md file briefly documenting the application’s purpose, user value, and deployment steps.
    • +
  • Include user stories and their acceptance criteria in the README.
    • +
  • Prioritize the user stories into Must, Should, and Could.
    • +
  • Utilize GitHub Copilot to effectively generate content for project goals, and prioritized user stories and their acceptance criteria.
    • +
  • Ensure that the AI-generated ideation content is reviewed and refined to meet the project requirements.
    • +
+

Documentation Task:

+
    +
  • Update the README: Add the project definition, prioritized user stories, and acceptance criteria to the README.
    • +
  • Reflect on AI Usage: Document the role of GitHub Copilot in assisting with ideation content creation.
    • +
+

Areas for Improvement (Don'ts):

+
    +
  • Skip the documentation of user stories; clear planning is crucial for success.
    • +
  • Over-rely on AI-generated content without critical review.
    • +
  • Forget to include a brief overview of the project and its intended audience in the README.
    • +
- -
What Should Be in Place By The End Of This Phase?
-
    -
  • A clear understanding of the project's purpose, user stories, and target audience, documented in the README.
    • -
  • Completed wireframes, color schemes, fonts, and design decisions documented in the README, including the use of AI-generated images.
    • -
  • A fully set up development environment with version control (GitHub repository) in place.
    • -
- - - - -
-

- -

-
-
-

What’s the goal of this phase?

-

The goal of this phase is to implement the core functionality of the website as specified in the Must user stories. This includes coding essential features, validating the code for accuracy and reliability, and ensuring that both the visual design and functional elements align with the initial project plans. GitHub Copilot will be leveraged to accelerate the development process.

- -
-
-

- -

-
-
-
Objective:
-

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.

- - - -
Expected Performance (Do's):
-
    -
  • Implement a functional, cohesive layout with a well-structured navigation menu.
    • -
  • Adhere to accessibility guidelines, including correct color contrast and appropriate alt text for images.
    • -
  • Validate HTML and CSS using W3C and Jigsaw validators.
    • -
  • Use GitHub Copilot effectively to draft and refine code snippets.
    • -
- -
Documentation Task:
-
    -
  • Update the README: Briefly document the key Must user story features implemented and how GitHub Copilot contributed to the coding process.
    • -
  • Reflect on AI Usage: Include a brief reflection on the successes and challenges of using GitHub Copilot for coding.
    • -
- -
Areas for Improvement (Don'ts):
-
    -
  • Avoid implementing navigation or content without ensuring it is logically structured and accessible.
    • -
  • Do not ignore accessibility checks.
    • -
  • Avoid over-reliance on AI-generated code without testing and adjustments.
    • -
-
-
-
-
-

- -

-
-
-
Objective:
-

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.

- - - -
Expected Performance (Do's):
-
    -
  • Test the website across multiple (virtual) devices to verify consistent functionality and appearance.
    • -
  • Apply CSS media queries effectively to adapt the layout for various screen sizes.
    • -
  • Utilize GitHub Copilot to efficiently debug and refine the code.
    • -
- -
Documentation Task:
-
    -
  • Update the README: Document the testing results, any major adjustments made, and the role of AI tools in debugging.
    • -
  • Reflect on AI Usage: Include a brief reflection on the effectiveness of AI tools in debugging.
    • -
- -
Areas for Improvement (Don'ts):
-
    -
  • Skip testing, which could lead to unnoticed issues that affect user experience.
    • -
  • Ignore feedback or issues identified during testing, leading to a suboptimal final product.
    • -
-
-
-
-
-

- -

-
-
-
Objective:
-

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.

- - - -
Expected Performance (Do's):
-
    -
  • Ensure a consistent design and functionality across all sections of the website.
    • -
  • Optimize the HTML and CSS code to enhance performance and ensure a smooth, responsive user experience.
    • -
  • Leverage AI tools to identify and implement optimization opportunities.
    • -
- -
Documentation Task:
-
    -
  • Reflect on AI Usage: Briefly reflect on how AI tools contributed to code optimization and overall performance improvements.
    • -
- -
Areas for Improvement (Don'ts):
-
    -
  • Assume that everything is functioning correctly without thorough testing and refinement.
    • -
  • Overlook opportunities for optimization, leading to potential performance issues.
    • -
-
-
-
+
LO4.1, LO5.1
+ +
+

Objective: 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.

+

Expected Performance (Do's):

+
    +
  • Create wireframes that reflect a cohesive structure and clear information hierarchy.
    • +
  • Ensure design choices adhere to accessibility standards, including appropriate color contrast, image consistency, and alt-text considerations for non-text elements.
    • +
  • Leverage DALL-E to generate any image concepts that enhance the visual design and align with the overall project theme.
    • +
+

Documentation Task:

+
    +
  • Document Design Decisions: Record your design decisions, including wireframes, color schemes, fonts, layout, and the use of DALL-E-generated images in the README.
    • +
  • Reflect on AI Usage: Include a very brief reflection on the effectiveness of using AI, noting both successes and any challenges encountered.
    • +
+

Areas for Improvement (Don'ts):

+
    +
  • Start coding without a well-documented design plan.
    • +
  • Neglect accessibility standards when selecting colors, images, and fonts.
    • +
  • Over-rely on AI-generated images without ensuring they fit the project's specific needs.
    • +
- -
What Should Be in Place By The End Of This Phase?
-
    -
  • Core Must features implemented and validated with no major errors.
    • -
  • A responsive and functional website tested across multiple devices.
    • -
  • Necessary refinements are made to ensure a polished and consistent user experience.
    • -
- - - - -
-

- -

-
-
-

What’s the goal of this phase?

-

In this phase, advanced features and enhancements are added based on Should user stories. This includes refining the design to ensure that the project provides a user-centered, intuitive experience where the objectives of the site are obvious. AI tools will be used to assist in these advanced tasks.

- -
-
-

- -

-
-
-
Objective:
-

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.

- - - -
Expected Performance (Do's):
-
    -
  • Implement any Should user story features that enhance user engagement.
    • -
  • Refine the site design using CSS media queries to maintain a responsive and adaptive layout.
    • -
  • Leverage GitHub Copilot to streamline the coding process for advanced features.
    • -
- -
Documentation Task:
-
    -
  • Update the README: Document the implementation of Should user story features and their impact on the user experience.
    • -
  • Reflect on AI Usage: Briefly on the role of AI in assisting with the implementation of Should user story features and design refinements.
    • -
- -
Areas for Improvement (Don'ts):
-
    -
  • Overcomplicate Should features, making them difficult to use or inconsistent across devices.
    • -
  • Neglect to test Should features, leading to potential functionality issues post-deployment.
    • -
-
-
-
-
-

- -

-
-
-
Objective:
-

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.

- - -
  • LO4.1: Write a concise README.md file explaining the application’s purpose, user value, and deployment procedure.
    • -
  • LO4.2: Insert screenshots of the project features with brief descriptions and user value explanations.
    • -
  • LO4.3: Attribute all code from external sources (other than GitHub Copilot) to its source.
    • -
  • LO5.4: Document AI’s role in the development process and how it improved or streamlined the workflow.
    • - - -
    Expected Performance (Do's):
    -
      -
    • Complete all sections of the README with clear and concise documentation.
      • -
    • Properly attribute any external code sources (other than GitHub Copilot).
      • -
    • Provide a brief account of how AI tools were used throughout the development process.
      • -
    - -
    Documentation Task:
    -
      -
    • Update the README: Ensure all sections of the README are completed, including any code attributions, and a reflection on the use of AI tools.
      • -
    - -
    Areas for Improvement (Don'ts):
    -
      -
    • Leave sections of the README incomplete or unclear.
      • -
    -
    -
    -
    +
    		LO1.2, LO1.3, LO5.4
    + +
    +

    Objective: 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.

    +

    Expected Performance (Do's):

    +
      +
    • Establish a well-organized project structure, including clear directory organization and the proper linking of external resources.
      • +
    • Use Git and GitHub effectively for version control, with regular, meaningful commits that reflect incremental progress.
      • +
    • Test deploy your project with the basic structures in place.
      • +
    +

    Documentation Task:

    +
      +
    • Update the README: Document the setup process, including GitHub repository creation and file organization.
      • +
    +

    Areas for Improvement (Don'ts):

    +
      +
    • Avoid making large, infrequent commits that could obscure the development process.
      • +
    • Disregard standard directory structure practices.
      • +
    - -
    What Should Be in Place By The End Of This Phase?
    -
      -
    • Advanced features implemented and tested.
      • -
    • Project documentation, including any external attributions, as well as reflections on the use of AI tools.
      • -
    - - - - -
    -

    - -

    -
    -
    -

    What’s the goal of this phase?

    -

    The final phase focuses on deploying the website. This includes final testing, debugging, and ensuring that the site is fully functional before going live. Proper documentation of the deployment process ensures future maintainability. AI tools will be used where applicable to support the final steps.

    - -
    -
    -

    - -

    -
    -
    -
    Objective:
    -

    Conduct a thorough test of the website to identify and fix any remaining issues before deployment.

    - - - -
    Expected Performance (Do's):
    -
      -
    • Perform comprehensive testing to ensure the website functions correctly across all devices and browsers.
      • -
    • Use AI tools to identify and resolve any final issues.
      • -
    - -
    Documentation Task:
    -
      -
    • Update the README: Document the final testing results and any changes made before deployment.
      • -
    - -
    Areas for Improvement (Don'ts):
    -
      -
    • Overlook any errors or issues identified during the final testing.
      • -
    -
    -
    -
    -
    -

    - -

    -
    -
    -
    Objective:
    -

    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.

    - - - -
    Expected Performance (Do's):
    -
      -
    • Follow deployment instructions carefully to ensure a smooth and successful process.
      • -
    • Test the live site to confirm that all features, links, and interactive elements function as expected.
      • -
    • Briefly and clearly document the deployment process in the README.
      • -
    • Reflect on any role AI tools played in assisting with the deployment.
      • -
    - -
    Documentation Task:
    -
      -
    • Update the README: Document deployment, major testing results, and any AI tool usage in the README.
      • -
    • Reflect on AI Usage: Update a final reflection on how AI tools contributed to the deployment process.
      • -
    - -
    Areas for Improvement (Don'ts):
    -
      -
    • Overlook critical deployment steps, which could cause the website to malfunction once live.
      • -
    • Fail to test the live site thoroughly, leading to unanticipated issues after deployment.
      • -
    -
    -
    -
    +
    		LO3.1
    Phase 2: Must User Stories Implementation & Testing (7 hours) + +
    +

    Objective: 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.

    +

    Expected Performance (Do's):

    +
      +
    • Implement a functional, cohesive layout with a well-structured navigation menu.
      • +
    • Adhere to accessibility guidelines, including correct color contrast and appropriate alt text for images.
      • +
    • Validate HTML and CSS using W3C and Jigsaw validators.
      • +
    • Use GitHub Copilot effectively to draft and refine code snippets.
      • +
    +

    Documentation Task:

    +
      +
    • Update the README: Briefly document the key Must user story features implemented and how GitHub Copilot contributed to the coding process.
      • +
    • Reflect on AI Usage: Include a brief reflection on the successes and challenges of using GitHub Copilot for coding.
      • +
    +

    Areas for Improvement (Don'ts):

    +
      +
    • Avoid implementing navigation or content without ensuring it is logically structured and accessible.
      • +
    • Do not ignore accessibility checks.
      • +
    • Avoid over-reliance on AI-generated code without testing and adjustments.
      • +
    - -
    What Should Be in Place By The End Of This Phase?
    -
      -
    • The website is successfully deployed and fully functional.
      • -
    • Clear and concise documentation is included in the README, along with a reflection on the use of AI tools throughout the project.
      • -
    - - - - +     		LO1.1, LO1.3, LO2.1, LO5.1
    + +
    +

    Objective: 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.

    +

    Expected Performance (Do's):

    +
      +
    • Test the website across multiple (virtual) devices to verify consistent functionality and appearance.
      • +
    • Apply CSS media queries effectively to adapt the layout for various screen sizes.
      • +
    • Utilize GitHub Copilot to efficiently debug and refine the code.
      • +
    +

    Documentation Task:

    +
      +
    • Update the README: Document the testing results, any major adjustments made, and the role of AI tools in debugging.
      • +
    • Reflect on AI Usage: Include a brief reflection on the effectiveness of AI tools in debugging.
      • +
    +

    Areas for Improvement (Don'ts):

    +
      +
    • Skip testing, which could lead to unnoticed issues that affect user experience.
      • +
    • Ignore feedback or issues identified during testing, leading to a suboptimal final product.
      • +
    +
    +     		LO2.2, LO5.2
    + +
    +

    Objective: 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.

    +

    Expected Performance (Do's):

    +
      +
    • Ensure a consistent design and functionality across all sections of the website.
      • +
    • Optimize the HTML and CSS code to enhance performance and ensure a smooth, responsive user experience.
      • +
    • Leverage AI tools to identify and implement optimization opportunities.
      • +
    +

    Documentation Task:

    +
      +
    • Reflect on AI Usage: Briefly reflect on how AI tools contributed to code optimization and overall performance improvements.
      • +
    +

    Areas for Improvement (Don'ts):

    +
      +
    • Assume that everything is functioning correctly without thorough testing and refinement.
      • +
    • Overlook opportunities for optimization, leading to potential performance issues.
      • +
    +
    +     		LO1.5, LO2.4, LO5.3
    Phase 3: Should User Stories Implementation & Any Advanced Features (3 hours) + +
    +

    Objective: 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.

    +

    Expected Performance (Do's):

    +
      +
    • Implement any Should user story features that enhance user engagement.
      • +
    • Refine the site design using CSS media queries to maintain a responsive and adaptive layout.
      • +
    • Leverage GitHub Copilot to streamline the coding process for advanced features.
      • +
    +

    Documentation Task:

    +
      +
    • Update the README: Document the implementation of Should user story features and their impact on the user experience.
      • +
    • Reflect on AI Usage: Briefly on the role of AI in assisting with the implementation of Should user story features and design refinements.
      • +
    +

    Areas for Improvement (Don'ts):

    +
      +
    • Overcomplicate Should features, making them difficult to use or inconsistent across devices.
      • +
    • Neglect to test Should features, leading to potential functionality issues post-deployment.
      • +
    +
    +     		LO1.2, LO5.1
    + +
    +

    Objective: 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.

    +

    Expected Performance (Do's):

    +
      +
    • Complete all sections of the README with clear and concise documentation.
      • +
    • Properly attribute any external code sources (other than GitHub Copilot).
      • +
    • Provide a brief account of how AI tools were used throughout the development process.
      • +
    +

    Documentation Task:

    +
      +
    • Update the README: Ensure all sections of the README are completed, including any code attributions, and a reflection on the use of AI tools.
      • +
    +

    Areas for Improvement (Don'ts):

    +
      +
    • Leave sections of the README incomplete or unclear.
      • +
    +
    +     		LO4.1, LO4.2, LO4.3, LO5.4
    Phase 4: Final Testing, Debugging & Deployment (1 hour) + +
    +

    Objective: Conduct a thorough test of the website to identify and fix any remaining issues before deployment.

    +

    Expected Performance (Do's):

    +
      +
    • Perform comprehensive testing to ensure the website functions correctly across all devices and browsers.
      • +
    • Use AI tools to identify and resolve any final issues.
      • +
    +

    Documentation Task:

    +
      +
    • Update the README: Document the final testing results and any changes made before deployment.
      • +
    +

    Areas for Improvement (Don'ts):

    +
      +
    • Overlook any errors or issues identified during the final testing.
      • +
    +
    +     		LO2.1, LO5.2
    + +
    +

    Objective: 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.

    +

    Expected Performance (Do's):

    +
      +
    • Follow deployment instructions carefully to ensure a smooth and successful process.
      • +
    • Test the live site to confirm that all features, links, and interactive elements function as expected.
      • +
    • Briefly and clearly document the deployment process in the README.
      • +
    • Reflect on any role AI tools played in assisting with the deployment.
      • +
    +

    Documentation Task:

    +
      +
    • Update the README: Document deployment, major testing results, and any AI tool usage in the README.
      • +
    • Reflect on AI Usage: Update a final reflection on how AI tools contributed to the deployment process.
      • +
    +

    Areas for Improvement (Don'ts):

    +
      +
    • Overlook critical deployment steps, which could cause the website to malfunction once live.
      • +
    • Fail to test the live site thoroughly, leading to unanticipated issues after deployment.
      • +
    +
    +     		LO3.1, LO4.1, LO5.4