Skip to content

Latest commit

 

History

History
489 lines (361 loc) · 23.9 KB

html-css-project-implementation-guide.md

File metadata and controls

489 lines (361 loc) · 23.9 KB

AI-Augmented Static Front End Project Implementation Guide


Introduction

Welcome to the AI-Augmented Static Front End Project Implementation Guide. This guide will help you navigate through the stages of your project, from planning and pre-implementation to final submission and retrospective analysis. You will be using AI tools like GitHub Copilot and DALL-E to enhance your development process. The guide is aligned with the detailed assessment rubric to ensure that you meet all the necessary criteria for a successful project.


Table of Contents

  1. Project Overview
  2. Pre-Implementation Artefacts (30%)
  3. Project Implementation (50%)
  4. Post-Implementation Review (20%)
  5. Mapped Learning Outcomes and Assessment Criteria
  6. Do's and Don'ts
  7. Phased Approach to the Project
  8. Sample Retrospective Report
  9. Plagiarism Guidelines for Learners

Project Overview

Your project involves creating a responsive web application using only HTML and CSS. You will document and implement user stories, use AI tools for coding and design, and manage your project using an Agile tool. The goal is to demonstrate your ability to develop high-quality web applications, utilize AI tools effectively, and follow best practices in software development.


Pre-Implementation Artefacts (30%)

Project Plan and User Stories (10%)

Related Learning Outcomes: LO1.1, LO1.6

  • What to Do:

    • Document and implement detailed user stories.
    • Organize user stories into categories with priorities.
    • Include clear and detailed acceptance criteria for each user story.

    Examples:

    • Do: "As a user, I want a homepage with a welcome message, an overview of services/products, and featured content." Acceptance criteria: "Homepage should include a header with a welcome message, a section for services/products with icons, and dynamically updated content."
    • Don't: "Create homepage" without any details or acceptance criteria.

Design Documentation (10%)

Related Learning Outcomes: LO1.12

  • What to Do:

    • Create detailed wireframes and UX design documentation.
    • Consider accessibility in your design.
    • Include notes on user interactions and navigation.

    Examples:

    • Do: Wireframes for each page (homepage, services/products, contact) with detailed notes on layout, navigation, and accessibility features like ARIA labels and keyboard navigation.
    • Don't: No wireframes or mockups submitted.

Version Control Setup (5%)

Related Learning Outcomes: LO1.8

  • What to Do:

    • Properly set up your GitHub repository.
    • Make regular commits documenting key stages of development.

    Examples:

    • Do: Main branch, development branch, and multiple feature branches with regular commits.
    • Don't: Only one commit for the initial setup.

AI Tool Usage Plan (5%)

Related Learning Outcomes: LO1.14, LO9

  • What to Do:

    • Develop a comprehensive plan for using AI tools like GitHub Copilot and DALL-E.
    • Clearly state the integration points and expected benefits.

    Examples:

    • Do: "Use GitHub Copilot for generating detailed user stories, HTML structure, and CSS enhancements. Use DALL-E for generating all required images, and leverage AI tools for code validation and accessibility checks."
    • Don't: No mention of AI tool usage in the project plan.

Project Implementation (50%)

Code Quality and Standards (15%)

Related Learning Outcomes: LO1.2, LO1.9, LO1.10, LO10

  • What to Do:

    • Ensure consistent indentation, meaningful naming conventions, and adherence to HTML5/CSS3 standards.
    • Write clean, readable, and maintainable code.

    Examples:

    • Do: Well-structured code with consistent indentation, descriptive names, and valid HTML/CSS.
    • Don't: Code with mixed indentation styles, non-descriptive variable names, and invalid HTML/CSS.

AI-Generated Code Integration (15%)

Related Learning Outcomes: LO11, LO9

  • What to Do:

    • Effectively integrate AI-generated code.
    • Critically assess and optimize the AI-generated code for your project.

    Examples:

    • Do: AI-generated code is seamlessly integrated, thoroughly reviewed, and optimized, with clear documentation of AI vs. human contributions.
    • Don't: Generated code not used or poorly integrated into the project.

