Biniam2023: Agile Development: 4 Weeks

[Biniam2023]

[my fork of module repository]()

Learning Objectives

0. Developing HTML & CSS

Practice with the skills, tools, and workflows you will need to efficiently develop websites written with HTML & CSS.

• 🥚 VSCode: you can ...
• [x] use the LiveServer extension to launch an HTML page in the browser
• [x] use autocomplete to begin a new HTML document, create new tags, and much more
• [x] use the HTML CSS Support and IntelliSense fo CSS class names extensions to make writing HTML & CSS more efficient
• 🥚 Formatting HTML & CSS: You can ...
• [x] use VSCode configurations to format your code on save
• [x] use npm run format to format all the code in your repository
• 🥚 Linting CSS: You can use the npm run lint:css script to find mistakes in your CSS, and you can fix the mistakes.
• 🥚 Validating HTML: You can use the npm run validate:html script to find mistakes in your CSS, and you can fix the mistakes.
• 🥚 Browser Developer Tools: You can ...
• [x] inspect the source code of a web page using the Sources tab
• [x] find any part of the web page in the Elements tab of your Dev Tools DOM inspector
• [x] find the styles for any element in the Elements tab
• [x] make temporary changes in a web page from the Elements tab to see how they will look

  1. Following Plans
  

  Practice working together in a group to build small websites in incremental steps according to a plan. You will be given final code, a detailed plan to rebuild it, and will need to work as a group following the processes in Planning and Collaborating.

• [x] 🥚 Project Definition and Scope: As a group, you can agree on what you are trying to build, and can clearly describe the project using a README and a repository description.
• [x] 🥚 Project Constraints: As a group you can define project constraints by discussing your strengths, weaknesses and context. You can set these types of constraints:
• [x] External: constraints that come from outside your group
• [x] Internal, Involuntary: constraints that come from within your group, but your group did not decide to have.
• [x] Internal, Voluntary: constraints your group decides on to improve the quality of your development process and final software.
• [x] 🥚 Communication Plans: You can work with your group mates to agree on a communication plan to follow during development.
• [x] 🥚 Communicating Challenges: During development you can discuss with your group when ...
• you are blocked and need help the agreed channels of communication.
• your schedule or availability changes
• you are having trouble getting along with each other
• [x] 🥚 Using a Backlog: You can develop from a backlog of features organized by priority:
• must-have
• should-have
• could-have
• [x] 🥚 Follow a Development Strategies: You can follow a development strategy to understand the code required for must-have user stories.
• [x] 🥚 Create Issues From a Dev Strategy: You can create issues for user stories in your project based on the development strategy.
• [x] 🥚 Retrospective: Your group can complete a retrospective to ...
• [ ] assess how well you worked as a group
• [ ] find ways to improve in the next project
• [x] compare your plan to the reality of developing your website
• [x] 🐣 Claiming and Completing Issues: You can claim issues from the TODO column of a project board and ...
• [x] track your progress with the project board
• [x] develop your code locally on a separate branch
• [x] send a PR that passes CI checks and meets the requirements
• [x] 🐣 Code Review: You can both review a group mate's PR, and productively participate in a review of your own code.
• [x] 🐣 Match a Design & Acceptance Criteria: When developing your tasks, you can write code that matches the project's Wireframe and meets your issue's Acceptance Criteria.

2. Writing Plans

Practicing writing your own plans as a group. You will be given only the final code for HTML/CSS web pages, your group will need write a detailed plan for rebuilding the website in small steps.

• [x] 🥚 Write User Personas: As a group you can describing your site's users with User Personas, and you can use the personas to plan your website from the user's perspective.
• [x] 🥚 Write User Stories: Given a working web page, you can describe it with user stories and acceptance criteria for each user story.
• [x] 🐣 Write a Backlog: After listing all the user stories for a web page, you can organize them into a Backlog by priority: must-have, should-have and could-have
• [x] 🐣 Create a Prioritized Design: Using your backlog and the original site as a guide, you can create a Wireframe of the site your group will build. You can use different colors and comments to indicate a priority for each component in the Wireframe.
• [x] 🐣 Write a Development Strategies: You can translate your Wireframe and Backlog into a Development Strategy for the must-have user stories.

3. Adapting Plans

Even the best plans are not perfect, it's not possible to know everything ahead of time! You may be able to plan everything ahead of time when the web pages you build are very small and you have the code ahead of time, but it's a whole different thing when you need to build a larger web page over a longer period of time.

In this chapter you will practice full Agile Development by developing a larger, open-ended web pages and adapting your plans as you go. Your team will need to make an initial plan, but the plan will change! Practice having regular meetings with your group to review the website's progress, review your plan, and make any changes in the plan that are necessary to keep the project on schedule.

• [x] 🐣 Adjusting the Backlog: As a group you can agree to changes in the backlog when necessary.
• [x] 🐣 Adjusting the Design: As a group you can agree on changes to the design during the development process when it becomes clear your old design needs updating.

• [x] 🐣 Updating the Project Board: You can manage the project board by adding, removing or updating issues when necessary. This includes changing labels, milestones, or assignees when necessary.

  AGILE (4 weeks)

