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.
- Project Overview
- Pre-Implementation Artefacts (30%)
- Project Implementation (50%)
- Post-Implementation Review (20%)
- Mapped Learning Outcomes and Assessment Criteria
- Do's and Don'ts
- Phased Approach to the Project
- Sample Retrospective Report
- Plagiarism Guidelines for Learners
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
- 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:
- 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.
-
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.
-
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.
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
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
-
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.
-
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.
-
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.
-
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.
- 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.
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.
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.
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.
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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- Use AI Tools Responsibly: Ensure you understand and can explain all AI-generated content.
- Document Everything: Clearly document the use of AI tools, progress, and contributions.
- Submit Original Work: Your project plan, user stories, designs, code, and retrospective report must be original and specific to your project.
- Use Version Control: Make regular, descriptive commits to document your progress and contributions.
- 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.