Functional Implementation (20%)

Related Learning Outcomes: LO1.2, LO1.5

  • What to Do:

    • Ensure your application meets all user stories' acceptance criteria.
    • Implement all necessary features and ensure they are functional.

    Examples:

    • Do: Perfectly functional homepage with all required sections, interactive elements working smoothly, and excellent UI/UX.
    • Don't: Homepage missing key sections, broken links, or non-functional features.

User Experience Quality (10%)

Related Learning Outcomes: LO8

  • What to Do:

    • Ensure your application provides a high-quality user experience.
    • Focus on design aesthetics, usability, and responsiveness.

    Examples:

    • Do: Intuitive and appealing design with smooth navigation and responsive layout.
    • Don't: Cluttered or unappealing design with poor usability and responsiveness.

Post-Implementation Review (20%)

Final Project Submission (10%)

Related Learning Outcomes: LO1.8

  • What to Do:

    • Submit a complete and functional web application.
    • Ensure your source code repository is well-documented and includes a deployment link.

    Examples:

    • Do: Deployed web application with complete source code repository.
    • Don't: Project not deployed, source code repository incomplete.

Documentation (10%)

Related Learning Outcomes: LO1.12

  • What to Do:

    • Provide clear and concise project documentation.
    • Explain your design decisions, code structure, and deployment process.

    Examples:

    • Do: Detailed documentation explaining design decisions, code structure, and deployment process.
    • Don't: Missing or very brief documentation with no explanation of design decisions or code structure.

Retrospective Report (10%)

Related Learning Outcomes: LO8

  • What to Do:

    • Write a comprehensive retrospective report reflecting on your development process.
    • Include insights on successes, challenges, and proposed improvements.

    Examples:

    • Do: Comprehensive report with reflection on development process, analysis of successes and challenges, and proposed improvements.
    • Don't: No report or very brief summary without meaningful reflection.

Mapped Learning Outcomes and Assessment Criteria

  • LO1.1: Document and implement all User Stories and map them to the project within an Agile tool.
  • LO1.2: Implement custom HTML and CSS code to create a responsive Full-Stack application.
  • LO1.5: Use an Agile tool to manage the planning and implementation of all significant functionality.
  • LO1.6: Document and implement all User Stories and map them to the project goals.
  • LO1.8: Demonstrate and document the development process through a version control system.
  • LO1.9: Write code that meets minimum standards for readability.
  • LO1.10: Name files consistently and descriptively for cross-platform compatibility.
  • LO1.12: Document the UX design work, including wireframes, mockups, diagrams, and reasoning.
  • LO1.14: Implement AI-augmented enhancements to document the models and code.
  • LO8: Present a project solution for assessment evaluation, demonstrating resilience behaviours critical for software development.
  • LO9: Develop proficiency in AI-augmented web development.
  • LO10: Enhance code quality and problem-solving skills.
  • LO11: Critically assess and integrate AI-generated code.
  • LO12: Adapt to evolving web development trends.

Do's and Don'ts

Pre-Implementation Artefacts

  • Do:

    • Document detailed user stories with clear priorities and acceptance criteria.
    • Create thorough design documentation considering accessibility.
    • Properly set up your GitHub repository and make regular commits.
    • Develop a comprehensive AI tool usage plan with clear integration points.

    Examples:

    • Do: "As a user, I want a homepage with a welcome message, an overview of services/products, and featured content." Acceptance criteria: "Homepage should include a header with a welcome message, a section for services/products with icons, and dynamically updated content."
    • Do: Wireframes for each page (homepage, services/products, contact) with detailed notes on layout, navigation, and accessibility features like ARIA labels and keyboard navigation.
    • Do: Main branch, development branch, and multiple feature branches with regular commits.
    • Do: "Use GitHub Copilot for generating detailed user stories, HTML structure, and CSS enhancements. Use DALL-E for generating all required images, and leverage AI tools for code validation and accessibility checks."
  • Don't:

    • Submit generic user stories without specific tasks or acceptance criteria.
    • Neglect to create wireframes or mockups.
    • Set up a repository with minimal or poorly documented commits.
    • Have a missing or unclear AI tool usage plan.

    Examples:

    • Don't: "Create homepage" without any details or acceptance criteria.
    • Don't: No wireframes or mockups submitted.
    • Don't: Only one commit for the initial setup.
    • Don't: No mention of AI tool usage in the project plan.

