"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
- Learning Objectives
- About the Projects
- Homework Submission (external)
- Week 1: Be Semantic
- Week 2: Be Responsive
- Week 3: Be Accessible
- Deeper Dives
- Class Recordings
- Study Links (external)
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 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. Software projects are difficult to understand, and mistakes are easy to make. 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 not so difficult when you're given the steps to complete in order, but it will take discipline to do it correctly and a lot of practice to plan the steps on your own. However, every minute you spend practicing this now will save you hours of debugging later on and make collaboration a breeze!
- Disciplines, organized, incremental development
- Breaking large web-sites into small, manageable steps
- Managing many files and folders
- Sending Pull Requests on GitHub
- Turning on GitHub Pages for live websites
- Using Project Boards to track projects
- Using Issues to start a conversation about a specific lines of code
- Pulling & pushing specific branches
- Atomic commits with meaningful messages
- Branching and merging locally
- Disciplined development, building one feature per branch
- Installing and enabling plugins
- Opening folders in the side bars
- Adding, deleting and modifying files in a project folder
- Using liveServer to develop your web sites
- Using linters & code formatters (plugins)
- Source Code: HTML & CSS files you edit in VSC
- Document Object Model: What you see in the DevTools
- Rendered Page: What you see in the main browser window
- Finding the source for a website
- Inspecting a specific DOM Element
- Finding the styles for a given element
- Modifying a live web page
- Replicating styles and layout
- Use clear and consistent code formatting
- Write your HTML & CSS in separate files
- Meaningful names for classes & id's
- Correct usage of CSS selectors
- Responsive, mobile first development
- Accessible Rich Internet Applications (ARIA)
In the first weeks it's very 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 strugging 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 turn in a complete repository, cleanly developed with one branch per step. It's up to you to decide what the steps are. Take a look through this example project to get an idea of what an incrementally developed project looks like. Cloning this repository and studying it with GitKraken/VSC/Browser will help to visualize how Git branches can be used to organize project steps.
Your repository will also need a README containing a report on what you struggled with, what you learned, and what skills you now need to work. 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 learning notes in the README.
The goal of these projects is to practice planning and building projects in a methodical and structured way, and to write the cleanest and most correct code possible. 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:
- ... use only plain HTML & CSS (no CSS frameworks like Bootstrap or Material!)
- ... pay as much attention to your branches 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 indent your code
- ... find the simplest solution to each step of the project
- ... start each step of the project by copy-pasting the last step
- ... forget to work on separate branches
- ... think that your site can be pretty enough to make up for messy code
- ... use any CSS libraries or frameworks
- ... make the any steps of your project do less or more than is assigned
- ... move on to the next step before the previous one is finished
- ... include any JavaScript