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.
---
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.
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.
[ ] 🥚 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.
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.
Week 1
I Need Help With:
development strategy
What went well?
creating branches
What went less well?
we all have different schedules in the team, so it is difficult to organize a meeting
I learned
how to plan a project
Week 2
I Need Help With:
css
What went well?
html
What went less well?
again, we all have different schedules in the team, so it is difficult to organize a meeting
I learned
to do more complex styling in CSS, mostly over positioning.
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.
npm run formatto format all the code in your repositorynpm run lint:cssscript to find mistakes in your CSS, and you can fix the mistakes.npm run validate:htmlscript to find mistakes in your CSS, and you can fix the mistakes.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.
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.
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.
Week 1
I Need Help With:
What went well?
What went less well?
I learned
Week 2
I Need Help With:
What went well?
What went less well?
I learned