Project Implementation

  • Do:

    • Maintain high code quality with consistent standards.
    • Effectively integrate AI-generated code, reviewing and optimizing it for your project.
    • Ensure all implemented features are functional and meet user stories' acceptance criteria.

    Examples:

    • Do: Well-structured code with consistent indentation, descriptive names, and valid HTML/CSS.
    • Do: AI-generated code is seamlessly integrated, thoroughly reviewed, and optimized, with clear documentation of AI vs. human contributions.
    • Do: Perfectly functional homepage with all required sections, interactive elements working smoothly, and excellent UI/UX.
  • Don't:

    • Submit poor-quality code with inconsistent standards.
    • Integrate AI-generated code without thorough review and optimization.
    • Have non-functional features or incomplete implementations.

    Examples:

    • Don't: Code with mixed indentation styles, non-descriptive variable names, and invalid HTML/CSS.
    • Don't: Generated code not used or poorly integrated into the project.
    • Don't: Homepage missing key sections, broken links, or non-functional features.

Post-Implementation Review

  • Do:

    • Submit a complete and functional web application with a well-documented source code repository.
    • Provide clear and concise documentation explaining your design decisions, code structure, and deployment process.
    • Write a comprehensive retrospective report reflecting on your development process, including insights on successes, challenges, and proposed improvements.

    Examples:

    • Do: Deployed web application with complete source code repository.
    • Do: Detailed documentation explaining design decisions, code structure, and deployment process.
    • Do: Comprehensive report with reflection on development process, analysis of successes and challenges, and proposed improvements.
  • Don't:

    • Submit incomplete projects or inadequate documentation.
    • Provide brief documentation that lacks explanation.
    • Write a superficial retrospective report without meaningful reflection.

    Examples:

    • Don't: Project not deployed, source code repository incomplete.
    • Don't: Missing or very brief documentation with no explanation of design decisions or code structure.
    • Don't: No report or very brief summary without meaningful reflection.

Phased Approach to the Project

To avoid last-minute panic and ensure a smooth project flow, follow this phased approach. You have 30 hours to complete the project, so plan accordingly.

Phase 1: Initial Planning (Hours 0-5)

  • Task: Define user stories, acceptance criteria, and project plan.

  • Output: Documented user stories and project plan.

  • Tools: Agile tool for planning, GitHub for version control setup.

  • Milestones:

    • User stories defined with priorities.
    • Project plan created and documented.

    Documentation Task:

    • Record user stories, acceptance criteria, and initial project plan.

Phase 2: Design and Documentation (Hours 5-8)

  • Task: Create wireframes and UX design documentation.

  • Output: Detailed wireframes, notes on layout, navigation, and accessibility.

  • Tools: Design software, GitHub for commits.

  • Milestones:

    • Wireframes for each page created.
    • UX design documentation completed.

    Documentation Task:

    • Update documentation with wireframes and UX design details.

Phase 3: Initial Implementation (Hours 8-20)

  • Task: Start coding the basic structure of the application using HTML and CSS.

  • Output: Initial HTML structure and CSS styles.

  • Tools: GitHub Copilot for code generation, IDE for coding.

  • Milestones:

    • Basic HTML structure created.
    • Initial CSS styles applied.

    Documentation Task:

    • Document the initial code structure and styling decisions.

