<< 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. This can even be 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!
- Module Projects
- Learning Objectives
- Suggested Study
- Weekly Details:
- Class Recordings
Projects in Incremental Development are all about the workflows. Take plenty of time to familiarize yourself with Planning and Collaborating, practicing these steps is your main objective for the coming 3 weeks.
expand/collapse
In the first weeks it's likely that you'll spend as much time figuring out how to plan and work with Git/GitHub as you will spend writing code. 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.
Here's a short list of do's and don'ts that can help you stay on track:
- ... ask for help early and often
- ... pay as much attention to your branches & repository as your code
- ... be very careful about your CSS classes, selectors and id's
- ... properly format your code
- ... find the simplest solution to each task in your projects
- ... 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
expand/collapse
- Breaking large web-sites into small, manageable tasks
- Sharing tasks between group members
- 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
expand/collapse
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
- learngitbranching
- git & github for poets
- lab.github.com:
- The Net Ninja
- git-it
- Understand how to use Atomic Commits
- Adding collaborators to a repository
- about code reviews
- requesting a code review
- Git Workflow for 2
- Pull Requests
- Git & GitHub for Poets
- The Net Ninja: 11
- linking PRs to Issues: reference 1, reference 2
- closing Issues using keywords
- 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
- User Stories
- Acceptance Criteria
- Setting Priorities
- Many Strategies
- The Priority Quadrant
- Other Perspectives
This week will be a crash-course on how to plan, organize, and develop a software project. You will work in groups to reverse-engineer a website, with finished code as a starting point.
expand/collapse
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!
Planning and Collaborating: This is important, take your time to understand it!
In class you will get to know your coaches, discuss the Planning and Collaborating process, then get a start on this week's group project.
- Introductions from each coach
- Q/A time about the secret lives of developers
- A walk-through and discussion of Planning and Collaborating
- As a full class, take a look through the finished loruki-website code and discuss how it might be broken into small tasks
- Break into small groups and get set up for this week's group project. You should aim to have created your group's repository by the end of class.
group project
This week's project is to study the loruki-website tutorial from Traversy Media. A working website is not enough! You are expected to create a group repository named loruki-website, as described in Planning and Collaborating. Your group is not expected to submit exactly the same code as Mr. Traversy. You are free to add features, remove features, or write your features differently than he did. His tutorial code is just a starting point.
This is a large project to finish in one week, it's ok if you don't finish all the code! What's most important is that you get used to the Planning and Collaborating workflows.
In the tutorial, Mr. Traversy deployes his website using Netlify. For your group project you can use GitHub Pages instead.
Here's a good way to approach the group project:
- Before watching the tutorial video (aim to have this finished on Tuesday):
- Backlog: Study the finished website as a group to come up with your backlog and priorities. You won't need to look at the actual code for this step, backlogs are all about what the user sees!
- Wireframe: Study the finished website as a group, comparing it to the backlog you wrote. How would you simplify the website into a wireframe?
- Development Strategy: Study the finished code as a group. What code did Mr. Traversy write for each step? how would you break that code into different tasks?
- Project Board: Convert your Development Strategy into issues and a project board in your group repo.
- While studying the tutorial individually, each group member can assign themselves tasks from the project board to practice the HTML & CSS they are learning in the tutorial.
- After everyone has finished studying the tutorial you can already organize a group call to discuss what you learned and write your Retrospective. Your group does not need to have finished the project before doing the Retrospective.
Copy-paste this checklist into a new project issue and move your issue to the project board, your issue should have:
- labels:
group,project,week-1 - milestone:
incremental-development
- [ ] [repo](https://github.com/_/_) (with a complete README)
- [ ] [live demo](https://_.github.io/_) (GitHub Pages, not Netlify)
- [/planning](https://github.com/_/_/tree/master/planning)
- [ ] communication plan
- [ ] constraints
- [ ] backlog
- [ ] wireframe
- [ ] development strategy
- [ ] retrospective
- [ ] [project board](https://github.com/_/_/projects/1)This week you will start a 2-week project where your group needs to reverse-engineer a live website, without any starter code.
expand/collapse
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!
You and your group should come prepared to present your Retrospective. Each group will have ~5 minutes to share how the project went last week. Keep it short and clear!
Besides the Retrospectives, this Sunday will be all review and preparation for the week's project. Come ready with all sorts of questions!
- Questions & review
- Retrospective presentations, ~5 minutes per group
- Coach-led discussion of challenges and Lessons Learned
- Read over step 6, Development all together
- Study the hackyourfuture.be website as a full class
- how would you break this into small steps?
- which pieces are most important?
- Break into small groups and prepare your repository for the group project
group project
Your group will have 2 weeks to reverse-engineer as much of hackyourfuture.be as possible. If your team has some different ideas for layout or design, go for it. The HYF site is just a starting point. Beginning with an empty repository your group will need to define a backlog with priorities, create a project board full of tasks, and get coding!
Pay special attention to:
- HTML/CSS Good Practice
- Using HTML5 Semantic Element
- Accessibility
- Responsive Design
Careful! When you inspect the hackyourfuture.be the DOM, HTML and CSS will be hard to read. The class names will be meaningless, there will be many extra nested elements, and the sources will be split into many strange files. Ignore this! You aren't trying to recreate the exact code (which is actually written in React), you're trying to reverse-engineer the website - creating something that looks, and feels like hackyourfuture.be but is not.
One of the challenges with this project will be inspecting hackyourfuture.be to find the fonts, colors, assets and layout without losing your way in the DevTools :)
Copy-paste this checklist into a new project issue and move your issue to the project board, your issue should have:
- labels:
group,project,week-2,week-3 - milestone:
incremental-development
- [ ] [repo](https://github.com/_/_) (with a complete README)
- [ ] [live demo](https://_.github.io/_)
- [/planning](https://github.com/_/_/tree/master/planning)
- [ ] communication plan
- [ ] constraints
- [ ] backlog
- [ ] wireframe
- [ ] development strategy
- [ ] retrospective
- [ ] [project board](https://github.com/_/_/projects/1)No new material, one more week to practice planning and collaborating before learning about UX/UI Design.
expand/collapse
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 your group's work last week, and to share tips for a better next week.
- Questions & review
- ~5 minute status report from each group
- Discussion of challenges and Lessons Learned
Git workshop! Come ready with your questions and your git conflicts from the week.
group project
Finish building as much of hackyourfuture.be as possible before Friday. On Friday or Saturday your group should gather to discuss how the project went and to fill out your Retrospective.
You can move your group issue into "Ready for Review" after you have finished your Retrospective. Just like the first week's project, you will be assessed on your planning and collaborating not on a finished project.
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
Tiago, Unmesh, Tamer, Stéphane
- Week 1
- Week 2
- Week 1 review: pt. 1, pt. 2, pt. 3
- Step 6. Development
- Project Intro
- Week 3
- Week 2 review
- Using Git & GitHub: pt. 1, pt. 2
Stéphane, Tiago, Tamer