[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 ...
[ ] 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.
[ ] 🥚 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 ...
[ ] inspect the source code of a web page using the Sources tab
[ ] find any part of the web page in the Elements tab of your Dev Tools DOM
inspector
[ ] find the styles for any element in the Elements tab
[ ] make temporary changes in a web page from the Elements tab to see how
they will look
[1. Following Plans]
[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
[ ] 🥚 Follow a Development Strategies: You can follow a development
strategy to understand the code required for must-have user stories.
[ ] 🥚 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
[ ] 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 ...
[ ] track your progress with the project board
[ ] develop your code locally on a separate branch
[ ] 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.
[ ] 🐣 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]
[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
[ ] 🐣 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.
[ ] 🐣 Write a Development Strategies: You can translate your Wireframe
and Backlog into a Development Strategy for the must-have user stories.
[3. Adapting Plans]
[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 Check-In
I Need Help With:
being given more examples of our assignments so i could better understand what is expected from me. i need practical tasks and guidance in VS code because I'm not yet confident enough
What went well?
Working in teams and dividing tasks, and also receiving help from team mates, it made things a lot easier,
what do you think went will with you?
I learnt more through the practical work, as it also helped me refresh my memory on what we have learnt so far especially in git hub, it helped me get more familiar with how to use git hub,
What went less well?
Gathering all team-mates at the same time, due to our different schedules
what do you think went less will with you?
I was a bit behind in this module, so i had to try and catch up real quickly with my team mates as a result i don't think i fully understood everything, as it was a bit fast. i would have to go the parts i don't fully understand again, especially in wire frame design
Lessons Learned
what have your learned from the first week?
I learnt about agile development still more to learn, how to work i teams and dividing tasks
Sunday Prep Work
what have you prepared for next Sunday class?
I will read through articles and watch videos related to Sundays class
Week 2 Check-In
I Need Help With:
Nothing for now
What went well?
Working in teams and dividing tasks, and also receiving help from team mates, and coaches
what do you think went will with you?
getting more familiar with how to write planning, but i still need to practice more especially how to write a development strategy and backlog
what do you think went less will with you?
i don't yet fully understand how to write the development strategy and backlog as a result im a bit slow on this part
Lessons Learned
learnt about the different parts of coding as !doctype, head, body, divs etc but there is still alot more to learn
Sunday Prep Work
what have you prepared for next Sunday class?
I will read through articles and watch videos related to Sundays class
Week 3 Check-In
I Need Help With:
nothing for now
What went well?
communication and getting feedback from team mates
what do you think went will with you?
worked wire-frame which is a part of planning i have not done before, it was interesting to practice that part
what do you think went less will with you?
i don't yet fully understand how to rewrite the codes of hyf website, but surely learning as i progress
Lessons Learned
learnt how to work with css
Sunday Prep Work
what have you prepared for next Sunday class?
I will read through sundays lesson plan and watch videos related to the class
Week 4 Check-In
I Need Help With:
nothing for now
What went well?
getting feedback from team mates,
what do you think went will with you?
getting more confident with vs code especially in html
what do you think went less will with you?
experienced alot of errors, merge conflicts which took alot of time to resolve
Lessons Learned
i need more practice in css and learn to to resolve issues in vs code, as some where really complex
Sunday Prep Work
what have you prepared for next Sunday class?
I will read lesson plan and watch videos related to the new module
Learning Objectives
0. Developing HTML & CSS
npm run format
to format all the code in your repositorynpm run lint:css
script to find mistakes in your CSS, and you can fix the mistakes.npm run validate:html
script to find mistakes in your CSS, and you can fix the mistakes.[1. Following Plans]
[2. Writing Plans]
[3. Adapting Plans]
Week 1 Check-In
I Need Help With:
being given more examples of our assignments so i could better understand what is expected from me. i need practical tasks and guidance in VS code because I'm not yet confident enough
What went well?
Working in teams and dividing tasks, and also receiving help from team mates, it made things a lot easier,
what do you think went will with you? I learnt more through the practical work, as it also helped me refresh my memory on what we have learnt so far especially in git hub, it helped me get more familiar with how to use git hub,
What went less well?
Gathering all team-mates at the same time, due to our different schedules
what do you think went less will with you? I was a bit behind in this module, so i had to try and catch up real quickly with my team mates as a result i don't think i fully understood everything, as it was a bit fast. i would have to go the parts i don't fully understand again, especially in wire frame design
Lessons Learned
what have your learned from the first week?
I learnt about agile development still more to learn, how to work i teams and dividing tasks
Sunday Prep Work
what have you prepared for next Sunday class?
I will read through articles and watch videos related to Sundays class
Week 2 Check-In
I Need Help With:
Nothing for now
What went well?
Working in teams and dividing tasks, and also receiving help from team mates, and coaches
what do you think went will with you?
getting more familiar with how to write planning, but i still need to practice more especially how to write a development strategy and backlog
what do you think went less will with you?
i don't yet fully understand how to write the development strategy and backlog as a result im a bit slow on this part
Lessons Learned
learnt about the different parts of coding as !doctype, head, body, divs etc but there is still alot more to learn
Sunday Prep Work
what have you prepared for next Sunday class?
I will read through articles and watch videos related to Sundays class
Week 3 Check-In
I Need Help With:
nothing for now
What went well?
communication and getting feedback from team mates
what do you think went will with you?
worked wire-frame which is a part of planning i have not done before, it was interesting to practice that part
what do you think went less will with you?
i don't yet fully understand how to rewrite the codes of hyf website, but surely learning as i progress
Lessons Learned
learnt how to work with css
Sunday Prep Work
what have you prepared for next Sunday class?
I will read through sundays lesson plan and watch videos related to the class
Week 4 Check-In
I Need Help With:
nothing for now
What went well?
getting feedback from team mates,
what do you think went will with you?
getting more confident with vs code especially in html
what do you think went less will with you?
experienced alot of errors, merge conflicts which took alot of time to resolve
Lessons Learned
i need more practice in css and learn to to resolve issues in vs code, as some where really complex
Sunday Prep Work
what have you prepared for next Sunday class?
I will read lesson plan and watch videos related to the new module