Phase 4: AI Integration and Enhancement (Hours 20-27)

  • Task: Integrate AI-generated code and enhance design.

  • Output: Enhanced HTML/CSS code with AI-generated improvements.

  • Tools: GitHub Copilot, DALL-E.

  • Milestones:

    • AI-generated code integrated and optimized.
    • Design enhancements completed.

    Documentation Task:

    • Record the integration of AI-generated code and enhancements made.

Phase 5: Functional Implementation and Testing (Hours 27-29)

  • Task: Complete all functional elements and test the application.

  • Output: Fully functional web application.

  • Tools: Browsers for testing, GitHub for commits.

  • Milestones:

    • All features implemented and tested.
    • Functional application verified.

    Documentation Task:

    • Update documentation with functional implementation details and testing outcomes.

Phase 6: Final Review and Submission (Hours 29-30)

  • Task: Finalize documentation, write retrospective report, and submit the project.

  • Output: Complete documentation, retrospective report, and final project submission.

  • Tools: GitHub for final commits, deployment platform.

  • Milestones:

    • Documentation and retrospective report completed.
    • Project deployed and submitted.

    Documentation Task:

    • Complete the final project documentation and write the retrospective report.

Continuous Documentation

Ensure that you continuously document your progress throughout the project phases. This documentation should not be overly onerous but should include the following sections:

  • Project Overview
  • Project Scope and Objectives
  • User Stories
  • Wireframes
  • UX Design
  • Version Control Practices
  • AI Tool Usage
  • Code Quality and Standards
  • Functional Implementation
  • Final Project Submission
  • Retrospective

Sample Retrospective Report

Retrospective Report


Reflection on Development Process

Successes

  • Effective Use of AI Tools:

    • GitHub Copilot significantly sped up the initial coding process by providing useful HTML and CSS snippets.
    • DALL-E generated high-quality images that enhanced the visual appeal of the website.
  • Accessibility:

    • Implemented ARIA labels and keyboard navigation, making the website accessible to a wider audience.
  • Responsive Design:

    • The website layout adapted well to different screen sizes, ensuring a good user experience on both desktop and mobile devices.

Challenges

  • Integration of AI-Generated Code:

    • Some AI-generated code snippets required significant modification to meet project requirements.
    • Ensuring consistency in the design and coding style when integrating AI-generated elements was challenging.
  • Time Management:

    • Balancing time between coding, testing, and documentation was a learning curve. Initially, too much time was spent on design, which caused a rush during the implementation phase.

Learnings

  • Better Planning:

    • Breaking down tasks into smaller, more manageable chunks and setting mini-deadlines helped in better tracking progress.
  • Code Reviews:

    • Regularly reviewing AI-generated code for quality and consistency is crucial.
  • Continuous Testing:

    • Frequent testing during the development phase helps in identifying and fixing issues early, reducing last-minute stress.

Proposed Improvements

  • Enhanced AI Tool Usage:

    • Explore more advanced features of GitHub Copilot for code optimization.
    • Use AI tools for automated testing and validation in future projects.
  • Improved Documentation:

    • Maintain a more detailed and continuous log of decisions and changes made during the project.
  • Time Management:

    • Allocate specific time slots for each phase and stick to the schedule more rigorously.

Final Thoughts

  • The project was a valuable learning experience in integrating AI tools with web development.
  • The challenges encountered provided significant learning opportunities that will inform future projects.
  • Overall, the project outcomes met the initial objectives, and the use of AI tools added efficiency and innovation to the development process.

By focusing on reflections, challenges, successes, and proposed improvements, the retrospective report provides meaningful insights without duplicating the detailed documentation already present in the README.


Plagiarism Guidelines for Learners

In this AI-Augmented Pair Programming Project, it is crucial to maintain academic integrity and avoid plagiarism. Here are specific guidelines and strategies to help you understand and adhere to ethical practices, along with ways assessors can verify compliance.

Project Overview Section

