Cristobal Lopez Check in - Agile module

[alexander-lopez-s]

[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
  • [ ] 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:
  • [ ] External: constraints that come from outside your group
  • [ ] Internal, Involuntary: constraints that come from within your group, but your group did not decide to have.
  • [ ] 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.
• [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.

[alexander-lopez-s]

Week 1

I Need Help With:

• It’s not 100% clear to me, how do we synchronize our branches in VS if someone has already committed changes. Example: We all have empty HTML files to start the project, my classmate finished and uploaded the navigation bar of our website. After she did so, I completed the footer and uploaded it. The merge will show my footer but not her navigation bar because GitHub will reflect the latest changes. How do we solve this?

What went well?

• I was able to create a repository and branches.

• I was able to plan with my team and work on our .md files.

• I was able to coordinate duties.

• I was able to preview the HTML file with the preview extension in VS.

• I was able to recreate the section part of a website.

• I was able to generally apply the Web Development Strategy in this project.

What went less well?

• An updated footer was uploaded directly to the Master branch, I still don’t have an explanation why it happened.

Lessons Learned

• Working in teams applying the Agile Development strategy.

• Time management.

• Creating a project readme.md file.

Sunday Prep Work

• I’m going to check on the study material today.

[colevandersWands]

It’s not 100% clear to me, how do we synchronize our branches in VS if someone has already committed changes.

I think @EliasMlopez99 had a similar question, if this answer doesn't help let us know and we can explain it differently.

[alexander-lopez-s]

@colevandersWands my question is partially answered. I don't understand the point #2 in the workflow. How do we "merge main to the local branch"?

[colevandersWands]

When you git pull origin main, it pulls the changes to your local main branch. so you still need to merge them to your local branch before you can push it again. here's an update diagram

you do this locally so that any conflicts occur on your computer and not on github. they're easier to fix with VSCode, and you shouldn't bother your colleagues with them anyway

[alexander-lopez-s]

Week 2

I Need Help With:

• Why shouldn't we link the issues to the project board?
• Is there a guide for making the description of the PR?
• An explanation why is it preferred to used <button> instead of <input>?

What went well?

• I was able to create a whole planning with my team.

• I know now how to design a website.

• I was able to comply with my duties and share them to my team.

• I was able to position elements using CSS.

• I was able to recreate the header and demo form of the Loruki website and chnage some elements from its original position.

What went less well?

• Not all of the team members were able to fully participate in the project.

Lessons Learned

• Working in teams applying the Agile Development strategy.

• Time management.

• Creating and planning a "design" for my project.

Sunday Prep Work

• I’m going to check on the study material today.

[danielhalasz]

• Why shouldn't we link the issues to the project board?
• Is there a guide for making the description of the PR?
• An explanation why is it preferred to used <button> instead of <input>?

1. you should link issues in the project board, but some coaches suggested not to put PRs there
2. it is totally up to you, and it actually depends on what that PR is solving..it is to give an idea about it before even checking the code
3. https://www.geeksforgeeks.org/button-tag-vs-input-typebutton-attribute/

[alexander-lopez-s]

Acknowledged!

[alexander-lopez-s]

Week 3

I Need Help With:

• I would like to know which is trending more in the coding world, Bootstrap or JQuery and which one do you recommend me to learn. I am busy with JQuery for the moment.

• Can we have both, Bootstrap and JQuery in a project? Will they crash?

• How many CSS files should we have per project? If more than 1, why and in which scenarios?

What went well?

• I was able to design the HYF website and add some modifications together with my team.

• Communication between all the team members is happening and we are already seeing good results.

What went less well?

• Our leader is a bit introverted but we are helping her as a whole team.

Lessons Learned

• Working in teams applying the Agile Development strategy.

• Time management.

• Common agreement is a key for working on a project like this one.

Sunday Prep Work

• I am going to start learning Bootstrap as soon as possible.

[danielhalasz]

@cristobal-lopez I would say stay away from JQuery 🙂 as far as I know, it used to be popular at some point, but not any longer and people try to avoid it nowadays.

[alexander-lopez-s]

Copied Daniel :)

[alexander-lopez-s]

Week 4

I Need Help With:

• How can a submit button capture the info that the user has typed in a form and how to receive it in our local computers through the internet?

What went well?

• I was able to rebuild the contact form and the map of HYF website despite some problems encountered during the coding process.

What went less well?

• The website is not looking good now as some elements overlap between them.

• Bootstrap was not a good experience for me, probably because I am still in the process of learning CSS.

Lessons Learned

• It is important that all the teams agrees on what will be done.

-It is everybody's responsibility to comply with the agreed tasks on time.

Sunday Prep Work

• I am going to take a look at the next lessons and get ready for Sunday.