Haneefa: Agile Development, 4 weeks

[Haneefa-Shaik]

[my fork of module repository]()

Learning Objectives

Priorities: 🥚, 🐣, 🐥, 🐔 (click to learn more)

There is a lot to learn in this repository. If you can't master all the material at once, that's expected! Anything you don't master now will always be waiting for you to review when you need it. These 4 emoji's will help you prioritize your study time and to measure your progress: - 🥚: Understanding this material is required, it covers the base skills you'll need for this module and the next. You do not need to finish all of them but should feel comfortable that you could with enough time. - 🐣: You have started all of these exercises and feel you could complete them all if you just had more time. It may not be easy for you but with effort you can make it through. - 🐥: You have studied the examples and started some exercises if you had time. You should have a big-picture understanding of these concepts/skills, but may not be confident completing the exercises. - 🐔: These concepts or skills are not necessary but are related to this module. If you are finished with 🥚, 🐣 and 🐥 you can use the 🐔 exercises to push yourself without getting distracted from the module's main 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
• [x] 🥚 Linting CSS: You can use the npm run lint:css script to find mistakes in your CSS, and you can fix the mistakes.
• [x] 🥚 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.
• 🥚 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.
• 🥚 Retrospective: Your group can complete a retrospective to ...
  • [x] assess how well you worked as a group
  • [x] find ways to improve in the next project
  • [x] compare your plan to the reality of developing your website
• 🐣 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.
• [ ] 🥚 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.

[Haneefa-Shaik]

Week 1

I Need Help With:

A little bit confusing with the merging conflicts while using the HTML file. Still getting habituated to handle the merge conflict occurring in git when the same file has been edited by multiple users.

What went well?

• Getting familiar with the updation using branches, writing user personas, updating the project board, creating the design and all other planning features went well.
• Making the project board up to date.

What went less well?

Communication in the team went somewhat less. As we are new to this system, I can understand that everyone cannot match the specific timing. But hopefully, for the upcoming projects, it will improve.

Lessons Learned

• Every individual in the team has to understand the goal well and cooperate with the team with their individual work.
• Learned about team management.
• working in agile development, we can quickly adapt to requirement changes and provides a good discipline in building the project.

Sunday Prep Work

Almost finished the deliverables. Started referring to next week's study plan.

[colevandersWands]

A little bit confusing with the merging conflicts while using the HTML file. Still getting habituated to handle the merge conflict occurring in git when the same file has been edited by multiple users.

This is not simple, it takes everyone doing things correctly for it to go smoothly. Figuring this out is one of the main goals in the coming weeks so no worries if you're not 100% yet

[Haneefa-Shaik]

WEEK 2

I Need Help With:

I have a little bit confusing about the readme file and project.md, since we did not have any particular format for the project description md file, I thought it was like a summary as a readme file. And I need help to make understand the goal of some teammates for efficient results.

What went well?

• Constraints, Communication plan, User Personas, Backlog, Development strategy development.
• As a team leader I stay motivated even though I had hurdles due to some teammates and kept our project board up to date with the help of @cristobal-lopez .
• Watching related videos helped me in improving my HTML and CSS skills a bit.
• learned some new CSS properties by watching Mr.traversy video.

What went less well?

Communication and availability went wrong totally. Had a lot of issues with two members of the team. As a team leader, I tried to contact them and waited for their replies. I don’t t know how to contact them apart Discord. They updated their availability in the communication plan but not turned up to the meetings and the discussion. they didn’t have time to check the errors and linting issues with the team. I know everyone has different free timings and my only thought is they should stick to their communication plan at least and show their availability and do the tasks.

Lessons Learned

• Don't do others' work.
• Project is not only about the coding part, it defines the collaboration of the team too.
• Trying to resolve the problem by myself.
• Trying styling part as per our thoughts and tastes.

Sunday Prep Work

• Trying to learn and work on more HTMLl and CSSs concepts.

[danielhalasz]

@Haneefa-Shaik sad that two members of your team were not very responsive, I have also contacted them without much success. especially considering these difficulties you did an amazing job with Cristobal!! What project.md file do you mean? I think it can be enough to create one README.md in the root folder of the project repo and in the beginning define what the project is about..and in the end refine it to reflect the results.

[Haneefa-Shaik]

Thank you @danielhalasz . I was little bit confused about project description and now i am clear and thank you for the clarification

[Haneefa-Shaik]

Week 3

I Need Help With:

So far everything going smooth and good.

What went well?

• Planning went well.
• First time, I tried to write the code using bootstrap without CSS file. It was quite new now and the start really went well.
• Team collaboration is good.

What went less well?

• watching videos and learning was a little bit less this week, hopefully, next week I will refer to more videos and courses.

Lessons Learned

• working in agile development strategy.
• Time management.
• Now working with Html and CSS has gone really better.

Sunday Prep Work

• Referring to some other sources to know more about bootstrap classes.

[danielhalasz]

@Haneefa-Shaik what sources have you found most useful so far?

[Haneefa-Shaik]

@danielhalasz For me udemy videos were helpful. there are a lot of free tutorials about bootsrap 5.

[Haneefa-Shaik]

Week 4

I Need Help With:

I got liitle bit confused when creating a responsive CSS grid using a media query. My question is- Is it possible to create a responsive grid without a media query?

What went well?

• we started to rebuild the home using only CSS and no bootstrap at all. it made me get depth into CSS and got time to learn and practice more.
• Communication was short and clear. it's straight to the point.
• Team cooperation is also good and really being agile and into the agile methodology.

What went less well?

• I think the bootstrap part went less. but in my opinion, it's good to know about the frameworks.

Lessons Learned

• Practicing the code will give you the confidence
• Don't stop referring to more videos and courses parallel along with the assignments.

Sunday Prep Work

• Still have some pending work on the extra page. Tomorrow I will go to the lesson plans.

[danielhalasz]

Is it possible to create a responsive grid without a media query?

@Haneefa-Shaik the CSS grid system helps in setting up a column/row structure and the media queries are used to determine how the HTML sections are styled at each viewport size. even with Bootstrap, which uses a kind of grid system and breakpoints/media queries all of this is still happening behind the scenes.

an other option might be to combine the grid system with flexbox.. in that case, the elements inside a section could be sized with flexbox..and thus avoid media queries..but it is also means that it just keeps the ratio..but will not be able to completely set a unique style for different view sizes

[Haneefa-Shaik]

@danielhalasz Thank you for the clear explaination.