Guidelines on AI Tool Usage:

  • Use Responsibly: While using AI tools like GitHub Copilot, ensure that the code you submit is your own. You should be able to explain all AI-generated content.
  • Document Usage: Clearly document where and how AI tools were used in your project, specifying the contributions made by AI versus your own work.

Pre-Implementation Artefacts Section

Progress Submissions:

  • Intermediate Deliverables: Submit drafts of your project plan, wireframes, and initial code. These should show the evolution of your project and your understanding at each stage.

Documentation Section

Version Control Analysis:

  • Regular Commits: Make regular commits to your version control system (e.g., GitHub) to document your progress. Each commit should have a clear message detailing the changes made.
  • Detailed Contribution Reports: Include a report explaining your contributions at each stage of the project. Clearly differentiate between AI-generated code and your own work.

Plagiarism Detection:

  • Use of Tools: Be aware that plagiarism detection tools will be used to scan your code and documentation for similarities with other sources. Ensure that all content is original or properly cited.

Implementation Guidelines

Project Plan and User Stories (10%)

  • Original Content: Your project plan and user stories must be your own work. Avoid copying from other sources without proper attribution.
  • Specificity and Detail: Ensure that your user stories are specific to your project scenario and not generic templates from the internet.

Design Documentation (10%)

  • Create Your Own Designs: Wireframes and UX design documentation should be original. If you use design tools or templates, customize them significantly to reflect your unique project requirements.
  • Accessibility Considerations: Document how you have considered accessibility in your design. This should be based on your understanding and application of accessibility standards.

Version Control Setup (5%)

  • Consistent Use: Use your version control system consistently. Regular, descriptive commits will help demonstrate your ongoing work and understanding.
  • Branching Strategy: While branching is not required, document any strategies used to manage different parts of your project.

AI Tool Usage Plan (5%)

  • Clear Usage Plan: Document your plan for using AI tools. Specify which parts of the project will use AI-generated code and how you will ensure the quality and originality of this code.

Code Quality and Standards (15%)

  • Adhere to Standards: Ensure your code meets HTML5/CSS3 standards and follows best practices for readability and maintainability.
  • Review and Optimize: Review and optimize AI-generated code. Clearly document any modifications or optimizations you make.

AI-Generated Code Integration (15%)

  • Document AI Use: Clearly document where AI-generated code is used. Include comments in the code to highlight AI-generated sections.
  • Critical Assessment: Critically assess AI-generated code for quality and relevance. Make necessary adjustments to ensure it fits your project requirements.

Functional Implementation (20%)

  • Meet Acceptance Criteria: Ensure your implementation meets all user stories' acceptance criteria. Document any challenges and how you addressed them.
  • Original Implementation: Avoid copying implementation details from other sources. Your solution should be unique to your project scenario.

User Experience Quality (10%)

  • Ensure Quality UX: Focus on creating a high-quality user experience, with emphasis on design aesthetics, usability, and responsiveness.
  • Document Decisions: Record design decisions that enhance the user experience.

Final Project Submission (10%)

  • Complete Submission: Ensure your final project submission includes a fully functional web application, source code repository, and deployment link.
  • Proper Attribution: If you use any external resources or libraries, provide proper attribution and documentation.

Retrospective Report (10%)

  • Reflect Honestly: Your retrospective report should honestly reflect your development process, challenges faced, and lessons learned. It should be your own analysis and not copied from other sources.

Plagiarism Guidelines Summary

  1. Use AI Tools Responsibly: Ensure you understand and can explain all AI-generated content.
  2. Document Everything: Clearly document the use of AI tools, progress, and contributions.
  3. Submit Original Work: Your project plan, user stories, designs, code, and retrospective report must be original and specific to your project.
  4. Use Version Control: Make regular, descriptive commits to document your progress and contributions.
  5. Attribute Properly: Properly cite any external resources or libraries used in your project.

By following these guidelines, you can ensure that your work is original, demonstrates your understanding, and adheres to academic integrity standards. Assessors will use these documented processes and tools to verify the originality and authenticity of your work.