<< Precourse | Home | UX/UI Design >>
"Nearly all Agile teams favor an incremental development strategy; in an Agile context, this means that each successive version of the product is usable, and each builds upon the previous version by adding user-visible functionality."
Incremental Development is a strategy for developing software. In this strategy you start with the simplest code you can possibly write to get things started. Often this is just empty files with the right names, in the right folders! Then in small steps you add more code so that each little step works, builds on top of the last step, and is a little closer to the end goal.
This strategy is sooooo important to learn because programming is hard. All developers (even your coaches!) make mistakes all the time. The best way to manage mistakes is to work in small, understandable steps and making sure that each step works before moving on.
Incremental Development is more about discipline than talent. Every minute you spend practicing this now will save you hours of debugging and make collaboration a breeze!
- Planning and Collaborating
- Module Projects
- Learning Objectives
- Suggested Study
- Weekly Details:
- Class Recordings
The main focus of this module is planning and collaborating on software projects. You've already seen all the pieces you need in the Precourse! To collaborate on a group project you will need:
- A planning document (markdown)
- A repository
- Issues
- labels, milestones and assignees
- A Project Board
- Pull Requests + code review
Wait, what?! HTML and CSS aren't even on that list!
Understanding why they are not on the list will give you a head start towards becoming a great developer. The difference between an ok developer and a great developer doesn't have to do with the languages, frameworks or technologies they use. It has to do with their discipline in planning, communication, and collaboration.
Your projects in this module may only use HTML and CSS, but the workflows you learn will be used all the way through the final project. It will go a little something like this:
expand/collapse
Before diving into the code take some time with your team to understand what you will be building. It's easy to get in trouble later on if your team mates understands the project in different ways. You should be less concerned about finding the right answer, and more concerned about finding a shared answer.
In this module having a shared understanding of the project will mean creating a wireframe to describe how your website will appear to users.
Now that you all understand what you will build, it's time to set up the group's project repository. Choose a repo owner, they will:
- Add everyone in your team as a contributor
- Add a LICENSE
- Create a README.md with a short description of the project you will build
- Create an empty development-strategy.md file
Get together with your team and discuss the wireframe, how will you break your website into steps and tasks? When you are done with this planning session your group repository should have a complete Development Strategy with large steps and smaller tasks.
You can take a look through the ./development-strategy folder of this repository to see some examples.
Now you have a plan, it's time to organize all of your tasks into issues on your repository:
- Create one milestone for each step in your strategy
- Create a label for each type of task in your strategy. in this module that will mean an
htmland acsslabel - Create one issue for each task, classified with labels and milestones
- Set up a project board with 5 columns:
- Todo
- Blocked
- In Progress
- Ready for Review
- Done
- Move your issues to the Todo column.
Everything is set up! now all that's left is to ...
Everything is planned and the repository is ready, it's time to start coding. You and your team mates will each work on one issue at a time, tracking your progress using the project board. You will be responsible for writing your code on a new branch, and your team mates will be responsible for reviewing and merging your code to main/master.
Your workflow will look something like this flowchart:
click to see the flowchart
Projects in Incremental Development will all have a development-strategy.md and be developed collaboratively.
expand/collapse
In the first weeks it's likely that you'll spend as much time figuring out how to publish and turn in your projects as you will spend building them. This is totally normal and OK! Working like a developer takes time and practice to get good at, and at this point in your learning it's even more important than mastering HTML & CSS!
So on days when you find yourself spending a couple hours struggling with branches, trying to push your homework or create an issue, remind yourself that it's all time well spent. Mastering these skills now will free your time later to focus on studying the more interesting and challenging skills in this course.
Developing a working web site is not enough! You will be expected to submit a development strategy and complete repository, cleanly developed with one branch per step. The goal of these projects is to practice planning and building clean projects in a structured way. The goal of these projects is not to build the fanciest most beautiful website, to use all the latest CSS tricks, or to use cool libraries.
Your repository will also need a README file explaining your project to new users. You will be assessed not only on your working website, but also on the quality of your code, the correctness of your branches, and the completeness of your README.
Here's a short list of do's and don'ts that can help you stay on track:
- ... pay as much attention to your branches & repository as your code
- ... completely finish one step of the project before moving on to the next
- ... be very careful about your CSS classes, selectors and id's
- ... properly format your code
- ... find the simplest solution to each step of the project
- ... think that your site can be pretty enough to make up for messy code
- ... make any steps of your project do less or more than is described in the strategy
- ... move on to the next step before the previous one is finished
Skills and concepts you will learn in this module
more info
- Breaking large web-sites into small, manageable steps
- Reading and writing
development-strategy.mdfiles
- Pulling & pushing specific branches
- Atomic commits with meaningful messages
- Branching and merging
- Using Pull Requests for code review
- Using Project Boards to track projects
- Using Issues to organize and discuss tasks
- Navigating directories:
cd,ls,pwd - Creating & removing files and directories
- Using plugins for efficient development
- Using linters & code formatters (plugins)
- Using the integrated terminal
- Source Code: HTML & CSS files you edit in VSC
- Document Object Model: What you see in the DevTools inspector
- Rendered Page: What you see in the main browser window
- Finding the source for a website
- Inspecting a specific DOM Element
- Replicating styles and layout
- Use clear and consistent code formatting
- Meaningful names for classes & id's
- Correct usage of CSS selectors
- Responsive, mobile first development
- Accessible Rich Internet Applications (ARIA)
References, Tutorials and exercises to help you through this module
more info
https://htmlpreview.github.io/ - see a live demo of any branch
- What is this?
- Agile Development by Cartoon
- Atlassian, Team Playbook
- Splitting User Stories
- Three key parts
development-strategy.mdfiles- example development strategies
- example group repo
- All About Trees: in steps, as a repo
- learngitbranching
- git & github for poets
- lab.github.com:
- The Net Ninja
- git-it
- Understand how to use Atomic Commits
- Jesse Showalter
- CLI games:
- A huge cheat sheet
- study.hyf.be
- FCC, Responsive Web Design: exercises, video
- mmtuts: HTML & CSS
- CSS Games
- 🥚 html-css-git-exercises
- 🐣 HTML-CSS-Practice-Problems
- 🐥 css-exercises
- about code reviews
- requesting a code review
- Git Workflow for 2
- Pull Requests
- Git & GitHub for Poets: pull request & merge, resolving conflicts
- The Net Ninja: 11
- linking PRs to Issues: reference 1, reference 2
- closing Issues using keywords
This week will be a crash-course on how to plan, organize, and develop a software project. You will work individually to reverse-engineer a website, with finished code as a starting point.
more info
Do you have any questions from last week? Add the
questionlabel to an issue in your class repo so your coaches know what to review!
- Git & GitHub for Poets: 1.4
- GitHub
- Linking PRs to Issues
- Code Review
In class you will practice the entire Planning and Collaboration workflow by building a new markdown ice-breaker repository with your group.
Guided by a coach, each study group will complete steps 1-4 of the Planning and Collaboration workflow:
- Understand the Project
- Prepare your repo for collaboration
- Write a Development Strategy
- You can use the ice-breaker-strategy.md as a starting point
- Prepare your repo for development
Guided by a coach, each study group will practice step 5 of Planning and Collaboration. You will each take turns sharing your screen and practicing the Claim, Branch, Review, Merge workflow.
- Did you get conflicts? which conflicts and how did you fix them?
- What was confusing or frustrating about Code Review?
It's more important that you take the time to understand why this workflow is important than that you close all of your issues. Take all the time you need to ask questions of your coach and discuss what you are doing. Your group can always organize a study session to finish the repo during the week.
individual project
This week's project is to study the acme-web-design tutorial from Traversy Media.
Writing the same code as Mr. Traversy's code is not enough! You are expected to submit your code from his tutorial in a new repository on your GitHub account generated from this starter template. Your repository should be named acme-web-designn and should be cleanly developed with one branch per step. It's up to you to write the development strategy!
A good strategy to for completing this project is the three-step:
- follow the tutorial studying the code and understanding the finished project.
- study the finished code and break it down into steps, write your development strategy and prepare your repo.
- it's ok if your strategy is not the same as the tutorial's!
- build the project again following the Claim, Branch, Review, Merge workflow. you can refer back to the tutorial as much as you need
- this week you can merge your own issues without code review because it is an individual project
Copy-paste this checklist into a new project issue and move your issue to the project board, your issue should have:
individuallabelprojectlabelweek-1labelincremental-developementmilestone
- [ ] [repo](https://github.com/_/_) (with a complete README)
- [ ] [live demo](https://_.github.io/_)
- [ ] [development strategy](https://github.com/_/_/tree/master/development-strategy.md)
- [ ] [project board w/ labeled & assigned issues](https://github.com/_/_/projects/1)
- [ ] [issues closed by PRs](https://github.com/_/_/issues)
- [ ] [one branch per step](https://github.com/_/_/network)
- [ ] [one closed PR per step](https://github.com/_/_/pulls)Work as a group to reverse-engineer a website, with finished code as a starting point.
more info
Do you have any questions from last week? Add the
questionlabel to an issue in your class repo so your coaches know what to review!
This Sunday you will be practicing the Planning and Collaboration workflow on a simple HTML/CSS project. To prepare for class you can take a look through this directory:
./development-strategies/all-about-trees
It contains the code you will be reverse-engineering in small groups and the strategy you will use as a starting point.
Guided by a coach, each study group will complete steps 1-4 of the Planning and Collaboration workflow, this time on an HTML/CSS project:
- Understand the Project
- Study the finished code & wireframe in the
./development-strategies/all-about-treesfolder - Changes are welcome! This strategy and website are just a starting point
- Study the finished code & wireframe in the
- Prepare your repo for collaboration
- Write a Development Strategy
- You can use the Development Strategy from
./development-strategies/all-about-treesas a starting point
- You can use the Development Strategy from
- Prepare your repo for development
Guided by a coach, each study group will practice step 5 of Planning and Collaboration to begin developing your HTML/CSS group project. You will each take turns sharing your screen and practicing the Claim, Branch, Review, Merge workflow.
This is exactly what you will be doing for the week's project! It's more important that your group is ready to work together this week than that you complete the All About Trees project, you can always finish it over the week for extra practice.
group project
This week's project is to study the app-theme tutorial from Traversy Media.
Writing the same code as Mr. Traversy's code is not enough! You are expected to submit your code from his tutorial in a new repository on your GitHub account generated from this starter template. Your repository should be named app-theme and should be cleanly developed with one branch per step. It's up to you to write the development strategy!
You will need to use Font Awesome 4.7 in your project
A good strategy to for completing this project is the four-step:
- individually: follow the tutorial, studying the code and understanding the finished project.
- individually: study the finished code and break it down into steps, write your development strategy and prepare your repo.
- it's ok if your strategy is not the same as the tutorial's!
- as a group: compare development strategies and combine the best parts of each to create a group strategy
- prepare your group repository for development
- as a group: build the project again following the Claim, Branch, Review, Merge workflow. you can refer back to the tutorial as much as you need
Copy-paste this checklist into a new project issue and move your issue to the project board, your issue should have:
grouplabelprojectlabelweek-1labelincremental-developementmilestone
- [ ] [repo](https://github.com/_/_) (with a complete README)
- [ ] [live demo](https://_.github.io/_)
- [ ] [development strategy](https://github.com/_/_/tree/master/development-strategy.md)
- [ ] [project board w/ labeled & assigned issues](https://github.com/_/_/projects/1)
- [ ] [issues closed by PRs](https://github.com/_/_/issues)
- [ ] [one branch per step](https://github.com/_/_/network)
- [ ] [one closed PR per step](https://github.com/_/_/pulls)
- [ ] [multiple contributors](https://github.com/_/_/contributors)Work as a group to reverse-engineer a website, with no code provided. You're on your own!
more info
Do you have any questions from last week? Add the
questionlabel to an issue in your class repo so your coaches know what to review!
Nothing new! Come ready to discuss what went well and what didn't in last week's project.
Each group will take ~15 minutes presenting their project repository and discussing what went well and what was challenging.
After hearing about each group's experience, you and your coaches will decide the best way to spend the second half of class. It may be practicing in small groups, coding along with your coaches, or anything else!
group project
This week's group project is to build your own accessible & responsive clone of the DuckDuckGo home page (long version). We don't expect your DOM to be identical to DuckDuckGo's, or for all the buttons to have the same behavior, but visually your site should be identical to the real DuckDuckGo. If you would like to use a CSS framework, go for it! Just be sure everyone in your team agrees ;)
Unlike the last two weeks, this project does not have a video tutorial for you to follow. This week you will also expected to do your best at writing accessible HTML including correct Semantic HTML and ARIA. Pay special attention to points of user interaction like the search field and submit button.
You are expected to submit your code from his tutorial in a new repository generated from the w3-validation-starter repo. Your repository should be named duck-duck-clone and should be collaboratively developed following the same workflow you practiced in class this Sunday. It's up to you to write the development strategy!
A good strategy to for completing this project is the four-step:
- individually: study the DuckDuckGo website. Try to find all the fonts, colors and assets they used.
- individually: write a development strategy to reverse-engineer DuckDuckGo
- as a group: compare development strategies and combine the best parts of each to create a group strategy
- prepare your group repository for development
- as a group: build the project again following the Claim, Branch, Review, Merge workflow. you can refer back to the tutorial as much as you need
Copy-paste this checklist into a new project issue and move your issue to the project board, your issue should have:
grouplabelprojectlabelweek-1labelincremental-developementmilestone
- [ ] [repo](https://github.com/_/_) (with a complete README)
- [ ] [live demo](https://_.github.io/_)
- [ ] [development strategy](https://github.com/_/_/tree/master/development-strategy.md)
- [ ] [project board w/ labeled & assigned issues](https://github.com/_/_/projects/1)
- [ ] [issues closed by PRs](https://github.com/_/_/issues)
- [ ] [one branch per step](https://github.com/_/_/network)
- [ ] [one closed PR per step](https://github.com/_/_/pulls)
- [ ] [multiple contributors](https://github.com/_/_/contributors)note for students: HYF modules are constantly being improved, recordings from past classes may not be the same as what you did on Sunday
- Students: Here you can find recordings of this module from past classes. Enjoy!
- Coaches: When sending your PR's with links please ...
- Indicate which class you were teaching
- Which week it was (if the module is more than 1 week)
- Give your name
- and a helpful description
Stéphane, Tiago, Louise, Dirk, Kevin
- Week 1
- Week 2
- Week 3
Stéphane, Tiago, Marie, Unmesh, Nawang, Tamer
- Week 1
- Week 2
- Week 3