• [x] Understanding AGILE Agile is a about teamwork! We create small circle to achieve the project goal. Agile is flexible because it's build with small steps. Different with waterfall method in agile if we need to make any changes we still can go back to the previous step. In waterfall method the project needs to be break down in order to make any changes.

Agile Methods

• [x] Requirement definition & analysis of concept
• [x] Planning of sprint
• [x] Collaborative design development
• [x] Create & implement
• [x] Review & monitor

Agile Methodology

• [x] User persona an imaginary audience. It helps us to understanding the targeted group audience. Without user persona we can't make wireframe.
• [x] User stories/backlog is sorted by PRIORITY! It contains needs of the audience. Must have, Should have and Could have.
• [x] Acceptance criteria example: A user can't submit a form without completing all mandatory
• [x] Wireframe must be create based on user story/backlog.
• [x] Development strategy converting the must have or priority needs of audience to coding phase.
• [x] Retrospective intern feedback in group. It's about BEHAVIOR not people. We are not allowed to pointing someone in this session. Mostly done at the end of the week.
• [x] Stand-up meeting is a brief daily meeting. It's like updating our work project to the group, what we've done, what we are currently busy with or even which problem do we have about the task. Mostly done for max 15mins
• [x] Constraints consist of planning, availability timetable, template file, code of conduct.

Planning

• [x] Make a group availability timetable
• [x] Set-up meeting hours for the whole week based on availability timetable
• [x] Creating repo using template
• [x] Protecting master repo
• [x] Set the repo live/live url
• [x] Adding collaborator
• [x] Creating additional labels
• [x] Creating Project Board and organising it
• [x] Creating issue to be put in PB
• [x] Discussing README content
• [x] Discussing code of conduct
• [x] Discussing user persona
• [x] Discussing backlog
• [x] Discussing design
• [x] Creating wireframe
• [x] Retrospective

Week 1

• [ ] I have pushed my progress to my fork of exercises repo

I Need Help With:

Nothing in this moment.

What went well?

• Working as a group, sharing ideas, helping on each other.
• I appreciate for the help from the coaches to solve the errors.
• dividing the tasks within the group.

What went less well?

• Being responsible for the tasks while we working in a group.

Lessons Learned

• Agile Methodology

Sunday Prep Work

• Not yet because I need finish first this week's project, then I'm planning to prepare for Sunday in the day before.

Loruki website week-2

Learning Objectives

Planning

• [x] Make a group availability timetable
• [x] Set-up meeting hours for the whole week based on availability timetable
• [x] Creating repo using template
• [x] Protecting master repo
• [x] Set the repo live/live url
• [x] Adding collaborator
• [x] Creating additional labels
• [x] Creating Project Board and organising it
• [x] Creating issue to be put in PB
• [x] Discussing README content
• [x] Discussing code of conduct
• [x] Discussing user persona
• [x] Discussing backlog
• [x] Discussing design
• [x] Creating wireframe
• [x] Retrospective

Week-2

• [ ] I have pushed my progress to my fork of exercises repo

I Need Help With:

• [x] Creating issue to be put in PB

What went well?

• [x] Protecting master branch [x] Creating Project Board and organising it

What went less well?

• [x] Discussing user persona
• [x] Discussing backlog
• [x] Discussing design
• [x] Discussing development strategies

Lessons Learned

• [x] Protecting master branch
• [x] Set the repo live/live url
• [x] Creating issue to be put in PB

Sunday Prep Work

• Being Agile will be our next lesson, but still I didn't prepare to read about it. Because I'm still busy with this week assignment Loruki website rebuild.

---

Week-3

agile-development-hyf-redesign

I Need Help With:

• [x] Development strategy still a bit confusing.

What went well?

• [x] The planning part of our project goes well as a team.
• [x] Dividing the tasks between the group.

What went less well?

• [x] Everything seems okay at the moment.

Lessons Learned

• [x] Understanding of Agile development
• [x] Working as team is very helpful in Agile development.
• [x] Lists must-haves, should-have and could-haves in every page while developing backlog.

Sunday Prep Work

• [x] Preparing for the coding part of our project (HTML and CSS)

---

Week-4

agile-development-hyf-redesign

I Need Help With:

• [x] fixing the errors in the coding specially (npm rum validate:html)

What went well?

• [x] Practicing more in coding our project
• [x] coding CSS and HTML

What went less well?

• [x] time management the coding takes a lot of time.
• [x] Agile development isn't applied in our this week in coding part

Lessons Learned

• [x] I practiced more in HTML and CSS and I understood the concept of margin, padding and border.

Sunday Prep Work

• [x] Not yet, because I'm busy working on this week project. I will try to prepare for the next Sunday, on the day before.

[sammou00]

Creating issues to be put in PB? What do you mean? it is really simple to create an issue. Can you tell me more about your problem?

[Biniam2023]

Creating issues to be put in PB? What do you mean? it is really simple to create an issue. Can you tell me more about your problem? Yeah it is simple, creating an issue but I wasn’t link the issue in the PR, then my issue didn’t close even after my branch was merged. But one of my group mates shows me how its works.

[sammou00]

Ok, to connect an issue to PR all you have to do when creating a PR there something called Development just click on it and select the issue.